認真對待每時、每刻每一件事，把握當下、立即去做。
在 Flutter 中，佈局確實完全通過組件（Widget）來實現，這與許多其他 UI 框架的設計理念不同。以下是 Flutter 佈局系統的詳細解析。
1. 佈局組件的核心思想
- 一切都是 Widget：無論是可見的按鈕、文本，還是不可見的佈局容器（如 Row、Column），均為 Widget。
- 組合嵌套：通過父子組件的嵌套關係定義佈局結構，例如將多個按鈕包裹在
Row中實現水平排列。 - 響應式設計：佈局組件自動根據父級約束和屏幕尺寸調整子組件的位置與大小。
2. 佈局組件的工作原理
佈局流程（約束傳遞）：
-
父級約束傳遞：父組件向子組件傳遞佈局約束（如最大/最小寬高）。
-
子級佈局：子組件根據約束決定自身大小，例如：
Container：若未指定尺寸，則儘量填充父級允許的最大空間。Text：根據內容自動計算所需尺寸。
-
位置確定：父組件根據排列規則（如 Row 的主軸對齊）定位子組件。
3. 常見佈局組件及用途
3.1 約束類容器
| 組件 | 作用 | 示例代碼 |
|---|---|---|
BoxConstraints |
描述約束信息 | 在佈局過程中父級傳遞給子級的約束信息由 BoxConstraints 描述（最大、小寬高） |
ConstrainedBox |
約束組件 | 用於對子組件添加額外的約束 |
UnconstrainedBox |
嘗試移除父級約束 | 允許子控件在佈局階段忽略父級約束，但最終自身尺寸仍受父級約束限制。 |
特別解析1:
誤以為 UnconstrainedBox 能完全突破父級約束：UnconstrainedBox 僅允許子控件在佈局時忽略父級約束，但其 UnconstrainedBox 自身仍受父級約束限制。最終會將子組件的尺寸裁剪或壓縮至父級允許範圍內。
誤以為溢出會被自動處理：若子控件尺寸超過 UnconstrainedBox 自身的約束，Flutter 默認會裁剪而非報錯，但開發者模式下可能看到溢出警告。
若需要子控件完全突破父級約束，使用 OverflowBox 替代 UnconstrainedBox。
3.2 佈局容器/方式
| 方式 | 組件 | 作用 | 示例代碼 |
|---|---|---|---|
| 基礎容器佈局 | Container |
通用容器，可設置尺寸、邊距、背景色等 | Container(width: 100, height: 50, color: Colors.blue) |
| 線性佈局 | Row / Column |
水平/垂直排列子組件（類似Android的 LinearLayout） | Row(children: [Text("A"), Text("B")]) |
| 彈性佈局 | Flex |
彈性佈局允許子組件按照一定比例來分配父容器空間 | Flutter 中的彈性佈局主要通過Flex和Expanded來配合實現 |
| 彈性擴伸 | Expanded |
Expanded 只能作為 Flex 的孩子（否則會報錯），它可以按比例“擴伸”Flex子組件所佔用的空間、在Row/Column中佔據剩餘空間 |
Row(children: [Expanded(child: Text("佔滿寬度")), Icon(...)]) |
| 流式佈局 | Wrap / Flow |
Row 默認只有一行，如果超出屏幕不會折行。我們把超出屏幕顯示範圍會自動折行的佈局稱為流式佈局 | |
| 層疊佈局 | Stack |
層疊佈局和 Web 中的絕對定位、Android 中的 Frame 佈局是相似的，子組件可以根據距父容器四個角的位置來確定自身的位置。 | Stack(children: [Image(...), Positioned(child: Icon(...), bottom: 0)]) |
| 可滾動列表 | ListView |
可滾動的列表佈局 | ListView(children: [ListTile(...), ListTile(...)]) |
3.3 調整子組件大小
| 組件 | 作用 | 説明 |
|---|---|---|
SizedBox |
固定尺寸的空白區域或強制子組件尺寸，實際上SizedBox只是ConstrainedBox的一個定製 |
本質也是約束類容器 |
ConstrainedBox |
設置尺寸約束 |
3.4 調整子組件位置
| 組件 | 作用 |
|---|---|
Center |
子組件居中 |
Align |
按指定對齊方式（如右上角）定位子組件 |
Stack |
層疊佈局和 Web 中的絕對定位、Android 中的 Frame 佈局是相似的，子組件可以根據距父容器四個角的位置來確定自身的位置。 |
特別解析2:
Align和Stack/Positioned 都可以用於指定子元素相對於父元素的偏移，但它們還是有兩個主要區別：
- 定位參考系統不同；
Stack/Positioned定位的參考系可以是父容器矩形的四個頂點；而Align則需要先通過alignment參數來確定座標原點，不同的alignment會對應不同原點，最終的偏移是需要通過alignment的轉換公式來計算出。 Stack可以有多個子元素，並且子元素可以堆疊，而Align只能有一個子元素，不存在堆疊。
4. 實際佈局示例
4.1 垂直居中按鈕
Center(
child: Container(
width: 200,
height: 50,
child: ElevatedButton(
onPressed: () {},
child: Text("點擊我"),
),
),
)
- 結構：
Center→Container→ElevatedButton - 效果：按鈕在屏幕中央，寬 200、高 50。
4.2 複雜響應式佈局
Column(
children: [
Expanded( // 佔據剩餘空間的70%
flex: 7,
child: Image.network("https://example.com/header.jpg"),
),
Padding(
padding: EdgeInsets.all(16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("標題"),
Icon(Icons.settings),
],
),
),
],
)
- 結構：
Column包含一個Expanded圖片區域和一個帶邊距的Row標題欄。 - 效果：圖片佔70%高度，標題欄左右分佈。
5. 調試佈局問題
- Debug Paint：在代碼中啓用
debugPaintSizeEnabled = true，顯示佈局邊框。 - LayoutBuilder：LayoutBuilder 是一個可以訪問父組件約束並基於這些約束構建子組件的組件。它允許開發者在構建時動態地獲取父組件的佈局信息，從而更好地控制子組件的佈局。
- Flutter Inspector：通過 IDE 插件查看 Widget 樹和佈局約束。
- 錯誤提示：Flutter 引擎會直接指出溢出（如"RenderBox overflowed"）等常見問題。
6. 最佳實踐
Flutter 通過組件化佈局實現了高度的靈活性和一致性。掌握 Row、Column、Expanded 等核心組件的用法，結合約束傳遞機制，能夠高效構建複雜且響應式的界面，以下是一些好的實踐：
- 優先使用內置佈局組件：避免自定義複雜佈局邏輯。
- 合理拆分組件：將重複佈局封裝為自定義 Widget。
- 利用
LayoutBuilder：在需要動態響應父級約束時使用。
》優秀博客：https://www.cnblogs.com/98kk/p/18626430
