一切皆 widget：Text、Container 和 Icon

通过三个基础构建块 Text、Container 和 Icon，理解 Flutter 的核心思想：widget 树。

8 分钟 · 3 题

在 Flutter 中，一切皆 widget。widget 是界面的构建块：它是对屏幕上所显示内容中某一部分的描述。一段文本是一个 widget，一个图标是一个 widget，一处间距也是一个 widget……整个屏幕同样如此！要构建一个界面，你需要把各个 widget 像俄罗斯套娃一样层层嵌套在一起。它们共同构成了 widget 树：每个 widget 都有一个父节点（包含它的那个），有时还有若干子节点（它所包含的那些）。让我们重新看一下我们的最简程序，观察它的树。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const Scaffold(
        body: Center(
          child: Text(
            "Everything is a widget!",
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

从上到下：MaterialApp 按照 Google 的视觉语言 Material 3 来配置整个应用（主题、导航）。Scaffold（字面意思是 "脚手架"）提供一个屏幕的结构：背景、一个可选的标题栏……Center 让它的子节点居中，而 Text 显示文本。Text 的 style 参数接收一个 TextStyle，用来设置字符的大小（fontSize）、颜色或粗细。现在让我们来认识 Container，这个万能的盒子：一个矩形，它的尺寸、颜色和内容都由你掌控。

import 'package:flutter/material.dart';

Widget buildYellowBox() {
  return Container(
    width: 200,
    height: 100,
    color: Colors.amber,
    child: const Center(
      child: Text("I'm inside a box"),
    ),
  );
}

buildYellowBox 函数返回一个 widget：像这样把你的界面拆分成一个个有名字的小块，是一种非常常见的做法。这个 Container 宽 200 像素、高 100 像素，借助 Colors 颜色目录把自己涂成琥珀黄色，并装着一段居中的文本。第三个基础构建块：Icon，用来显示一个图标符号。Flutter 在 Icons 目录中内置了数百个现成可用的图标：一颗星、一颗心、一栋房子……

import 'package:flutter/material.dart';

Widget buildStar() {
  return const Icon(
    Icons.star,
    size: 48,
    color: Colors.orange,
  );
}

记住树的逻辑：当一个 widget 只接受单个子节点时，这个参数叫做 child（Center 和 Container 就是这种情况）。在我们的第一个例子中，Scaffold 是 Center 的父节点，而 Center 又是 Text 的父节点。Flutter 通过自上而下地遍历这棵树来绘制屏幕。只要你能分清谁是谁的父节点，你就能读懂任何 Flutter 界面。

知识检测

确认你已牢记本课的重点内容。

1. 在 Flutter 中，什么是 widget？
   • 一个描述屏幕某一部分的界面构建块
   • 一个项目配置文件
   • 一个内置于手机中的数据库
2. 你用哪个 widget 来显示像星星这样的图标符号？
   • Text
   • Container
   • Icon
3. 在 Center(child: Text("Hi")) 中，哪个 widget 是父节点？
   • Text，因为它写在最后
   • Center，因为它通过 child 参数装着 Text
   • 都不是：这两个 widget 是相互独立的