Widget 体系

这一课你将能做到

1. 区分 StatelessWidget 和 StatefulWidget，知道什么时候用哪个
2. 熟练组合 Text / Image / Container / Row / Column / ListView 等基础 Widget 搭出任意 UI
3. 理解 Key 的作用，能解决「列表动画错乱」「状态错位」等经典问题

为什么要学

Flutter 里一切都是 Widget——按钮是 Widget、内边距是 Widget、整个 App 也是 Widget。Widget 写不对，UI 一定搭不出来。

人话：Widget 就是乐高积木。小积木（Text、Icon）拼出大积木（Card、AppBar），大积木再拼出整个房子（Scaffold）。

先建立图像

MaterialApp
 └── Scaffold
      ├── AppBar(title: Text('首页'))
      ├── body: Column
      │    ├── Image.network(...)
      │    ├── Row
      │    │    ├── Icon(Icons.star)
      │    │    └── Text('评分 4.9')
      │    └── ElevatedButton(...)
      └── FloatingActionButton(...)

每个节点都是一个 Widget，Widget 嵌套 Widget。

跟着做

步骤 1：最小可运行骨架

新建 lib/main.dart：

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(
      title: 'Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Widget 体系')),
      body: const Center(child: Text('Hello Widget')),
    );
  }
}

flutter run 即可看到一个带标题栏和居中文字的页面。

步骤 2：StatelessWidget vs StatefulWidget

StatelessWidget：只依赖构造参数，build 出来的内容不变。

class Greeting extends StatelessWidget {
  final String name;
  const Greeting({super.key, required this.name});

  @override
  Widget build(BuildContext context) => Text('你好, $name');
}

StatefulWidget：自己有可变状态（counter、表单输入、动画值）。

class Counter extends StatefulWidget {
  const Counter({super.key});
  @override
  State<Counter> createState() => _CounterState();
}

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

  void _inc() => setState(() => _count++);   // 改状态必须走 setState

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _inc,
      child: Text('点了 $_count 次'),
    );
  }
}