第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 {
Widget 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( // Widget
child: 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);
Widget 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 {
_CounterWidgetState createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
void _decrementCounter() {
setState(() {
_counter--;
});
}
Widget 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 {
Widget 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 {
Widget 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 {
Widget 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 {
Widget 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