Flutter - 常用组件

发表于 本文字数： 4.3k

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

Container(容器组件)

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区域不会响应。

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里可以包含文本内容及样式

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 - 最大显示行数

Image(图片组件)

详细介绍
图片组件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是图片的容器，本身也有大小。宽度和高度的配置经常和fit属性搭配
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差不多，但是该属性不允许显示超过原图大小(可小不可大)

Icon(图标)

Flutter中，可以像web开发一样使用iconfont，iconfont即字体图标，它是将图标做成字体文件，然后通过指定不同的字符而显示不同的图片。

在Flutter开发中，iconfont和图片相比有如下优势：

  1. 体积小：可以减小安装包大小。
  2. 矢量的：iconfont 都是矢量图标，放大不会影响其清晰度。
  3. 可以应用文本样式：可以像文本一样改变字体图标的颜色、大小对齐等。
  4. 可以通过 TextSpan 和文本混用。

常用属性

属性名 类型 默认值 说明
icon IconData null 展示的具体图标，可使用Icons图标列表中的任意一个图标即可，如Icons.phone表示一个电话的图标
color Color null 图标的颜色
style TextStyle null 文本样式，可定义文本的字体大小、颜色、粗细等
size Double 24.0 图标的大小，注意需要带上小数位
textDirection TextDirection TextDirection.ltr Icon组件里也可以添加文本内容。有些文本书写的方向是从左到右，有些则是从右到左。
从左到右使用TextDirection.ltr
从右到左使用TextDirection.rtl

按钮

IconButton（图标按钮）

图标按钮组件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 “” 当按钮长按下时的提示语句

RaisedButton(凸起按钮)

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

FlatButton(扁平化的按钮)

OutlineButton(外边框的按钮)

常用属性

属性名 类型 默认值 说明
color Color null 组件的颜色
disabledColor Color ThemeData.disabledColor 组件禁用状态的颜色，默认为主题里的禁用颜色，也可以设置为其他颜色
onPressed VoidCallback null 当按钮按下时会触发此回调事件
child Widget - 按钮的child通常为一个Text文本组件，用来显示按钮的文本
enable bool true 按钮是否为禁用状态