Flutter框架 Widget 简介

封面图 • 2025-10-24 • Flutter

Flutter 是一个由 Google 开发的开源 UI 软件开发工具包（SDK），用于构建跨平台的应用程序（支持 iOS、Android、Web、桌面等）。在 Flutter 中，**Widget** 是构建用户界面的基本单元。理解 Widget 的概念是掌握 Flutter 的关键。

---

## 🧩 一、什么是 Widget？

在 Flutter 中，**Widget** 是一个抽象类，表示用户界面中的一部分。它描述了如何绘制一个组件，并且可以响应用户交互、状态变化等。

> ✅ **注意：** 在 Flutter 中，所有的 UI 元素都是 Widget，包括按钮、文本、布局、动画等。

---

## 📌 二、Widget 的分类

Flutter 中的 Widget 可以分为以下几类：

### 1. **StatelessWidget（无状态 Widget）**
- 不包含任何可变状态。
- 一旦创建，其属性不能改变。
- 适用于静态内容，比如图标、文本、图片等。

```dart
class MyText extends StatelessWidget {
  final String text;

const MyText({super.key, required this.text});

@override
  Widget build(BuildContext context) {
    return Text(text);
  }
}
```

### 2. **StatefulWidget（有状态 Widget）**
- 包含可变状态，可以通过 `setState()` 方法更新 UI。
- 适用于动态内容，比如计数器、表单输入、动画等。

```dart
class Counter extends StatefulWidget {
  const Counter({super.key});

@override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;

void increment() {
    setState(() {
      count++;
    });
  }

@override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(onPressed: increment, child: Text('Increment')),
      ],
    );
  }
}
```

### 3. **Layout Widgets（布局 Widget）**
- 用于组织其他 Widget 的布局结构。
- 常见的布局 Widget 有：
  - `Row`：水平排列子 Widget
  - `Column`：垂直排列子 Widget
  - `Container`：设置边距、填充、背景等
  - `Padding`：添加内边距
  - `Center`：居中对齐
  - `Align`：对齐方式控制
  - `SizedBox`：固定大小的 Widget
  - `Flex` / `Expanded` / `Flexible`：弹性布局

```dart
Container(
  padding: EdgeInsets.all(16),
  color: Colors.blue,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text('Hello'),
      Icon(Icons.star),
    ],
  ),
)
```

### 4. **Material Widgets（Material Design 组件）**
- 提供符合 Material Design 规范的 UI 组件。
- 如：`ElevatedButton`, `TextField`, `AppBar`, `SnackBar`, `Dialog` 等。

```dart
ElevatedButton(
  onPressed: () {},
  child: Text('Click Me'),
)
```

### 5. **Cupertino Widgets（iOS 风格组件）**
- 为 iOS 设备提供类似原生的 UI 组件。
- 如：`CupertinoButton`, `CupertinoNavigationBar`, `CupertinoTabBar` 等。

```dart
CupertinoButton(
  onPressed: () {},
  child: Text('iOS Button'),
)
```

### 6. **Other Widgets（其他类型）**
- `Navigator` 和 `Route`：用于页面跳转和导航
- `Provider` / `Riverpod` / `Bloc`：状态管理相关 Widget
- `Animation` 相关 Widget：如 `AnimatedContainer`, `FadeTransition`, `SlideTransition`
- `InheritedWidget`：用于跨层级传递数据

---

## 🔄 三、Widget 的生命周期

在 `StatefulWidget` 中，`State` 类有以下生命周期方法：

| 方法 | 描述 |
|------|------|
| `initState()` | 在 Widget 第一次被创建时调用，适合初始化数据 |
| `build()` | 构建 UI，每次状态变化都会调用 |
| `didUpdateWidget()` | 当 Widget 的配置发生变化时调用 |
| `deactivate()` | 当 Widget 被移除时调用 |
| `dispose()` | 在 Widget 被销毁时调用，用于释放资源 |

---

## 💡 四、Widget 的核心思想

- **一切皆 Widget**：在 Flutter 中，UI 的每一个部分都由 Widget 构成。
- **声明式 UI**：通过编写 Widget 的结构来定义 UI，而不是像传统 Android 或 iOS 开发那样使用 XML 或 Storyboard。
- **响应式编程**：当数据变化时，Widget 会自动重新构建，从而更新 UI。

---

## 🧠 五、总结

| 类型 | 特点 | 示例 |
|------|------|------|
| Stateless Widget | 不可变，静态 | Text, Image, Container |
| Stateful Widget | 可变，动态 | Counter, Form, Slider |
| Layout Widget | 控制布局 | Row, Column, Padding |
| Material Widget | Material Design 风格 | ElevatedButton, AppBar |
| Cupertino Widget | iOS 风格 | CupertinoButton, CupertinoTabBar |

---

如果你刚开始学习 Flutter，建议从 `StatelessWidget` 和 `StatefulWidget` 开始，逐步了解布局和常用组件。如果有具体问题或想了解某个 Widget 的用法，欢迎继续提问！