flutter的进阶之路之常用组件

Praise 2019年08月30日 177次浏览

1. 重要概念

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

2. 容器组件

容器组件Container包含一个子widget,自身具备alignment、padding等属性,方便布局过程中摆放child。

常用属性

属性名类型说明
keykeyContainer唯一标识符,用于查找更新
alignmentAlignmentGeometry控制child的对齐方式,如果Container或者Container的父节点尺寸大于child的尺寸,该属性设置会起作用,有很多种对齐方式
paddingEdgeInsetsGeometryDecoration内部的空白区,如果有child,child位于padding内部
colorColor用来设置Container背景色,如果foregroudDecoration设置的话,可能会覆盖color效果
decorationDecoration绘制在child后面的修饰,设置了Decoration的话,就不能设置color属性,否则会报错,此时应该在Decoration中进行颜色的设置
foregroundDecorationDecoration绘制在child前面的装饰
widthdoubleContainer的宽度,设置为double.infinity可以强制在宽度上撑满,不设置,则根据child和父节点两者一起布局
heightdoubleContainer的高度,设置为double.infinity可以强制在高度上撑满
constraintsBoxConstraints添加到child上额外的约束条件
marginEdgeInsetsGeometry围绕在Decoration和child之外的空白区域,不属于内容区域
transformMatrix4设置Container的变换矩阵,类型为Matrix4
childWidgetContainer中的内容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资源图片

常用属性

属性名类型说明
imageImageProvider抽象类,需要自己实现获取图片数据的操作
width/heightdoubleImage显示区域的宽度和高度设置,这里需要把Image和图片两个区分开。图片本身有大小,Image Widget是图片的容器,本身也有大小。宽度和高度的配置经常和fitshu'x
fitBoxFit图片填充模式,具体取值见 BoxFit取值表
colorColor图片颜色
colorBlendModeBlendMode在对图片进行手动处理的时候,可能用到图层混合,如改变图片颜色,此属性可以对颜色进行混合处理,有多种模式
alignmentAlignment控制图片的摆放位置,比如图片放置在右下角则为Alignment.bottomRight
repeatImageRepeat此属性可以设置图片的重复模式。moRepeat为不重复,Repeat为x和y方向重复,repeatX为x方向重复,repeatY为y方向重复
centerSliceRect当图片需要被拉伸显示时,centerSlice定义的矩形区域会被拉伸,可以理解为我们在图片内部定义9个点用作拉伸,9个点为"上","下","左","右","上中","下中","左中","右中","正中"
matchTextDirectionboolmatchTextDirection与Derection配合使用。TextDirectio有两个值分别为:TextDirection.ltr从左到右展示图片,TextDirection.rtl为从右到左展示图片
gaplessPlaybackbool当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负责显示文本和定义显示样式。

常用属性

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

4.2 RichText

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

常用属性

属性名类型默认值说明
textTextSpan-要显示的的文本
textAlignTextAlignTextAlign.start文本水平方向对齐方式,取值右center、end、justify、left、right、start、values
textDirectionTextDirectionTextDirection.ltr有些文本书写方向从左到右,如英语、中文,有些则是从右到左,比如乌尔都语。从左到右使用TextDirection.ltr,从右到左使用TextDirection.rtl
softWrapbooltrue是否自动换行
overflowTextOverflowTextOverflow.clip内容超出文本范围处理方式,默认截断处理
textScaleFactordouble1.0文本缩放比例,默认100%比例显示
maxLinesint-最大显示行数

5. 图标及按钮组件

5.1 图标组件

图标组件Icon展示图标的组件,该组件不可交互,要实现交互图标,可以考虑使用IconButton组件。图标相关组件有以下几个:

  • IconButton:可交互的Icon
  • Icons:框架自带Icon集合
  • IconTheme:Icon主题
  • ImageIcon:通过AssetImages或者其他图片显示Icon

常用属性

属性名类型默认值说明
colorColornull图标的颜色,例如Colors.green[500]
iconIconDatanull展示的具体图标,可使用Icons图标列表中的任意一个图标即可,如Icons.phone表示一个电话的图标
styleTextStylenull文本样式,可定义文本的字体大小、颜色、粗细等
sizeDouble24.0图标的大小,注意需要带上小数位
textDirectionTextDirectionTextDirection.ltrIcon组件里也可以添加文本内容。有些文本书写的方向是从左到右,有些则是从右到左。从左到右使用TextDirection.ltr,从右到左使用TextDirection.rtl

5.2 图标按钮组件

图标按钮组件IconButton是基于Meterial Design风格的组件,可以响应按下的事件,并且按下时带水波纹效果。如果它的onPressed回调函数为null,那么这个按钮处于禁用状态,并且不可按下。

常用属性

属性名类型默认值说明
alignmentAlignmentGeometryAlignment.center定义IconButton的Icon对齐方式,默认为居中。Alignment可以设置x,y的偏移量
iconWidgetnull展示的具体图标,可以使用Icons图标列表中任意一个图标即可,如Icons.phone表示一个电话图标
colorColornull图标组件的颜色
disabledColorColorThemeData.disabledColor图标组件禁用状态的颜色,默认为主题里的禁用颜色,也可以设置为其他颜色
iconSizedouble24.0图标的大小,注意需要带上小数点
onPressedVoidCallbacknull当按钮按下时会触发此回调事件
tooltipString""当按钮长按下时的提示语句

5.3 凸起按钮组件

凸起按钮组件RaisedButton是Material Design中的button,一个凸起的材质矩形按钮,它可以响应按下事件,并且按下时会带一个触摸效果。

常用属性

属性名类型默认值说明
colorColornull组件的颜色
disabledColorColorThemeData.disabledColor组件禁用状态的颜色,默认为主题里的禁用颜色,也可以设置为其他颜色
onPressedVoidCallbacknull当按钮按下时会触发此回调事件
childWidget-按钮的child通常为一个Text文本组件,用来显示按钮的文本
enablebooltrue按钮是否为禁用状态

6. 列表控件

列表是最常见的需求。在Flutter中,用ListView来显示列表项,支持垂直和水平方向展示,通过一个属性我们就可以控制其方向,列表有以下几类:

  • 水平的列表
  • 垂直的列表
  • 数据量非常大的列表
  • 矩阵式的列表

6.1 基础列表组件

基础列表组件为ListView组件。

常用属性

属性名类型默认值说明
scrollDirectionAxixAxis.vertical列表的排列方向,Axis.vertical为垂直方向,是默认值,Axis.horizontal为水平方向
paddingEdgInsetsGeometry-列表内部的空白区域,如果有child,child位于padding内部
reverseboolfalse组件排列方向
childrenList<Widget>-列表元素,注意List元素全部为Widget类型

6.2 水平列表组件

水平列表组件即为水平方向排列的组件,列表内部元素以水平方向排列。把ListView组件的scrollDirection属性设置为Axis.horizontal即可。

6.3 长列表组件

当列表的数据项非常多时,需要使用长列表,比如淘宝后台订单列表、手机通讯录等,这些列表项数据很多。长列表也是使用ListView作为基础组件,只不过需要添加一个列表项构造器itemBuilder。

7. 网格布局组件

网格布局组件GridView可以实现多行多列布局的应用场景。使用GridView创建网格列表有多种方式:

  • GridView.count:通过单行展示个数创建
  • GridView.extent:通过最大宽度创建

常用属性

属性名类型默认值说明
scrollDirectionAxixAxis.vertical滚动的方向,Axis.vertical为垂直方向,是默认值,Axis.horizontal为水平方向
reverseboolfalse默认是从上或者左,向下或者右滚动的,这个属性控制是否反向,默认值为false
controllerScrollController-控制child滚动时的位置
primarybool-是否是父节点的PrimaryScrollController所关联的主滚动视图
phisicsScrollPhysics-滚动的视图如何响应用户的输入
shrinkWrapboolfalse滚动方向的滚动视图内容是否应该由正在查看的内容所决定
paddingEdgInsetsGeometry-四周的空白区域
gridDelegateSliverGridDelegate-控制GridView中子节点布局的delegate
cacheExtentdouble-缓存区域

8. 表单组件

表单是一个包含表单元素的区域。表单元素允许用户输入内容,比如文本域,下拉列表,单选框,复选框等。常见应用场景有:登录、注册、输入信息等。表单里有两个重要的组件,一个是Form组件,用来左整个表单提交使用的;另一个是TextFormField组件,用来做用户输入的。

Form组件常用属性

属性名类型说明
keyKey组件在整个Widget树中的key值
autovalidatebool是否自动提交表单
childWidget组件child只能有一个子组件
onChangedVoidCallback当FormField值改变时的回调函数

TextFormField组件常用属性

属性名类型说明
autovalidatebool自动验证值
initialValueT表单字段初始值
onSavedFormFieldSetter<T>当Form表单调用保存方法Save时,回调的函数
validatorFormFieldValidate<T>Form表单验证器