-19.png
Tags： flutter
常用组件
[TOC]
1. 重要概念
一切皆组件。flutter所有的元素都是由组件组成。比如一个布局元素、一个动画、一个装饰效果等。
2. 容器组件
容器组件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区域不会响应。
3. 图片组件
图片组件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是图片的容器，本身也有大小。宽度和高度的配置经常和fitshu'x |
| 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差不多，但是该属性不允许显示超过原图大小(可小不可大) |
4. 文本组件
4.1 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里可以包含文本内容及样式 |
4.2 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 | - | 最大显示行数 |
5. 图标及按钮组件
5.1 图标组件
图标组件Icon展示图标的组件，该组件不可交互，要实现交互图标，可以考虑使用IconButton组件。图标相关组件有以下几个：
- IconButton：可交互的Icon
- Icons：框架自带Icon集合
- IconTheme：Icon主题
- ImageIcon：通过AssetImages或者其他图片显示Icon
常用属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | Color | null | 图标的颜色，例如Colors.green[500] |
| icon | IconData | null | 展示的具体图标，可使用Icons图标列表中的任意一个图标即可，如Icons.phone表示一个电话的图标 |
| style | TextStyle | null | 文本样式，可定义文本的字体大小、颜色、粗细等 |
| size | Double | 24.0 | 图标的大小，注意需要带上小数位 |
| textDirection | TextDirection | TextDirection.ltr | Icon组件里也可以添加文本内容。有些文本书写的方向是从左到右，有些则是从右到左。从左到右使用TextDirection.ltr，从右到左使用TextDirection.rtl |
5.2 图标按钮组件
图标按钮组件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 | "" | 当按钮长按下时的提示语句 |
5.3 凸起按钮组件
凸起按钮组件RaisedButton是Material Design中的button，一个凸起的材质矩形按钮，它可以响应按下事件，并且按下时会带一个触摸效果。
常用属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | Color | null | 组件的颜色 |
| disabledColor | Color | ThemeData.disabledColor | 组件禁用状态的颜色，默认为主题里的禁用颜色，也可以设置为其他颜色 |
| onPressed | VoidCallback | null | 当按钮按下时会触发此回调事件 |
| child | Widget | - | 按钮的child通常为一个Text文本组件，用来显示按钮的文本 |
| enable | bool | true | 按钮是否为禁用状态 |
6. 列表控件
列表是最常见的需求。在Flutter中，用ListView来显示列表项，支持垂直和水平方向展示，通过一个属性我们就可以控制其方向，列表有以下几类：
- 水平的列表
- 垂直的列表
- 数据量非常大的列表
- 矩阵式的列表
6.1 基础列表组件
基础列表组件为ListView组件。
常用属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| scrollDirection | Axix | Axis.vertical | 列表的排列方向，Axis.vertical为垂直方向，是默认值，Axis.horizontal为水平方向 |
| padding | EdgInsetsGeometry | - | 列表内部的空白区域，如果有child，child位于padding内部 |
| reverse | bool | false | 组件排列方向 |
| children | List<Widget> | - | 列表元素，注意List元素全部为Widget类型 |
6.2 水平列表组件
水平列表组件即为水平方向排列的组件，列表内部元素以水平方向排列。把ListView组件的scrollDirection属性设置为Axis.horizontal即可。
6.3 长列表组件
当列表的数据项非常多时，需要使用长列表，比如淘宝后台订单列表、手机通讯录等，这些列表项数据很多。长列表也是使用ListView作为基础组件，只不过需要添加一个列表项构造器itemBuilder。
7. 网格布局组件
网格布局组件GridView可以实现多行多列布局的应用场景。使用GridView创建网格列表有多种方式：
- GridView.count：通过单行展示个数创建
- GridView.extent：通过最大宽度创建
常用属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| scrollDirection | Axix | Axis.vertical | 滚动的方向，Axis.vertical为垂直方向，是默认值，Axis.horizontal为水平方向 |
| reverse | bool | false | 默认是从上或者左，向下或者右滚动的，这个属性控制是否反向，默认值为false |
| controller | ScrollController | - | 控制child滚动时的位置 |
| primary | bool | - | 是否是父节点的PrimaryScrollController所关联的主滚动视图 |
| phisics | ScrollPhysics | - | 滚动的视图如何响应用户的输入 |
| shrinkWrap | bool | false | 滚动方向的滚动视图内容是否应该由正在查看的内容所决定 |
| padding | EdgInsetsGeometry | - | 四周的空白区域 |
| gridDelegate | SliverGridDelegate | - | 控制GridView中子节点布局的delegate |
| cacheExtent | double | - | 缓存区域 |
8. 表单组件
表单是一个包含表单元素的区域。表单元素允许用户输入内容，比如文本域，下拉列表，单选框，复选框等。常见应用场景有：登录、注册、输入信息等。表单里有两个重要的组件，一个是Form组件，用来左整个表单提交使用的；另一个是TextFormField组件，用来做用户输入的。
Form组件常用属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| key | Key | 组件在整个Widget树中的key值 |
| autovalidate | bool | 是否自动提交表单 |
| child | Widget | 组件child只能有一个子组件 |
| onChanged | VoidCallback | 当FormField值改变时的回调函数 |
TextFormField组件常用属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| autovalidate | bool | 自动验证值 |
| initialValue | T | 表单字段初始值 |
| onSaved | FormFieldSetter<T> | 当Form表单调用保存方法Save时，回调的函数 |
| validator | FormFieldValidate<T> | Form表单验证器 |
网友评论