Flutter 入门学习（六）— 常用组件

最新推荐文章于 2024-12-16 14:54:56 发布

原创

最新推荐文章于 2024-12-16 14:54:56 发布 · 511 阅读

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

本文介绍了Flutter的常用组件，包括Container、Image、Text、RichText、Icon、IconButton、RaisedButton、ListView、GridView和Form组件，详细讲解了各组件的属性和应用场景。

1. 重要概念

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

容器组件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区域不会响应。

图标 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<