Flutter 畫面基礎架構

本篇文章會介紹 如何建立 Flutter 畫面 的基礎架構，我們可以依據我們畫面的性質不同，例如組件內容排列方向，需要適配的大小 及比例 等等 來決定我們要用哪些組件來建立我們的畫面基礎架構。

Scaffold

scaffold 是整個頁面的鷹架，scaffold 可以設定 appBar 及 drawer ，每個頁面都會需要 加上 scaffold，如果一個頁面沒有加上 scaffold ，文字顯示會被加上警示底線

SafeArea

我們通常會使用 SafeArea 來確保頁面內容不會跑出 App 中間顯示的範圍，我們頁面依據手機的不同，App 的整個 顯示範圍除了中間的畫面可能會包括上下可能會遮擋到的區塊，這時候我們必須利用 SafeArea將顯示範圍侷限在中間的畫面

未加 SafeArea ，頁面內容跑出 App 中間顯示的範圍

加 SafeArea ，頁面內容顯示範圍限在中間的畫面

Container

通常我們會利用 Container 包裝需要界定大小與增加修飾的組件， Container 預設會是包覆子組件，除非設定 Container 長跟寬，這時會就會是子組件會需要去適應 Container 的大小，

Container 可以設定圓角，邊線，背景等修飾，我們可以利用 Container 為組件增加修飾

Container 與 接下來要介紹的 Column 與 Row 的不同之處在於 Container 只能包覆一個 子組件， 而 Column 與 Row 可以包覆多個組件

Column

Column 可以包覆多個組件，組件彼此之間的排列方向為垂直，

如果 Column 高度是固定的話，包含 的 組件 可以利用 Expand 讓組件的寬度適應 Column 可以 填充的高度，這個可填充的高度是指 Column 的高度 扣除 未 Expand 組件的高度。

下面組件 1 , 3 Expand , 2 沒有 Expand ，2 的高度為實際高度，1 和 3 的高度平分 Column 高度- 2 的高度

下面組件 1 , 2 , 3 皆為 Expand ，3 者的高度 平分 Column 高度

Column子組件的寬度是其自身的寬度，在 Column 有限制寬度的情況下加上 CrossAlignment.stretch，則 子組件 的寬度 會適應 Column的寬度

Row

Row 可以包覆多個組件，組件彼此之間的排列 水平，

如果 Row 的寬度是固定的話，包含 的 組件 可以利用 Expand 讓組件的寬度適應 Row 可以 填充的寬度，這個可填充的高度是指 Row 的寬度 扣除 未 Expand 組件的寬度。

下面組件 1 , 3 Expand , 2 沒有 Expand ，2 的寬度為實際寬度，1 和 3 的寬度平分 Row 寬度- 2 的寬度

下面組件 1 , 2 , 3 皆為 Expand ，3 者的寬度 平分 Row 的寬度

Row 子組件的高度是其自身的高度，在 Row 有限制高度的情況下加上 CrossAlignment.stretch，則 子組件 的高度 會適應 Row的高度

Column 及 Row 使用 CrossAlignment.stretch 或是 使用 Expand ，皆需再有固定長度的情況下才能設定 ，否則會報錯。

結語

這篇文章簡單介紹了 Flutter 基本架構的常用的幾個元件，下一篇文章會利用這幾個元件帶讀者刻出畫面。