flutter的进阶之路之经常使用组件

• 博客 gz.lovelp.xin/

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

• 图标 www.iconfont.cn/
• 头像 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表单验证器