[Flutter] Column 跟 Row 兩種不同方向的擺放元件的版面模式介紹

Last Updated on 2021-05-17 by Clay

在 Flutter 當中有各式各樣版面的設計，比如說經典的 Container、Center、Column、Row ...... 等等的面板。由於最近研究了怎麼將多個元件擬合在一起進行擺放，故今天首先來紀錄如何使用 Column 以及 Row。

Column 顧名思義便是讓元件擺放成『垂直』的模樣。

Row 顧名思義便是讓元件擺放成『橫列』的模樣。

以下藉由簡單的程式碼來進行示範。

Container

在開始進行 Column 以及 Row 的介紹之前，我想先簡單講解 Container。

Container 是一個我們可以自由調整尺寸、與元件位置關係的元件。（我知道這很難懂，也許之後我會開一篇完整的介紹）

import 'package:flutter/material.dart';


void main() => runApp(MyApp());


class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey,
    );
  }
}

Output:

以上是一個最簡易的程式碼：我們使用 Container 元件繪製整個手機的 Widget，並將顏色調整為『灰色』。

為什麼要先簡單解釋 Container 呢？

這是因為，以下的範例會使用 Container 來當作我們『擺設的元件』。

Column

首先，先從 Column 這個擺放方式開始吧！

Column 就像剛才解釋的一般，是將元件垂直排列的。在這裡，我們使用四個不同顏色的 Container 來顯示排列方法。

import 'package:flutter/material.dart';


void main() => runApp(MyApp());


class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Color'),
        ),
        body: _MyApp(),
      ),
    );
  }
}


class _MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          width: 50,
          height: 50,
          color: Colors.red,
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.blue,
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.yellow,
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.green,
        ),
        Container(
          width: 10000,
          height: 10,
          color: Colors.black,
        )
      ],
    );
  }
}

Output:

由於我們沒有設定，故元件會從最上面開始擺放，分別為紅、藍、黃、綠四種顏色的 Container。當然，我在下面加了一層黑色的 Container 當作底線，這可以讓我們等下示範 crossAxisAlignment 時比較容易。

這裡可以事先紀錄一下：

mainAxisAlignment 為 Column 的『縱軸』，有以下幾種參數：

• start: 將 children 放置在縱軸的開端
• center: 將 children 放置在縱軸的中心
• end: 將 children 放置在縱軸的末端
• spaceAround: 將縱軸上 children 之間的距離相等，但首尾距離只有 1/2
• spaceEvenly: 將縱軸上 children 之間的距離相等，首尾距離亦同
• spaceBetween: 將縱軸上 children 之間的距離相等， children 緊貼邊緣

使用方法如下，以下皆依此類推：

Column(
    mainAxisAlignment: MainAxisAligment.start,
    children: <Widget>["Our Containers"],
);

Output:

• center: 將 children 放置在縱軸的中心

以下依此類推。

當然，我們也可以調整 crossAxisAlignment （Column 上的橫軸）—— 這裡要注意的是，橫軸會以最長長度的元件當標準，也就是說，如果所有元件都是同樣大小的話，我們會看不出差別，這也是為什麼我們會需要一個黑色的 Container 當作底部元件。

有著以下參數：

• start: 將元件放置於橫軸的開頭（最左邊）
• center: 將元件放置於橫軸的中間
• end: 將元件放置於橫軸的尾端 （最右邊）
• stretch: 將元件拉伸為跟底部長度一樣

Column(
    mainAxisAlignment: MainAxisAligment.center,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>["Our Containers"],
);

Output:

同樣依此類推，大家可以試試看不同的組合。

Row

說完了 Column，其實 Row 就不用多提了，基本上跟 Column 一模一樣，只是主要的軸改成橫軸。

我們甚至連程式碼都不太需要改，直接將 Column 改成 Row 即可。當然，最後一個黑色的 Container 也需要將方向改過來，這次改成只有 height 非常高。

跟剛才一樣，大家可以隨意試試，找到自己覺得最佳的擺放位置。