常用组件 | Notion

一切皆组件。Flutter所有的元素都是由组件组成。比如一个布局元素、一个动画、一个装饰效果等。

Container(容器组件)

Container包含一个子widget，自身具备alignment、padding等属性，方便布局过程中摆放child

属性名	类型	说明
key	key	Container唯一标识符，用于查找更新
alignment	AlignmentGeometry	控制child的对齐方式，如果Container或者Container的父节点尺寸大于child的尺寸，该属性设置会起作用，有很多种对齐方式
padding	EdgeInsetsGeometry	Decoration内部的空白区，如果有child，child位于padding内部
color	Color	用来设置Container背景色，如果foregroudDecoration设置的话，可能会覆盖color效果
decoration	Decoration	绘制在child后面的修饰，设置了Decoration的话，就不能设置color属性，否则会报错，此时应该在Decoration中进行颜色的设置
foregroundDecoration	Decoration	绘制在child前面的装饰
width	double	Container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局
height	double	Container的高度，设置为double.infinity可以强制在高度上撑满
constraints	BoxConstraints	添加到child上额外的约束条件
margin	EdgeInsetsGeometry	围绕在Decoration和child之外的空白区域，不属于内容区域
transform	Matrix4	设置Container的变换矩阵，类型为Matrix4
child	Widget	Container中的内容Widget

padding与margin的不同之处：padding是包含在Content内，而margin是外部边界。设置点击事件的话，padding区域会响应，而margin区域不会响应。

文本组件Text负责显示文本和定义显示样式。

属性名	类型	默认值	说明
data	String		数据为要显示的文本
maxLines	int	0	文本显示的最大行数
style	TextStyle	null	文本样式，可定义文本的字体大小、颜色、粗细等
textAlign	TextAlign	TextAlign.center	文本水平方向对齐方式，取值右center、end、justify、left、right、start、values
textDirection	TextDirection	TextDirection.ltr	有些文本书写方向从左到右，如英语、中文，有些则是从右到左，比如乌尔都语。从左到右使用TextDirection.ltr从右到左使用TextDirection.rtl
textScaleFactor	double	1.0	字体缩放系数，比如设置为1.5，那么字体会放大1.5倍
textSpan	TextSpan	null	文本块，TextSpan里可以包含文本内容及样式

富文本组件RichText使用多个不同风格的widget显示文本，要显示的文本使用TextSpan对象树来描述，每个对象都有一个用于该子树的关联样式。文本可能多行，也可能显示在同一行，取决于布局约束。

属性名	类型	默认值	说明
text	TextSpan	-	要显示的的文本
textAlign	TextAlign	TextAlign.start	文本水平方向对齐方式，取值右center、end、justify、left、right、start、values
textDirection	TextDirection	TextDirection.ltr	有些文本书写方向从左到右，如英语、中文，有些则是从右到左，比如乌尔都语。从左到右使用TextDirection.ltr从右到左使用TextDirection.rtl
softWrap	bool	true	是否自动换行
overflow	TextOverflow	TextOverflow.clip	内容超出文本范围处理方式，默认截断处理
textScaleFactor	double	1.0	文本缩放比例，默认100%比例显示
maxLines	int	-	最大显示行数

图片组件Image显示图像的组件，有多种构造函数：