flutter的进阶之路之页面布局

Praise 2019年09月02日 121次浏览

布局及装饰组件说明

组件名称中文释义说明
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/AlignmentAlignment栈布局根据Alignment组件的属性将child定位在Stack组件上
Stack/PositionedPositioned栈布局根据Positioned组件的属性将child定位在Stack组件上
Table表格布局使用表格的行和列进行布局
Transform矩阵转换做矩阵变换,对child做平移、旋转、缩放等操作
Wrap按宽高自动换行按宽度或高度,让child自动换行布局

基础布局处理

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常用属性

属性名类型默认值说明
alignmentAlignmentGeometryAlignment.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超出父容器范围显示。 常用属性

属性名类型说明
alignmentAlignmentGeometry对齐方式
minWidthdouble允许child最小宽度,如果child宽度小于该值,按照最小宽度显示
maxWidthdouble允许child最大宽度,如果child宽度大于该值,按照最大宽度显示
minHeightdouble允许child最小高度,如果child宽度小于该值,按照最小高度显示
maxHeightdouble允许child最大高度,如果child宽度大于该值,按照最大高度显示

宽高尺寸处理

3.1 SizedBox

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

3.2 ConstrainedBox

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

属性名类型说明
constraintsBoxConstraintschild的限制条件,限制最大、最小宽高
childWidget子元素组件

3.3 LimitedBox

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

属性名类型默认值说明
maxWidthdoubledouble.infini最大宽度
maxHeightdoubledouble.infinity最大高度

3.4 AspectRatio

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

3.5 FractionallySizedBox

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

常用属性

属性名类型说明
alignmentAlignmentGeometry对齐方式,不能为null
widthFactordouble宽度因子,宽度乘以该值,就是最后的宽度
heightFactordouble高度因子,用作计算最后实际高度

列表及表格布局

4.1 ListView

ListView 是一个线性布局的widgets 列表。是最常用的滑动组件,它在滚动方向上一个接一个地显示它的孩子。在交叉轴中,需要孩子填充ListView。

常用属性

属性名类型说明
itemExtentdouble指定Item在滑动方向上的高度,用来提高滑动性能
paddingEdgeInsetsGeometry用来设置BoxScrollView中子控件与父控件的间距
ScrollDirectionenum滚动方向
reversebool决定滚动方向是否与阅读方向一致
controllerScrollController控制滚动的位置
primarybool当内容不足以滚动时,是否支持滚动;对于iOS系统还有一个效果:当用户点击状态栏时是否滑动到顶部
physicsScrollPhysics控制用户滚动视图的交互
shrinkWrapboolscroll view在滑动方向上的高度是否由内容高度决定,false:则高度为滑动方向上的最大允许高度;如果在滑动方向上没有设置约束,则这个字段必须设置为true,否则会报错。
cacheExtentdouble可见区域的前后会有一定高度的空间去缓存子控件,当滑动时就可以迅速呈现

4.2 GridView

网格布局 最常用的网格布局是 GridView.count,它创建了一个在横轴上具有固定数量 网格块 的平铺的布局,和 GridView.extent ,它使用具有最大横轴范围的 网格块 创建布局。自定义SliverGridDelegate 可以生成任意2D排列的子代,包括未对齐或重叠的排列

常用属性

属性名类型说明
scrollDirectionenum滚动方向
reversebool决定滚动方向是否与阅读方向一致
controllerScrollController控制滚动的位置
primarybool当内容不足以滚动时,是否支持滚动;对于iOS系统还有一个效果:当用户点击状态栏时是否滑动到顶部
physicsScrollPhysics控制用户滚动视图的交互
shrinkWrapboolscroll view在滑动方向上的高度是否由内容高度决定,false:则高度为滑动方向上的最大允许高度;如果在滑动方向上没有设置约束,则这个字段必须设置为true,否则会报错。
paddingEdgeInsetsGeometry用来设置BoxScrollView中子控件与父控件的间距
gridDelegateSliverGridDelegate一个控制 GridView 中子项布局的委托。
cacheExtentdouble可见区域的前后会有一定高度的空间去缓存子控件,当滑动时就可以迅速呈现
semanticChildCountint将提供语义信息的子代数量

4.3 Table

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

常用属性

属性名类型说明
columnWidthsMap<int, TableColumnWidth>设置每一列的宽度
defaultColumnWidthTableColumnWidth默认的每一列宽度,默认情况下均分
textDeirectionTextDirection文字方向
borderTableBorder表格边框
defaultVerticalAlignmentTableCellVerticalAlignment对齐方向。默认垂直方向
textBaseLineTextBaseLinedefaultVerticalAlignment为baseline时,会用到该属性

其他布局

5.1 Transform

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

常用属性

属性名类型说明
transformMatrix4一个4x4矩阵
originOffset旋转点,相对于左上角顶点的偏移。默认为左上角顶点
alignmentAlignmentGeometry对齐方式
transformHitTestsbool点击区域是否也做相应的改变

5.2 Baseline

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

常用属性

属性名类型说明
baselinedoublebaseline数值,必须要有,从顶部算
baselineTypeTextBaselinebaseline类型,必须要有。目前两种类型:alphabetic对齐底部,ideographic对齐

5.3 Offstage

用于控制child是否显示。

常用属性

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

5.4 Wrap

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

常用属性

属性名类型默认值说明
directionAxisAxis.horizontal主轴方向,默认水平
alignmentWrapAlignmentWrapAlignment.start主轴方向对齐方式,默认为start
spacingdouble0.0主轴方向的间距
runAlignmentWrapAlignmentWrapAlignment.startrun的对齐方式,可以理解为新的行或列
runSpacingdouble0.0run的间距
crossAxisAlignmentWrapAlignmentWrapAlignment.start交叉轴方向对齐方式
textDirectionTextDirection-文本方向
verticalDirectionVerticalDirection-children的摆放顺序,默认是down