热重载会保留状态

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

预览有两种方式来应用你的更改。运行会从头启动应用。热重载会在应用继续运行时替换为新代码，并保留状态：计数器会保留原来的数字。

试试看：按几次加号，更改数字的颜色，然后按“热重载”。新颜色会显示出来，计数也还在。调整屏幕样式时，这样就不用再点来点去，回到之前的位置了。

热重载会用新代码重新构建屏幕，但不会创建新的状态。因此，更改初始值（例如将 int _count = 0; 改为 int _count = 10;）不会显示出来：只有创建状态时才会运行这一行。按“运行”即可查看效果。

main 也是如此，将 StatelessWidget 改为 StatefulWidget 也是如此。如果更改在热重载后没有显示出来，就按“运行”。

挑战

简单

将数字大小设为 64，颜色设为 Colors.deepPurple。先按几次加号按钮，然后使用热重载，看看计数是否保持不变。
将计数器的初始值设为 10。注意，热重载不会显示这个初始值，而点击“运行”会显示。

亲手试试

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;

  void _increase() {
    setState(() {
      _count++;
    });
  }

  void _decrease() {
    setState(() {
      _count--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            IconButton(icon: Icon(Icons.remove), onPressed: _decrease),
            Text('$_count', style: TextStyle(fontSize: 48)),
            IconButton(icon: Icon(Icons.add), onPressed: _increase),
          ],
        ),
      ),
    );
  }
}