Flutter 常用组件-总览

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. 图片组件

• 图标 https://www.iconfont.cn/
• 头像 https://www.randomuser.me/photos

图片组件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表单验证器