• Row：橫向布局X -- 右

  • 子Widget按照主軸方向（從左-->右）橫向排列，
  • 父Widget的alignment的X值對Row布局沒有影響

• Column：縱向布局Y -- 下

  • 子Widget按照主軸方向（從上-->下）縱向排列，
  • 父Widget的alignment的Y值對Column布局沒有影響

主軸 MainAxisAlignment

• spaceBetween:剩下的空間平均分布到小部件之間??！
• spaceAround: 剩下的空間平均分布到小部件周圍??！
• spaceEvenly：剩下的空間和小部件一起平均分??！
• start： 向主軸開始的方向?qū)R。
• end： 向主軸結(jié)束的方向?qū)R。
• center： 主軸方向居中對齊。
  
  image.png

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

• baseline：文字底部對齊
  • 必須配合textBaseline一起使用
• center：交叉軸方向居中對齊。
• end：向交叉軸結(jié)束的方向?qū)R。；
• start：向交叉軸開始的方向?qū)R；
• stretch：填滿交叉軸方向；
  
  image.png

Expanded 填充布局

• 在主軸方向不會剩下間隙。將被Expanded包裝的部件進(jìn)行拉伸和壓縮
• 主軸橫向，寬度設(shè)置沒有意義
• 主軸縱向，高度設(shè)置沒有意義
• 當(dāng)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),
        ],
      ),
    );
  }
}