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 非常高。
跟剛才一樣,大家可以隨意試試,找到自己覺得最佳的擺放位置。