Flutter常用widget 'Row、Column'

Row

用于水平显示子项
A widget that displays its children in a horizontal array.
注：这个控件本身不可以滚动，并且如果里面包含了太多的子项或者子项长度超过可用空间的话会被视为错误。如果想要滚动的话可以考虑用ListView
对应的，垂直显示子项用Column
如果只有一个子项，建议用Align或Center布局
示例eg：

new Row(
  children: [
    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(),
      ),
    ),
  ],
)

Row效果

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	开头对齐

• TextBaseline 一条线，用来对齐文字的

可选属性	含义
alphabetic	默认的字母基线
ideographic	对齐表意字符

• textDirection 子项的排列方向

可选属性	含义
rtl	从右往左←
ltr	从左往右→（默认）

• List 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的构造方法。