flutter 佈局

Flutter佈局

---

佈局步驟

1. 選擇用來容納組件的佈局組件，好比Center、Container、Row、Column等

   • 居中顯示 選擇 Center
   • 多個組件放在一行 選擇 Row
   • 多個組件放在一列 選擇 Column
   • 添加各類盒子樣式 選擇 Container

2. 建立用來容納可見內容的組件，好比 Text、Image、Icon 等

   • 文本 Text
   • 圖片 Image
   • 圖標 Icon

3. 將可見組件添加到佈局組件裏，經過傳遞給其餘屬性 child 或 children

   • 若是容納單個組件 例如 Center、Container， 選擇 child
   • 若是容納多個組件 例如 Row、Column， 選擇 children
4. 將佈局組件添加到頁面組件裏，通常在其 build 方法裏完成

水平和垂直佈局

• 水平和垂直佈局是常見的佈局，可分別使用 Row 和 Column 來完成，而且他們是能夠互相嵌套的
• 對於 Row 和 Column，能夠控制其主軸和交叉軸方向上 子組件的對齊方式
• 使用 Expanded 組件來控制子組件的相對大小

經常使用佈局組件

標準佈局組件

• Container 給組件添加填充、邊距、邊框、背景色等裝飾

  • 只能包含一個組件
  • 設置背景顏色或圖片

• GridView 可滾動的網格

  • 用於二維列表
  • 當內容超過渲染區域時將自動滾動
  • 若是須要知道單元所處的行和列，請使用 Table 或 DataTable

• ListView 可滾動的列表

  • 特定化的 Column，不如Column 可定製性強，但更易使用和支持滾動
  • 支持垂直或水平滾動

• Stack 重疊組件

  • 用來重疊多個組件
  • 子組件列表裏後面的重疊在前面之上
  • 裏面的內容沒法滾動
  • 超過渲染區域的內容可剪切掉

Material 佈局組件 （* 須要在 MaterialApp 下使用）

• Card 將相關的組件放到一個卡片裏，該卡片帶有圓角和陰影

  • 用來呈現一組相關的信息
  • 只接受一個子組件，但子組件能夠是 Row、Column 這樣的接受多個子組件的組件
  • 帶圓角和陰影
  • 內容不能滾動
  • 需在 MaterialApp 內使用

• ListTile 帶有標題和副標題的行，首尾能夠添加圖標

  • 特定化的 Row，包含最多三行文字，以及可選的圖標
  • 可定製性不如 Row，但更易使用
  • 需在 MaterialApp 內使用