Row 與 Column

Row 與 Column 的父類是 Flex，代表著一維陣列的方式來排列元件，以使用 Flex 名稱的原因在於，它與 CSS3 的 Flexbox 盒模型類似，具有 main axis 與 cross axis 特性，在官方網站〈Layout in Flutter〉中有張圖示，表示了 Row、Column 的 main axis 與 cross axis：

元件會沿著 main axis 的方向依序排列，對於 Row 來說，main axis 是水平由左至右，Column 則是垂直由上至下，如果知道事先知道 main axis，通常就直接使用 Row 或 Column，而它們會儘量取得最大空間給 main axis 使用。

無論是 Row 或 Column，元件對齊預設是靠 main axis 起點，corss axis 罝中；若是 Column，就是預設垂直靠上、水平置中，例如：

import 'package:flutter/material.dart';

void main() => runApp(
  Column(
    children: [
      Container(
        color: Colors.blue,
        width:100,
        height: 100,
      ),
      Container(
        color: Colors.yellow,
        width:100,
        height: 100,
      ),
    ],
  )
);

執行畫面會是：

對於 Column，若想垂直置中，可以改為：

import 'package:flutter/material.dart';

void main() => runApp(
  Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        color: Colors.blue,
        width:100,
        height: 100,
      ),
      Container(
        color: Colors.yellow,
        width:100,
        height: 100,
      ),
    ],
  )
);

執行畫面會如下：

至於 Row，使用上類似，只不過至少得設 textDirection 特性，因為元件對齊預設是靠 main axis 起點，corss axis 罝中，對於 Row，就是水平靠左對齊、垂直置中，例如：

import 'package:flutter/material.dart';

void main() => runApp(
  Row(
    textDirection: TextDirection.ltr,
    children: [
      Container(
        color: Colors.blue,
        width:100,
        height: 100,
      ),
      Container(
        color: Colors.yellow,
        width:100,
        height: 100,
      ),
    ],
)
);

執行結果如下：

如果要水平置中的話，就是將 mainAxisAlignment 設為 MainAxisAlignment.center：

import 'package:flutter/material.dart';

void main() => runApp(
  Row(
    textDirection: TextDirection.ltr,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        color: Colors.blue,
        width:100,
        height: 100,
      ),
      Container(
        color: Colors.yellow,
        width:100,
        height: 100,
      ),
    ],
  )
);

執行結果如下：

Row 與 Column 可以構成巢狀，形成更豐富的版面結構。例如在 Column 中裝兩個 Row，每個 Row 的元件個數各不相同：

import 'package:flutter/material.dart';

void main() => runApp(
  Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Row(
        textDirection: TextDirection.ltr,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            color: Colors.blue,
            width:100,
            height: 100,
          ),
          Container(
            color: Colors.yellow,
            width:100,
            height: 100,
          ),
        ],
      ),
      Row(
        textDirection: TextDirection.ltr,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            color: Colors.deepOrange,
            width:100,
            height: 100,
          ),
          Container(
            color: Colors.cyan,
            width:100,
            height: 100,
          ),
          Container(
            color: Colors.green,
            width:100,
            height: 100,
          ),
        ],
      ),
    ],
  )
);

執行結果如下：