Flutter 中的 widgets 是什么？

Question

Accepted Answer

在 Flutter 中，**一切皆 widget** — UI 元素（按钮、文本、图片）、布局结构（行、列、内边距）甚至应用本身都是 widgets。Widgets 是不可变的构建块，它们组合在一起形成整个用户界面。

## 一切皆 widget

```text
Widgets describe the UI. EVERYTHING is a widget:
  → visible elements: Text, Image, Icon, Button, etc.
  → layout: Row, Column, Container, Padding, Center, Stack, etc.
  → structure: Scaffold (page structure), AppBar, etc.
  → even the app itself (MaterialApp) and abstract things (Padding, Theme)
→ You build UI by COMPOSING widgets into a tree (widgets contain other widgets).
```

## 将 widgets 组合成树

```dart
// build a UI by NESTING widgets (composition)
Scaffold(                       // page structure
  appBar: AppBar(title: Text('Home')),   // app bar with text
  body: Center(                 // centers its child
    child: Column(              // vertical layout
      children: [
        Text('Hello'),          // text widget
        ElevatedButton(         // a button
          onPressed: () {},
          child: Text('Click'),
        ),
      ],
    ),
  ),
)
// → a WIDGET TREE: Scaffold > Center > Column > [Text, Button]
```

Widgets 嵌套形成一个 **widget 树** — 组合是核心模式（将简单的 widgets 组合成复杂的 UI）。

## Widgets 是不可变的；配置

```text
→ Widgets are IMMUTABLE descriptions of the UI (configuration, not the actual rendered
  objects) — Flutter rebuilds them efficiently when state changes
→ build() methods return widget trees describing what the UI should look like
→ Flutter handles efficiently turning widgets into rendered pixels
```

## 为什么这很重要

理解 widgets 对 Flutter 来说是基础，因为 **Flutter 中的一切都是 widget** — 整个 UI 都由它们构建而成 — 因此掌握 widget 模型是任何 Flutter 开发的必要、基础知识。

核心概念 — 可见元素（文本、按钮、图片）、布局结构（行、列、内边距）、页面结构甚至应用本身都是 **widgets** — 这是 Flutter 工作方式的定义特性，理解它是构建任何 Flutter UI 的起点。

UI 是通过 **将 widgets 组合成树** 来构建的（嵌套 widgets，将简单的组合成复杂的界面）这一点的理解是 Flutter 开发的基本模式 — 组合优于继承，从简单的、可重用的构建块构建复杂的 UI。

理解 **widgets 是 UI 的不可变描述**（配置而非实际渲染的对象，当状态改变时 Flutter 会高效地重新构建它们）对于理解 Flutter 的声明式 UI 模型很重要 — 你描述 UI 应该是什么样子，Flutter 负责高效地处理渲染。

这个 widget 和组合模型贯穿 Flutter 的一切：布局、样式、状态管理和结构都通过 widgets 工作。

Since widget 是 Flutter 的原子单位（一切都是 widget，UI 是通过组合构建的 widget 树），而理解这个模型是构建 Flutter UI 的绝对基础，因此理解 widgets — 即一切都是 widget、组合成树以及它们的不可变声明式特性 — 是必要的、基础的 Flutter 知识，是 Flutter 开发的核心概念，也是学习 Flutter 时首先要理解的东西。