Flutter筆記 Column和Row

MainAxisSize：　　控制自己的布局方式

　　MainAxisSize.min　　默認值，Column和Row自適應children；

　　MainAxisSize.max　　Column填充父控件豎屏，Row填充父控件橫屏；需要搭配MainAxisAlignment使用才有效果；

 

 

MainAxisAlignment：　　控制子集的對齊方式，Column上下對齊，Row左右對齊

　　MainAxisAlignment.start　　默認值，Column靠上，Row靠左；
　　MainAxisAlignment.center　　Column,Row居中；
　　MainAxisAlignment.end　　Column靠下，Row靠右；
　　MainAxisAlignment.spaceAround　　自己填充，等份分配空間給子集，子集各自居中對齊；
　　MainAxisAlignment.spaceBetween　　自己填充，等份分配空間給子集，子集兩側對齊；
　　MainAxisAlignment.spaceEvenly　　自己填充，等份分配空間給子集，子集同一中線居中對齊；

　　注：當設置MainAxisSize.max時才該值有效果。

 

 

CrossAxisAlignment：　　　控制子集各自的對齊方式，Column左右對齊，Row上下對齊
　　CrossAxisAlignment.strech       　Column中會使子控件寬度調到最大，Row則使子控件高度調到最大

　　CrossAxisAlignment.start　　　   Column中會使子控件向左對齊，Row中會使子控件向上對齊
　　CrossAxisAlignment.center　　　默認值，子控件居中
　　CrossAxisAlignment.end　　　　Column中會使子控件向右對齊，Row中會使子控件向下對齊
　　CrossAxisAlignment.baseline　　按文本水平線對齊。與TextBaseline搭配使用

 

 

TextBaseline：

　　TextBaseline.alphabetic　　  用於對齊字母字符底部的水平線。
　　TextBaseline.ideographic　　用於對齊表意字符的水平線。

 

 

VerticalDirection：　　控制子控件對齊方式是否相反方式

　　VerticalDirection.down　　默認值，按照默認方式
　　VerticalDirection.up　　　CrossAxisAlignment.start跟CrossAxisAlignment.end對反

 

參考代碼：

return Scaffold(
      body: Column(
        children: <Widget>[
          Column(
            children: <Widget>[
              Container(color: Colors.greenAccent,  width: 100,  height: 50,),
              Container(color: Colors.yellow,       width: 80,  height: 70,),
              Container(color: Colors.purpleAccent, width: 120,  height: 60,),
            ],
          ),
          Container(height: 40,),
          Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(color: Colors.greenAccent,  width: 100,  height: 50,),
              Container(color: Colors.yellow,       width: 80,  height: 70,),
              Container(color: Colors.purpleAccent, width: 120,  height: 60,),
            ],
          ),
          Container(height: 40,),
          Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment:  MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              Container(color: Colors.greenAccent,  width: 100,  height: 50,),
              Container(color: Colors.yellow,       width: 80,  height: 70,),
              Container(color: Colors.purpleAccent, width: 120,  height: 60,),
            ],
          ),
          Container(height: 40,),
          Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(color: Colors.greenAccent,  width: 100,  height: 50,),
              Container(color: Colors.yellow,       width: 80,  height: 70,),
              Container(color: Colors.purpleAccent, width: 120,  height: 60,),
            ],
          ),
          Container(height: 40,),
          Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(color: Colors.greenAccent,  width: 100,  height: 50,),
              Container(color: Colors.yellow,       width: 80,  height: 70,),
              Container(color: Colors.purpleAccent, width: 120,  height: 60,),
            ],
          ),
          Container(height: 40,),
          Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.start,
            verticalDirection: VerticalDirection.up,
            children: <Widget>[
              Container(color: Colors.greenAccent,  width: 100,  height: 50,),
              Container(color: Colors.yellow,       width: 80,  height: 70,),
              Container(color: Colors.purpleAccent, width: 120,  height: 60,),
            ],
          ),
        ],
      ),
    );

 

　　　　　　　　 Row