热重载

Flutter 的热重载功能可帮助您快速轻松地进行实验、构建 UI、添加功能和修复错误。热重载通过将更新后的源代码文件注入 Dart 运行时 来工作。Dart 运行时更新具有新版本字段和函数的类后，Flutter 框架会自动重建 widget 树，让您能够快速查看更改的效果。

DartPad 中热重载的演示

要热重载 Flutter 应用

1. 从受支持的 Flutter 编辑器或终端窗口运行应用。目标可以是物理设备或虚拟设备。 只有处于调试模式下的 Flutter 应用才能进行热重载或热重启。

2. 修改项目中的一个 Dart 文件。大多数类型的代码更改都可以进行热重载；有关需要热重启的更改列表，请参阅 特殊情况。

3. 如果您正在使用支持 Flutter IDE 工具和热重载的 IDE/编辑器，并且已启用“保存时热重载”，请选择 全部保存 (cmd-s/ctrl-s)，或单击工具栏上的热重载按钮。

   如果您使用 flutter run 在命令行中运行应用，请在终端窗口中输入 r。

在成功进行热重载操作后，您将在控制台中看到类似以下的消息

Performing hot reload...
Reloaded 1 of 448 libraries in 978ms.

应用更新以反映您的更改，并且应用的当前状态得以保留。您的应用将从热重载命令执行之前的位置继续执行。代码更新并执行继续。

Android Studio 中运行、调试、热重载和热重启的控件

只有在代码更改在修改后的 Dart 代码再次运行后才能产生可见效果。具体来说，热重载会导致所有现有 widget 重新构建。只有参与 widget 重新构建的代码才会自动重新执行。例如，main() 和 initState() 函数不会再次运行。

下一部分描述了涉及热重载的特定场景。在某些情况下，对 Dart 代码的微小更改使您可以继续为应用使用热重载。在其他情况下，需要热重启或完全重启。

当应用被杀死时，热重载可能会失败。例如，如果应用在后台停留时间过长。

当代码更改引入编译错误时，热重载会生成类似于以下内容的错误消息

Hot reload was rejected:
'/path/to/project/lib/main.dart': warning: line 16 pos 38: unbalanced '{' opens here
  Widget build(BuildContext context) {
                                     ^
'/path/to/project/lib/main.dart': error: line 33 pos 5: unbalanced ')'
    );
    ^

在这种情况下，只需更正指定行 Dart 代码中的错误即可继续使用热重载。

热重载不适用于 CupertinoTabView 的 builder 所做的更改。有关更多信息，请参阅 Issue 43574。

当枚举类型更改为常规类或常规类更改为枚举类型时，热重载不起作用。

例如

更改前

enum Color { red, green, blue }

更改后

class Color {
  Color(this.i, this.j);
  final int i;
  final int j;
}

当泛型类型声明被修改时，热重载不起作用。例如，以下内容不起作用

更改前

class A<T> {
  T? i;
}

更改后

class A<T, V> {
  T? i;
  V? v;
}

如果您更改了原生代码（例如 Kotlin、Java、Swift 或 Objective-C），则必须执行完全重启（停止并重启应用）才能看到更改生效。

Flutter 的有状态热重载保留应用的状态。这种方法使您能够仅查看最新更改的效果，而不会丢弃当前状态。例如，如果您的应用需要用户登录，您可以修改并热重载导航层次结构中几个级别的页面，而无需重新输入登录凭据。状态得以保留，这通常是期望的行为。

如果代码更改影响应用的状态（或其依赖项），则应用处理的数据可能与从头开始执行时的数据不完全一致。热重载后的结果可能与热重启不同。

在 Dart 中，静态字段是延迟初始化的。这意味着，第一次运行 Flutter 应用并读取静态字段时，它会被设置为其初始化器评估后的值。全局变量和静态字段被视为状态，因此在热重载期间不会重新初始化。

如果您更改了全局变量和静态字段的初始化器，则需要热重启或重启状态才能看到更改，该状态保存了初始化器。例如，考虑以下代码

final sampleTable = [
  Table(
    children: const [
      TableRow(children: [Text('T1')]),
    ],
  ),
  Table(
    children: const [
      TableRow(children: [Text('T2')]),
    ],
  ),
  Table(
    children: const [
      TableRow(children: [Text('T3')]),
    ],
  ),
  Table(
    children: const [
      TableRow(children: [Text('T4')]),
    ],
  ),
];

运行应用后，您进行以下更改

final sampleTable = [
  Table(
    children: const [
      TableRow(children: [Text('T1')]),
    ],
  ),
  Table(
    children: const [
      TableRow(children: [Text('T2')]),
    ],
  ),
  Table(
    children: const [
      TableRow(children: [Text('T3')]),
    ],
  ),
  Table(
    children: const [
      TableRow(
        children: [Text('T10')], // modified
      ),
    ],
  ),
];

您进行热重载，但更改未反映。

相反，在以下示例中

const foo = 1;
final bar = foo;
void onClick() {
  print(foo);
  print(bar);
}

运行应用后，首次打印 1 和 1。然后，您进行以下更改

const foo = 2; // modified
final bar = foo;
void onClick() {
  print(foo);
  print(bar);
}

虽然 const 字段值的更改始终会进行热重载，但静态字段初始化器不会重新运行。从概念上讲，const 字段被视为别名而不是状态。

Dart VM 检测初始化器更改并标记需要热重启才能生效的一组更改。上述示例中的大部分初始化工作会触发标记机制，但对于以下情况不会触发：

final bar = foo;

要更新 foo 并查看更改后的热重载，请考虑将该字段重新定义为 const 或使用 getter 返回该值，而不是使用 final。例如，以下两种解决方案均有效

const foo = 1;
const bar = foo; // Convert foo to a const...
void onClick() {
  print(foo);
  print(bar);
}

const foo = 1;
int get bar => foo; // ...or provide a getter.
void onClick() {
  print(foo);
  print(bar);
}

有关更多信息，请阅读有关 const 和 final 关键字之间差异 的内容。

即使热重载操作似乎成功且未生成异常，某些代码更改可能在刷新的 UI 中不可见。在更改应用的 main() 或 initState() 方法后，这种行为很常见。

通常，如果修改后的代码位于根 widget 的 build() 方法下游，则热重载的行为符合预期。但是，如果修改后的代码不会因重建 widget 树而重新执行，则在热重载后将看不到其效果。

例如，考虑以下代码

import 'package:flutter/material.dart';
​
void main() {
  runApp(MyApp());
}
​
class MyApp extends StatelessWidget {
  const MyApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return GestureDetector(onTap: () => print('tapped'));
  }
}

运行此应用后，更改代码如下

import 'package:flutter/widgets.dart';
​
void main() {
  runApp(const Center(child: Text('Hello', textDirection: TextDirection.ltr)));
}

使用热重启，程序从头开始启动，执行 main() 的新版本，并构建一个显示文本 Hello 的 widget 树。

但是，如果在进行此更改后热重载应用，则不会重新执行 main() 和 initState()，并且 widget 树将使用未更改的 MyApp 实例作为根 widget 进行重建。这导致热重载后没有可见的更改。

当调用热重载时，主机机器会查看自上次编译以来的已编辑代码。将重新编译以下库：

• 任何包含已更改代码的库
• 应用的 main 库
• 从 main 库到受影响库的库

这些库的源代码编译为 kernel 文件 并发送到移动设备的 Dart VM。

Dart VM 重新加载来自新 kernel 文件的所有库。到目前为止，没有代码被重新执行。

然后，热重载机制导致 Flutter 框架触发所有现有 widget 和渲染对象的重建/重新布局/重新绘制。