iT邦幫忙

2024 iThome 鐵人賽

DAY 4
0
Mobile Development

畢業專題拯救計畫系列 第 4

Flutter中的櫃子--layout基本概念1

  • 分享至 

  • xImage
  •  

介紹完了widget,今天我要要來談談Flutter 的layout。

  • 什麼是layout?

layout 指的是如何排列、對齊和調整 widget 的大小,讓整個畫面看起來更舒服。這包含如何在螢幕上排列 widget,如何處理不同的螢幕尺寸和方向,以及如何在多個 widget 之間分配空間等等。

layout Widget 的基本介紹

Row 和 Column

這兩個在第2天時就有提過,他們是最常見也是最基本的 layout 基礎。

  • Row:將 widget 水平排列(從左到右)。
  • Column:將 widget 垂直排列(從上到下)。
Column(
  children: [
    Text('第一行文字'),
    Text('第二行文字'),
    Text('第三行文字'),
  ],
)

而在 Row 和 Column 裡,要控制裡面 widget 的對齊方式可以使用 MainAxisAlignment 和 CrossAxisAlignment

  • MainAxisAlignment:沿著主軸對齊。
  • CrossAxisAlignment:沿著交叉軸對齊。

講到這裡我們要先來介紹一點觀念:

  • 主軸(Main Axis):

對於 Row,主軸是水平方向(從左到右)。
對於 Column,主軸是垂直方向(從上到下)。

  • 交叉軸(Cross Axis):

對於 Row,交叉軸是垂直方向。
對於 Column,交叉軸是水平方向。

這使得 MainAxisAlignment 和 CrossAxisAlignment在 Row 和 Column 裡面呈現出來的效果是完全不同的。也可以理解為

  • Row 裡的 MainAxisAlignment ≈ Column 裡的 CrossAxisAlignment(都是水平方向)。
  • Row 裡的 CrossAxisAlignment ≈ Column 裡的 MainAxisAlignment(都是垂直方向)。

而 MainAxisAlignment 和 CrossAxisAlignment 有很多種用法:

  • MainAxisAlignment.start:將子 widget 沿著主軸的起點對齊(Row 的左側或 Column 的上側)。
    https://ithelp.ithome.com.tw/upload/images/20240813/20163322ntuT3CnUwr.png

  • MainAxisAlignment.end:將子 widget 沿著主軸的終點對齊(Row 的右側或 Column 的下側)。
    https://ithelp.ithome.com.tw/upload/images/20240813/20163322QkzG6L1cnY.png

  • MainAxisAlignment.center:將子 widget 沿著主軸居中對齊。
    https://ithelp.ithome.com.tw/upload/images/20240813/20163322f4uPy7kMQi.png

  • MainAxisAlignment.spaceBetween:子 widget 之間的間距平均分佈,頭尾的 widget 緊靠父容器的邊緣。
    https://ithelp.ithome.com.tw/upload/images/20240813/201633227GsOZ5zMwA.png

  • MainAxisAlignment.spaceAround:子 widget 之間的間距和頭尾的間距均勻分佈,但頭尾的間距只有內部間距的一半。
    https://ithelp.ithome.com.tw/upload/images/20240813/20163322LNSECc1GMa.png

  • MainAxisAlignment.spaceEvenly:子 widget 之間和頭尾的間距完全相等。
    https://ithelp.ithome.com.tw/upload/images/20240813/20163322AviVkTzQ0u.png

  • CrossAxisAlignment.start:將子 widget 沿著交叉軸的起點對齊(Row 的上側或 Column 的左側)。

  • CrossAxisAlignment.end:將子 widget 沿著交叉軸的終點對齊(Row 的下側或 Column 的右側)。

  • CrossAxisAlignment.center:將子 widget 沿著交叉軸的中間對齊。

以上是一些layout的基本例子,我們明天見~


上一篇
Flutter中的小小積木--widget 基本概念2
下一篇
Flutter中的櫃子--layout基本概念2
系列文
畢業專題拯救計畫7
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言