Flutter-最簡單的 Column 使用範例

背景知識

有使用到 Container 與 Center 可參考Flutter-最簡單的 Container 使用範例、Flutter-最簡單的 Center 使用範例

官方說明頁面

本文 source code

介紹內容

使用方法

Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround, //上下的對齊方式
        mainAxisSize: MainAxisSize.max, //外在約束條件下，剩餘空間的使用方式
        crossAxisAlignment: CrossAxisAlignment.center, //左右兩邊的對齊方式
        children: [],
      ),
    )

使用範例

在 children 中加入紅、黃、綠，三個顏色的 Container，並

於上層放入黑色的 Container

Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround, //上下的對齊方式
        mainAxisSize: MainAxisSize.max, //外在約束條件下，剩餘空間的使用方式
        crossAxisAlignment: CrossAxisAlignment.center, //左右兩邊的對齊方式
        children: [
          Container(
            padding: const EdgeInsets.all(0.0),
            color: Colors.red,
            width: 80.0,
            height: 80.0,
          ),
          Container(
            padding: const EdgeInsets.all(0.0),
            color: Colors.yellow,
            width: 80.0,
            height: 80.0,
          ),
          Container(
            padding: const EdgeInsets.all(0.0),
            color: Colors.green,
            width: 80.0,
            height: 80.0,
          ),
        ],
      ),
    )

mainAxisAlignment 參數測試

.center	.start	.end

.spaceEvenly	.spaceAround	.spaceBetween

CrossAxisAlignment 參數測試

.center	.start	.end	.stretch

mainAxisSize 參數測試

為了使 mainAxisSize 參數生效，我們在外層的 Container 外層再加入一個 Center 約束

Center(
      child: Container(
        color: Colors.black,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly, //上下的對齊方式
          mainAxisSize: MainAxisSize.max, //外在約束條件下，剩餘空間的使用方式
          crossAxisAlignment: CrossAxisAlignment.stretch, //左右兩邊的對齊方式
          children: [
            Container(
              padding: const EdgeInsets.all(0.0),
              color: Colors.red,
              width: 80.0,
              height: 80.0,
            ),
            Container(
              padding: const EdgeInsets.all(0.0),
              color: Colors.yellow,
              width: 80.0,
              height: 80.0,
            ),
            Container(
              padding: const EdgeInsets.all(0.0),
              color: Colors.green,
              width: 80.0,
              height: 80.0,
            ),
          ],
        ),
      ),
    );

使用MainAxisSize.min