第3章：Widget體系與布局原理

在前面兩章中，我們已經搭建好了Flutter開發環境，并且了解了Dart語言的基礎知識。現在是時候深入Flutter的核心——Widget體系了。如果說Dart是Flutter的語言基礎，那么Widget就是Flutter的靈魂。理解Widget體系，是掌握Flutter開發的關鍵所在。

3.1 Widget樹的構建與渲染機制

3.1.1 什么是Widget？

在Flutter中，“Everything is a Widget”（一切皆Widget）是最重要的設計理念。Widget可以理解為UI組件的描述，它描述了用戶界面的配置信息。

想象一下，如果你要搭建一座房子，Widget就像是建筑圖紙，它告訴建筑工人這個房子應該長什么樣子。但是圖紙本身并不是房子，真正的房子需要通過施工來建造。在Flutter中，真正的UI是通過渲染引擎根據Widget描述來構建的。

// 一個簡單的Widget示例
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',home: Scaffold(appBar: AppBar(title: Text('Hello Flutter'),),body: Center(child: Text('Hello World!'),),),);}
}

3.1.2 Widget樹的概念

Flutter應用的UI是由Widget組成的樹狀結構，我們稱之為Widget樹。每個Widget都可以包含子Widget，從而形成層級關系。

MaterialApp
└── Scaffold├── AppBar│   └── Text('Hello Flutter')└── Center└── Text('Hello World!')

這種樹狀結構讓UI的組織變得非常清晰和有序。父Widget負責管理子Widget的布局和渲染，子Widget則專注于自己的功能實現。

3.1.3 三棵樹的渲染機制

Flutter的渲染機制實際上涉及三棵樹：

1. Widget Tree（Widget樹）

• 由我們編寫的代碼構成
• 描述UI的配置信息
• 是不可變的（immutable）

2. Element Tree（元素樹）

• Widget的實例化對象
• 維護Widget的狀態和生命周期
• 是可變的（mutable）

3. RenderObject Tree（渲染對象樹）

• 負責實際的布局和繪制
• 進行性能優化
• 處理用戶交互

// Widget樹構建過程示例
Widget build(BuildContext context) {return Container(  // Widgetchild: Text(     // Widget'Hello',       // 數據),);
}
// 這個Widget樹會被轉換為Element樹，再轉換為RenderObject樹進行渲染

3.1.4 Widget的不可變性

Widget是不可變的，這意味著一旦創建，它的屬性就不能被修改。如果需要改變UI，Flutter會創建新的Widget樹。

// 錯誤的做法 - Widget屬性不能修改
Text myText = Text('Hello');
myText.data = 'World'; // 編譯錯誤！// 正確的做法 - 創建新的Widget
Text myText = Text('Hello');
myText = Text('World'); // 創建新的Widget實例

這種設計看似低效，但實際上Flutter通過智能的diff算法，只更新發生變化的部分，保證了高性能。

3.2 StatelessWidget與StatefulWidget詳解

3.2.1 StatelessWidget：無狀態Widget

StatelessWidget是無狀態的Widget，它的外觀完全由構造函數傳入的參數決定。一旦創建，就不會改變。

class WelcomeWidget extends StatelessWidget {final String name;final int age;const WelcomeWidget({Key? key,required this.name,required this.age,}) : super(key: key);@overrideWidget build(BuildContext context) {return Card(child: Padding(padding: const EdgeInsets.all(16.0),child: Column(children: [Text('歡迎 $name！',style: TextStyle(fontSize: 24,fontWeight: FontWeight.bold,),),SizedBox(height: 8),Text('年齡：$age歲'),],),),);}
}// 使用示例
WelcomeWidget(name: '張三', age: 25)

StatelessWidget的特點：

• 構造函數參數確定后，UI就不會變化
• 性能較好，因為不需要維護狀態
• 適合展示靜態內容

3.2.2 StatefulWidget：有狀態Widget

StatefulWidget可以維護狀態，當狀態改變時，UI會自動重新構建。

class CounterWidget extends StatefulWidget {@override_CounterWidgetState createState() => _CounterWidgetState();
}class _CounterWidgetState extends State<CounterWidget> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}void _decrementCounter() {setState(() {_counter--;});}@overrideWidget build(BuildContext context) {return Card(child: Padding(padding: const EdgeInsets.all(16.0),child: Column(children: [Text('計數器',style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),),SizedBox(height: 16),Text('$_counter',style: TextStyle(fontSize: 48, color: Colors.blue),),SizedBox(height: 16),Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [ElevatedButton(onPressed: _decrementCounter,child: Text('-'),),ElevatedButton(onPressed: _incrementCounter,child: Text('+'),),],),],),),);}
}

StatefulWidget的特點：

• 擁有可變的狀態
• 通過setState()方法觸發UI重建
• 適合需要用戶交互或動態內容的場景

3.2.3 何時使用StatelessWidget vs StatefulWidget

使用StatelessWidget的場景：

• 顯示靜態文本、圖片
• 展示通過構造函數傳入的數據
• 作為其他Widget的容器

使用StatefulWidget的場景：

• 需要響應用戶輸入（按鈕點擊、文本輸入）
• 需要動畫效果
• 需要從網絡或數據庫獲取數據
• 內容會隨時間變化

3.3 布局Widget：Row、Column、Stack、Positioned

布局Widget負責安排子Widget的位置和大小。掌握布局Widget是創建復雜UI的基礎。

3.3.1 Row：水平布局

Row將子Widget水平排列，類似于CSS中的flex-direction: row。

class RowExampleWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {return Container(padding: EdgeInsets.all(16),child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 主軸對齊crossAxisAlignment: CrossAxisAlignment.center,     // 交叉軸對齊children: [Container(width: 50,height: 50,color: Colors.red,child: Center(child: Text('1')),),Container(width: 50,height: 80,color: Colors.green,child: Center(child: Text('2')),),Container(width: 50,height: 30,color: Colors.blue,child: Center(child: Text('3')),),],),);}
}

Row的關鍵屬性：

• mainAxisAlignment：主軸（水平方向）對齊方式
  • MainAxisAlignment.start：左對齊
  • MainAxisAlignment.center：居中
  • MainAxisAlignment.end：右對齊
  • MainAxisAlignment.spaceEvenly：平均分布
  • MainAxisAlignment.spaceBetween：兩端對齊
• crossAxisAlignment：交叉軸（垂直方向）對齊方式

3.3.2 Column：垂直布局

Column將子Widget垂直排列，類似于CSS中的flex-direction: column。

class ColumnExampleWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {return Container(padding: EdgeInsets.all(16),child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.stretch, // 拉伸填滿寬度children: [Container(height: 50,color: Colors.red,child: Center(child: Text('頂部')),),SizedBox(height: 16), // 間距Container(height: 100,color: Colors.green,child: Center(child: Text('中間')),),SizedBox(height: 16),Container(height: 50,color: Colors.blue,child: Center(child: Text('底部')),),],),);}
}

3.3.3 Flex：靈活布局

Row和Column實際上都是Flex的特殊形式。使用Flex可以創建更靈活的布局。

class FlexExampleWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {return Column(children: [// 使用Expanded控制子Widget占用空間Expanded(flex: 1, // 占用1份空間child: Container(color: Colors.red),),Expanded(flex: 2, // 占用2份空間child: Container(color: Colors.green),),Expanded(flex: 1, // 占用1份空間child: Container(color: Colors.blue),),],);}
}

3.3.4 Stack：層疊布局

Stack允許子Widget重疊放置，類似于CSS中的position: absolute。

class StackExampleWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {return Container(width: 200,height: 200,child: Stack(children: [// 背景Container(width: 200,height: 200,color: Colors.grey[300],),// 左上角的紅色方塊Positioned(top: 20,left: 20,child: Container(width: 50,height: 50,color: Colors.red,),),// 右下角的藍色圓圈Positioned(bottom: 20,right