16.Flutter 零基础入门（十六）：Widget 基础概念与第一个 Flutter 页面

Flutter 零基础入门（十六）：Widget 基础概念与第一个 Flutter 页面

在前面的十五篇中，我们一直在学习 Dart 语言与面向对象思想：

• Class、abstract、enum
• 继承、多态、封装
• 状态、规则、结构设计

从这一篇开始，我们正式进入 Flutter。

👉 Flutter 和之前所有内容的连接点只有一个：Widget

---

一、Flutter 是什么？

官方定义：

Flutter 是一个 使用 Dart 构建跨平台 UI 的框架

但更准确的一句话是：

Flutter = 用 Dart 写 UI

---

二、什么是 Widget？

Flutter 中有一句非常著名的话：

Everything is a Widget（万物皆 Widget）

意思是：

• 页面是 Widget
• 文本是 Widget
• 按钮是 Widget
• 布局是 Widget
• 空白也是 Widget

📌 Flutter 没有"页面对象"，只有 Widget 树

---

三、Widget 的本质

从 Dart 角度看：

Widget 是一个类

从 Flutter 角度看：

Widget 是 UI 的描述

👉 Widget 不是控件本身，而是：

"我希望界面长什么样"

---

四、最简单的 Flutter 程序结构

一个 Flutter App 的入口仍然是 main：

void main() {
  runApp(MyApp());
}

这里：

• runApp 是 Flutter 提供的方法
• MyApp 是一个 Widget

---

五、你的第一个 Widget

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello Flutter');
  }
}

拆解理解：

• MyApp 是一个 Widget
• 继承自 StatelessWidget
• 必须实现 build 方法

---

六、StatelessWidget 是什么？

StatelessWidget 表示：

没有状态变化的 Widget

特点：

• 一旦创建，内容不变
• 适合展示静态 UI

例如：

• 文本
• 图标
• 固定布局

---

七、build 方法是干什么的？

Widget build(BuildContext context)

含义是：

告诉 Flutter：这个 Widget 长什么样

你在 build 中：

• 组合其他 Widget
• 返回一个 Widget 树

📌 build 方法可能会被多次调用

👉 必须是"纯描述"，不能写业务逻辑

---

八、Widget 是如何组合的？

Flutter UI 的核心思想是：

Widget 套 Widget

例如：

Center(
  child: Text('Hello Flutter'),
)

意思是：

• 用 Center 包住 Text
• Text 是 Center 的 child

---

九、最基础的页面结构：MaterialApp

真实 Flutter App 一般长这样：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello Flutter'),
        ),
      ),
    );
  }
}

---

十、认识几个核心 Widget

1️⃣ MaterialApp

• 应用入口
• 提供主题、路由、导航能力

---

2️⃣ Scaffold

• 页面骨架
• 提供：
  • AppBar
  • body
  • FloatingActionButton

---

3️⃣ Text

Text('Hello Flutter')

用于显示文本。

---

4️⃣ Center

Center(
  child: Text('Hello'),
)

用于居中子 Widget。

---

十一、Widget 树的直观理解

你刚才的代码，本质是：

MyApp
 └─ MaterialApp
     └─ Scaffold
         └─ Center
             └─ Text

📌 Flutter 渲染 UI，就是遍历这棵树。

---

十二、为什么 Flutter UI 不用 XML？

在 Android 中：

• XML 描述 UI
• Java/Kotlin 控制逻辑

Flutter：

UI = Dart 代码

好处：

• 逻辑与 UI 高度统一
• 可组合
• 可复用
• 可抽象

你前面学的 Dart 抽象类，现在终于派上用场了。

---

十三、新手最重要的理解点

不要把 Widget 理解为：

❌ "控件对象"

而是：

✅ 配置 + 描述

Widget 本身是不可变的：

• UI 改变 = 创建新 Widget
• Flutter 负责高效更新

---

十四、这一篇你真正学到了什么？

你已经完成了：

• 从 Dart → Flutter 的正式跨越
• 理解 Widget 是什么
• 写出第一个 Flutter 页面
• 看懂基础 Widget 组合

这是Flutter 学习的真正起点。

---

十五、总结

本篇你掌握了：

• Widget 的概念
• StatelessWidget
• build 方法
• Flutter 页面基本结构

---

🔜 下一篇预告

《Flutter 零基础入门（十七）：StatelessWidget 与 State 的第一次分离》

下一篇我们将学习：

• 为什么 UI 会变化
• 什么是 State
• StatelessWidget 的边界
• StatefulWidget 的出现背景

从下一篇开始：

你将真正进入"状态驱动 UI"的 Flutter 核心思想