Skip to content

[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 非常高。

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

Tags:

Leave a Reply