Flutter常用widget 'Row、Column'

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(),
      ),
    ),
  ],
)

Row效果

tips

如果你的子项长度过长，可以和示例代码中一样，用一个Expanded或其他的灵活有韧性的控件来包裹一下

属性

• mainAxisSize 决定row自身的宽度 它含有两个值，分别是max和min，默认为max

• mainAxisAlignment 决定子项的对齐方式(主轴)，默认为start

• CrossAxisAlignment 决定子项的对齐方式(垂直于主轴的那个轴)，默认为start

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

• textDirection 子项的排列方向

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