阅读 1234

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

图片组件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表单验证器
关注下面的标签,发现更多相似文章
评论