Row
用于水平显示子项
A widget that displays its children in a horizontal array.
注:这个控件本身不可以滚动,并且如果里面包含了太多的子项或者子项长度超过可用空间的话会被视为错误。如果想要滚动的话可以考虑用ListView
对应的,垂直显示子项用Column
如果只有一个子项,建议用Align
或Center
布局
示例eg:
new Row(
children: <Widget>[
new Expanded(
child: new Text('Deliver features faster', textAlign: TextAlign.center),
),
new Expanded(
child: new Text('Craft beautiful UIs', textAlign: TextAlign.center),
),
new Expanded(
child: new FittedBox(
fit: BoxFit.contain, // otherwise the logo will be tiny
child: const FlutterLogo(),
),
),
],
)
tips
如果你的子项长度过长,可以和示例代码中一样,用一个Expanded
或其他的灵活有韧性的控件来包裹一下
属性
- mainAxisSize 决定
row
自身的宽度
它含有两个值,分别是max
和min
,默认为max
可选属性 |
含义 |
max |
就像安卓里的match_parent ,尽可能的大 |
min |
就像安卓里的wrap_content ,根据所有子项宽度的和来决定宽度 |
- mainAxisAlignment 决定子项的对齐方式(主轴),默认为
start
可选属性 |
含义 |
center |
居中对齐 |
end |
结尾对齐 |
spaceAround |
使每个子项占的空间一样大 |
spaceBetween |
两端对齐 |
spaceEvenly |
使每个子项之间的间隔一样大 |
start |
开头对齐 |
values |
一个List 常量,用来存储所有的对齐方式枚举 |
- CrossAxisAlignment 决定子项的对齐方式(垂直于主轴的那个轴),默认为
start
可选属性 |
含义 |
center |
居中对齐 |
end |
结尾对齐 |
stretch |
使子项充满这个轴 |
baseline |
子项的准线和交叉轴对齐(前提是对应的子项有准线,比如Text ) |
start |
开头对齐 |
可选属性 |
含义 |
alphabetic |
默认的字母基线 |
ideographic |
对齐表意字符 |
可选属性 |
含义 |
rtl |
从右往左← |
ltr |
从左往右→(默认) |
- List<Widget> children 这是一个用来装子项的数组
布局规则
- 如果子项是可伸展的(被
Expanded
包裹),则会按照它的灵活系数(flex
)进行分布,例如:在Row
中,flex
系数为2.0的子项宽度将会是flex
系数为1.0的宽度的二倍。
-
Row
的高度会和子项的的最大高度相同
-
Row
的宽度和mainAxisSize
有关,具体情况请看上面表格
- 子项的具体位置和
mainAxisSize
与crossAxisAlignment
相互左右有关
- 子项如果是可伸缩的,那带
Flexible.fit
和Flexible.tight
的将会将强制填满分配的空间,带Flexible.loose
的则不会强制填满
Column 垂直排列
基本属性和Row
的用法相似,都是从Flex
派生来的,最终都会把自己本身的参数传给Flex
的构造方法。