Flutter基礎元件Row&Column

小熊學程式設計發表於2021-04-06

Flutter元件

簡介

Row和Column為常用的多子控制元件容器元件，Row水平佈局、Column垂直佈局

重要概念：

mainAxisAlignment 主軸對齊方式：與佈局相同方向的對齊方式，Row為水平方向，Column為垂直方向
crossAxisAlignment 交叉軸對齊方式：與佈局垂直方向的對齊方式，Row為垂直方向，Column為水平方向

Row

Row主軸對齊方向

Row控制元件的主軸mainAxisAlignment對齊方式預設值是MainAxisAlignment.start

Row(
   mainAxisAlignment: MainAxisAlignment.start,
   children: [
     Container(
       width: 100,
       height: 50,
       color: Colors.red,
     ),
     Container(
       width: 100,
       height: 50,
       color: Colors.yellow,
     ),
     Container(
       width: 100,
       height: 50,
       color: Colors.green,
     )
   ],
)
複製程式碼

Row交叉軸對齊方向

Row控制元件的交叉軸crossAxisAlignment對齊方式預設值是CrossAxisAlignment.center

 Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
          width: 100,
          height: 30,
          color: Colors.red,
        ),
        Container(
          width: 100,
          height: 50,
          color: Colors.yellow,
        ),
        Container(
          width: 100,
          height: 80,
          color: Colors.green,
        )
      ],
    );
複製程式碼

Row的mainAxisSize屬性

表示主軸尺寸，有 min 和 max 兩種方式預設max

Container(
     decoration: BoxDecoration(border: Border.all(color: Colors.black)),
     child: Row(
         mainAxisSize: MainAxisSize.min,
         ...
     ),
)
複製程式碼

max效果

min效果

Column

Column主軸對齊方向

Column主軸對齊方向控制元件的主軸mainAxisAlignment對齊方式預設值是MainAxisAlignment.start`

Container(
      color: Colors.blue,
      height: 400,
      width: 350,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(
             width: 100,
             height: 100,
             color: Colors.red,
          ),
          Container(
             width: 100,
             height: 100,
             color: Colors.yellow,
          ),
          Container(
             width: 100,
             height: 100,
             color: Colors.green,
          ),
        ],
    )
)
複製程式碼

Column交叉軸對齊方向

Column控制元件的交叉軸crossAxisAlignment對齊方式預設值是CrossAxisAlignment.center

Container(
      color: Colors.blue,
      height: 400,
      width: 350,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
             width: 100,
             height: 100,
             color: Colors.red,
          ),
          Container(
             width: 100,
             height: 100,
             color: Colors.yellow,
          ),
          Container(
             width: 100,
             height: 100,
             color: Colors.green,
          ),
        ],
    )
)
複製程式碼

Column的mainAxisSize屬性