Flutter -- Row&Column

• Row：横向布局X -- 右

  • 子Widget按照主轴方向（从左-->右）横向排列，
  • 父Widget的alignment的X值对Row布局没有影响

• Column：纵向布局Y -- 下

  • 子Widget按照主轴方向（从上-->下）纵向排列，
  • 父Widget的alignment的Y值对Column布局没有影响

主轴 MainAxisAlignment

• spaceBetween:剩下的空间平均分布到小部件之间！！
• spaceAround: 剩下的空间平均分布到小部件周围！！
• spaceEvenly：剩下的空间和小部件一起平均分！！
• start： 向主轴开始的方向对齐。
• end： 向主轴结束的方向对齐。
• center： 主轴方向居中对齐。
  image.png

交叉轴：CrossAxisAlignment 垂直于主轴方向

• baseline：文字底部对齐
  • 必须配合textBaseline一起使用
• center：交叉轴方向居中对齐。
• end：向交叉轴结束的方向对齐。；
• start：向交叉轴开始的方向对齐；
• stretch：填满交叉轴方向；
  image.png

Expanded 填充布局

• 在主轴方向不会剩下间隙。将被Expanded包装的部件进行拉伸和压缩
• 主轴横向，宽度设置没有意义
• 主轴纵向，高度设置没有意义
• 当Text被Expanded包装后，文字可以自动换行

image.png

TextDirection

只能改变Row的主轴方向！

image.png

class RowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      alignment: const Alignment(0.0, 0.0),
      //spaceBetween:  剩下的空间平均分布到小部件之间！！
      //spaceAround: 剩下的空间平均分布到小部件周围！！
      //spaceEvenly：剩下的空间和小部件一起平均分！！
      //Expanded:在主轴方向不会剩下间隙。将被Expanded拉伸。
      child: Row(
        textDirection: TextDirection.ltr, //在Row布局中改变主轴方向！
        mainAxisAlignment: MainAxisAlignment.center, //主轴
        crossAxisAlignment: CrossAxisAlignment.stretch,
        textBaseline: TextBaseline.alphabetic,
        children: [
          Container(
              child: const Text(
                '你好hello',
                style: TextStyle(fontSize: 15),
              ),
              color: Colors.red),
          Container(
              child: const Text(
                '哎aiyo',
                style: TextStyle(fontSize: 15),
              ),
              color: Colors.blue),
          Container(
              child: const Text(
                '哎aiyo',
                style: TextStyle(fontSize: 15),
              ),
              color: Colors.white),
        ],
      ),
    );
  }
}