2-1-3.基本组件【Row/Column】水平/垂直布局

辅助链接

Row

基本用法

Row(
  mainAxisAlignment : MainAxisAlignment.center, // 主轴 对齐方向
  crossAxisAlignment : CrossAxisAlignment.end, // 交叉轴 
  textDirection: TextDirection.ltr, // 文本方向 ltr左->右 rtl右-> 左 
  mainAxisSize : MainAxisSize.max,  // 容器大小
  verticalDirection : VerticalDirection.down, // 垂直方向 如设置后 则交叉轴方向则按照这个垂直方向排列。
  textBaseline : TextBaseline.alphabetic, // 文本对齐基线
  children: <Widget>[
      Container(
        width: 100,
        height: 40,
        color: Colors.yellow[700],
        child: Text("1"),
      ),
      Container(
        width: 100,
        height: 30,
        color: Colors.yellow[600],
        child: Text("2"),
      ),
      Container(
        width: 100,
        height: 50,
        color: Colors.yellow[500],
        child: Text("3"),
      ),
  ],
)

Column

基本用法

 Column(
               mainAxisAlignment : MainAxisAlignment.spaceAround, // 主轴 对齐方向
              crossAxisAlignment : CrossAxisAlignment.end, // 交叉轴 
              textDirection: TextDirection.ltr, // 文本方向 ltr左->右 rtl右-> 左 
              mainAxisSize : MainAxisSize.max,  // 容器大小
              verticalDirection : VerticalDirection.down, // 垂直方向 如设置后 则交叉轴方向则按照这个垂直方向排列。
              textBaseline : TextBaseline.alphabetic, // 文本对齐基线
               children: <Widget>[
                  Container(
                    width: 100,
                    height: 40,
                    color: Colors.yellow[700],
                    child: Text("1"),
                  ),
                  Container(
                    width: 150,
                    height: 40,
                    color: Colors.yellow[600],
                    child: Text("2"),
                  ),
                  Container(
                    width: 200,
                    height: 40,
                    color: Colors.yellow[500],
                    child: Text("3"),
                  ),
              ],
            )

mainAxisAlignment 主轴对齐方向

crossAxisAlignment 交叉轴对齐方式

对齐宽度/高度，都基于子节点宽度大小/高度大小来 做基本对齐的宽高 可以看出设置后并不会全部往左或者全部往右，这个就是基于子的最大宽高来设置的。

Column中 : 由于我们指定了 crossAxisAlignment 属性为CrossAxisAlignment.center，那么子项在Column纵轴方向（此时为水平方向）会居中对齐。注意，在水平方向对齐是有边界的，总宽度为Column占用空间的实际宽度，而实际的宽度取决于子项中宽度最大的Widget

VerticalDirection