Flutter-最簡單的 Row 使用範例

背景知識

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

本文 source code

介紹內容

使用方法

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

使用範例

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

於上層放入黑色的 Container

Container(
      color: Colors.black,
      child: Row(
        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 約束 Container 給予黑色

Center(
      child: Container(
        color: Colors.black,
        child: Row(
          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,
            ),
          ],
        ),
      ),
    );

使用MainAxisSize.min