flutter(六,页面布局篇)

Tags: flutter

Flutter页面布局篇

[TOC]

---

1. 布局及装饰组件说明

组件名称	中文释义	说明
Align	对齐布局	指定child的对齐方式
AspectRatio	调整宽高比	根据设置的宽高比调整child组件
BaseLine	基准线布局	所有的child底部所在的同一水平线
Center	居中布局	child处于水平和垂直方向的中间位置
Column	垂直布局	对child在垂直方向进行排列
ConstrainedBox	限定宽高	限定child的最大值
Container	容器布局	容器布局是一个组合的Widget，包含定位和尺寸
FittedBox	缩放布局	缩放以及位置调整
FractionallySizedBox	百分比布局	根据现有空间按照百分比调整child的尺寸
GridView	网格布局	对多行多列同时进行操作
IndexedStack	栈索引布局	IndexedStack继承自Stack，显示第index个child，其他child是不可见的
LimitedBox	限定宽高布局	对最大宽高进行限制
ListView	列表布局	用列表方式进行布局，如多项数据的场景
Offstage	开关布局	控制是否显示组件
OverflowBox	溢出父容器显示	允许child超出父容器的范围显示
Padding	填充布局	处理容器和chid之间的间距
Row	水平布局	对child在水平方向进行排列
SizedBox	设置具体尺寸	用特定大小的盒子来限定child宽度和高度
Stack/Alignment	Alignment栈布局	根据Alignment组件的属性将child定位在Stack组件上
Stack/Positioned	Positioned栈布局	根据Positioned组件的属性将child定位在Stack组件上
Table	表格布局	使用表格的行和列进行布局
Transform	矩阵转换	做矩阵变换，对child做平移、旋转、缩放等操作
Wrap	按宽高自动换行	按宽度或高度，让child自动换行布局

2. 基础布局处理

2.1 Container(容器布局)

Container在Flutter里使用非常多，是一个组合Widget，内部有绘制Widget、定位Widget和尺寸Widget。

2.2 Center(居中布局)

居中布局，子元素处于水平和垂直方向的中间。

2.3 Padding(填充布局)

用于处理容器和子元素间的间距。

2.4 Align(对齐布局)

将子组件按指定方式对齐，并根据子组件的大小调整自己的大小。

2.5 Row(水平布局)

水平方向是主轴，垂直方向是交叉轴。

2.6 Column(垂直布局)

垂直方向是主轴，水平方向是交叉轴。

2.7 FittedBox(缩放布局)

FittedBox会在自己的尺寸范围内缩放并调整child位置。
两个重要属性：
fit：缩放方式。默认值是BoxFix.contain，即child在FittedBox范围内，尽可能大。contain是在保证child宽高比的前提下，尽可能填满。
alignment：对齐方式。默认值是Alignment.center，居中显示child。

2.8 Stack/Alignment

Stack常用属性

属性名	类型	默认值	说明
alignment	AlignmentGeometry	Alignment.topLeft	对齐方式

对齐方式有以下几种：

• bottomCenter 底部居中
• bottomLeft 底部居左
• bottomRight 底部居右
• center 正中
• centerLeft 中间居左
• centerRight 中间居右
• topCenter 顶部居中
• topLeft 顶部居左
• topRight 顶部居右

2.9 Stack/Positioned

Positioned组件用来定位的。Stack里使用Positioned布局主要是因为在Stack组件里通常需要定位。

Positioned常用属性

属性名	类型	说明
top	double	子元素相对顶部边界距离
bottom	double	子元素相对底部边界距离
left	double	子元素相对左侧边界距离
right	double	子元素相对右侧边界距离

2.10 IndexedStack

继承自Stack，用于显示第index个child，其他child不可见，所以它的尺寸与child中最大尺寸一致。

2.11 OverFlowBox

允许child超出父容器范围显示。
常用属性

属性名	类型	说明
alignment	AlignmentGeometry	对齐方式
minWidth	double	允许child最小宽度，如果child宽度小于该值，按照最小宽度显示
maxWidth	double	允许child最大宽度，如果child宽度大于该值，按照最大宽度显示
minHeight	double	允许child最小高度，如果child宽度小于该值，按照最小高度显示
maxHeight	double	允许child最大高度，如果child宽度大于该值，按照最大高度显示

3. 宽高尺寸处理

3.1 SizedBox

特定大小的盒子，强制child有特定的宽度和高度。如果宽度或高度为null，该组件会调整自身大小以匹配child的尺寸。

3.2 ConstrainedBox

用于限定child的最大、最小宽高。如果child为null，会尽可能缩小尺寸。
常用属性

属性名	类型	说明
constraints	BoxConstraints	child的限制条件，限制最大、最小宽高
child	Widget	子元素组件

3.3 LimitedBox

用于限定最大宽高，与ConstainedBox类似，只是LimitedBox没有最小宽高限制。
常用属性

属性名	类型	默认值	说明
maxWidth	double	double.infini	最大宽度
maxHeight	double	double.infinity	最大高度

3.4 AspectRatio

用于设置调整child的宽高比。适用于需要固定组件宽高比的情景。aspectRatio属性不能为null，必须大于0且必须是有限的。

3.5 FractionallySizedBox

会根据现有空间调整child的尺寸，适用在一个区域里取百分比尺寸时。如果宽高因子为null，则child的宽高会尽可能充满整个区域。

常用属性

属性名	类型	说明
alignment	AlignmentGeometry	对齐方式，不能为null
widthFactor	double	宽度因子，宽度乘以该值，就是最后的宽度
heightFactor	double	高度因子，用作计算最后实际高度

4. 列表及表格布局

4.1 ListView

4.2 GridView

4.3 Table

表格布局，每一行的高度由内容决定，每一列的宽度由列数决定。

常用属性

属性名	类型	说明
columnWidths	Map	设置每一列的宽度
defaultColumnWidth	TableColumnWidth	默认的每一列宽度，默认情况下均分
textDeirection	TextDirection	文字方向
border	TableBorder	表格边框
defaultVerticalAlignment	TableCellVerticalAlignment	对齐方向。默认垂直方向
textBaseLine	TextBaseLine	defaultVerticalAlignment为baseline时，会用到该属性

5. 其他布局

5.1 Transform

矩阵转换。可以对child做平移、旋转、缩放等操作。

常用属性

属性名	类型	说明
transform	Matrix4	一个4x4矩阵
origin	Offset	旋转点，相对于左上角顶点的偏移。默认为左上角顶点
alignment	AlignmentGeometry	对齐方式
transformHitTests	bool	点击区域是否也做相应的改变

5.2 Baseline

基准线布局，将所有元素底部放在同一水平线上。

常用属性

属性名	类型	说明
baseline	double	baseline数值，必须要有，从顶部算
baselineType	TextBaseline	baseline类型，必须要有。目前两种类型：alphabetic对齐底部，ideographic对齐

5.3 Offstage

用于控制child是否显示。

常用属性

属性名	类型	默认值	说明
offstage	bool	true	默认为true表示不显示，false时显示该组件

5.4 Wrap

跟row和column有些相似。单行的Wrap跟Row一样，单列的Wrap跟Column一样。适用于需要按宽度或高度让child自动换行的场景。

常用属性

属性名	类型	默认值	说明
direction	Axis	Axis.horizontal	主轴方向，默认水平
alignment	WrapAlignment	WrapAlignment.start	主轴方向对齐方式，默认为start
spacing	double	0.0	主轴方向的间距
runAlignment	WrapAlignment	WrapAlignment.start	run的对齐方式，可以理解为新的行或列
runSpacing	double	0.0	run的间距
crossAxisAlignment	WrapAlignment	WrapAlignment.start	交叉轴方向对齐方式
textDirection	TextDirection	-	文本方向
verticalDirection	VerticalDirection	-	children的摆放顺序，默认是down