Flutter - 常用组件
一切皆组件。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(文本)
文本组件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(富文本)
富文本组件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(图片组件)
详细介绍
图片组件Image显示图像的组件，有多种构造函数：
new Image：从ImageProvider获取图像new Image.asset：加载资源图片new Image.file：加载本地图片文件new Image.network：加载网络图片new Image.memory：加载Uint8List资源图片
常用属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| image | ImageProvider | 抽象类，需要自己实现获取图片数据的操作 |
| width/height | double | Image显示区域的宽度和高度设置，这里需要把Image和图片两个区分开。图片本身有大小，Image Widget是图片的容器，本身也有大小。宽度和高度的配置经常和fit属性搭配 |
| fit | BoxFit | 图片填充模式，具体取值见 BoxFit取值表 |
| color | Color | 图片颜色 |
| colorBlendMode | BlendMode | 在对图片进行手动处理的时候，可能用到图层混合，如改变图片颜色，此属性可以对颜色进行混合处理，有多种模式 |
| alignment | Alignment | 控制图片的摆放位置，比如图片放置在右下角则为Alignment.bottomRight |
| repeat | ImageRepeat | 此属性可以设置图片的重复模式。moRepeat为不重复，Repeat为x和y方向重复，repeatX为x方向重复，repeatY为y方向重复 |
| centerSlice | Rect | 当图片需要被拉伸显示时，centerSlice定义的矩形区域会被拉伸，可以理解为我们在图片内部定义9个点用作拉伸，9个点为”上”,”下”,”左”,”右”,”上中”,”下中”,”左中”,”右中”,”正中” |
| matchTextDirection | bool | matchTextDirection与Derection配合使用。TextDirectio有两个值分别为：TextDirection.ltr从左到右展示图片，TextDirection.rtl为从右到左展示图片 |
| gaplessPlayback | bool | 当ImageProvider发生变化后，重新加载图片的过程中，原图片的展示是否保留。值为true则保留，值为false则不保留，直接等待下一张图片加载 |
BoxFit取值及描述
| 值 | 描述 |
|---|---|
| BoxFit.fill | 全图显示，显示可能拉伸，充满 |
| BoxFit.contain | 全图显示，显示原比例，不需充满 |
| BoxFit.cover | 显示可能拉伸，可能裁剪，充满 |
| BoxFit.fitWidth | 显示可能拉伸，可能裁剪，宽度充满 |
| BoxFit.fitHeight | 显示可能拉伸，可能裁剪，高度充满 |
| BoxFit.none | 原始大小 |
| BoxFit.scaleDown | 效果和BoxFit.contain差不多，但是该属性不允许显示超过原图大小(可小不可大) |
Icon(图标)
Flutter中，可以像web开发一样使用iconfont，iconfont即字体图标，它是将图标做成字体文件，然后通过指定不同的字符而显示不同的图片。
在Flutter开发中，iconfont和图片相比有如下优势：
- 体积小：可以减小安装包大小。
- 矢量的：iconfont 都是矢量图标，放大不会影响其清晰度。
- 可以应用文本样式：可以像文本一样改变字体图标的颜色、大小对齐等。
- 可以通过 TextSpan 和文本混用。
常用属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| icon | IconData | null | 展示的具体图标，可使用Icons图标列表中的任意一个图标即可，如Icons.phone表示一个电话的图标 |
| color | Color | null | 图标的颜色 |
| style | TextStyle | null | 文本样式，可定义文本的字体大小、颜色、粗细等 |
| size | Double | 24.0 | 图标的大小，注意需要带上小数位 |
| textDirection | TextDirection | TextDirection.ltr | Icon组件里也可以添加文本内容。有些文本书写的方向是从左到右，有些则是从右到左。从左到右使用TextDirection.ltr从右到左使用TextDirection.rtl |
按钮
IconButton（图标按钮）
图标按钮组件IconButton是基于Meterial Design风格的组件，可以响应按下的事件，并且按下时带水波纹效果。如果它的onPressed回调函数为null，那么这个按钮处于禁用状态，并且不可按下。
常用属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| alignment | AlignmentGeometry | Alignment.center | 定义IconButton的Icon对齐方式，默认为居中。Alignment可以设置x，y的偏移量 |
| icon | Widget | null | 展示的具体图标，可以使用Icons图标列表中任意一个图标即可，如Icons.phone表示一个电话图标 |
| color | Color | null | 图标组件的颜色 |
| disabledColor | Color | ThemeData.disabledColor | 图标组件禁用状态的颜色，默认为主题里的禁用颜色，也可以设置为其他颜色 |
| iconSize | double | 24.0 | 图标的大小，注意需要带上小数点 |
| onPressed | VoidCallback | null | 当按钮按下时会触发此回调事件 |
| tooltip | String | “” | 当按钮长按下时的提示语句 |
RaisedButton(凸起按钮)
RaisedButton是Material Design中的button，一个凸起的材质矩形按钮，它可以响应按下事件，并且按下时会带一个触摸效果。
FlatButton(扁平化的按钮)
OutlineButton(外边框的按钮)
常用属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | Color | null | 组件的颜色 |
| disabledColor | Color | ThemeData.disabledColor | 组件禁用状态的颜色，默认为主题里的禁用颜色，也可以设置为其他颜色 |
| onPressed | VoidCallback | null | 当按钮按下时会触发此回调事件 |
| child | Widget | - | 按钮的child通常为一个Text文本组件，用来显示按钮的文本 |
| enable | bool | true | 按钮是否为禁用状态 |