setState 会重绘屏幕

本课属于 Coddy Flutter 学习旅程的“让应用具有交互性”单元。第 11 课，共 34 课。

在这个应用中按加一，然后观察控制台：1、2、3。屏幕上的数字仍然是 0。Flutter 只构建了一次屏幕，没有任何内容让它再次构建。

StatelessWidget 永远不会改变。会改变的屏幕是 StatefulWidget，它由两个类组成：

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Text('$_count');
  }
}

HomePage 只说明要创建哪个 State（createState，采用“返回值的函数”一课中介绍的箭头形式编写）。_HomePageState 负责具体工作：它会在顶部的变量中保存屏幕数据，例如 _count，并构建屏幕。它的生命周期与屏幕一样长，因此 _count 会在每次构建后保留原来的值。

要更改屏幕，就在 setState 中更改数据。它会告诉 Flutter“这里发生了变化，请重新构建”，然后 Text 就会显示新的数字：

setState(() {
  _count = _count + 1;
});

_HomePageState 和 _count 开头的下划线会让名称变成私有：只有这个文件能使用它。状态类及其变量通常都会以下划线开头。

挑战

中等

每按一次 Add one，就让屏幕上的数字加 1：将对 _count 的更改放在 setState 中。

亲手试试

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(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('$_count', style: TextStyle(fontSize: 48)),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                _count = _count + 1;
                print(_count);
              },
              child: Text('Add one'),
            ),
          ],
        ),
      ),
    );
  }
}