Flutter 的热重载功能可帮助你快速、轻松地进行实验、构建 UI、添加功能和修复错误。热重载的工作原理是将更新后的源代码文件注入到正在运行的 Dart 虚拟机 (VM) 中。VM 使用新版本的字段和函数更新类后,Flutter 框架会自动重建 widget 树,让你快速查看更改的效果。

如何执行热重载

#

热重载 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 UI
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 的构建器

#

热重载不会应用对 CupertinoTabViewbuilder 所做的更改。有关更多信息,请参阅问题 43574

枚举类型

#

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

例如

更改前

dart
enum Color { red, green, blue }

更改后

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

泛型

#

修改泛型声明时,热重载将不起作用。例如,以下情况将不起作用

更改前

dart
class A<T> {
  T? i;
}

更改后

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

原生代码

#

如果你更改了原生代码(例如 Kotlin、Java、Swift 或 Objective-C),则必须执行完全重启(停止并重新启动应用)才能使更改生效。

旧状态与新代码结合

#

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

如果代码更改影响到应用的状态(或其依赖项),你的应用可用的数据可能与从头开始执行时的数据不完全一致。热重载后与热重启后的行为可能有所不同。

包含近期代码更改但不包含应用状态

#

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

如果你更改了全局变量和静态字段的初始化表达式,则需要热重启或重新启动持有这些初始化表达式的状态才能看到更改。例如,考虑以下代码

dart
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')]),
    ],
  ),
];

运行应用后,你进行以下更改

dart
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
      ),
    ],
  ),
];

你进行热重载,但更改未反映。

相反,在以下示例中

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

第一次运行应用时,会打印 11。然后,你进行以下更改

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

虽然对 const 字段值的更改总是会进行热重载,但静态字段初始化表达式不会重新运行。从概念上讲,const 字段被视为别名而非状态。

Dart VM 会检测初始化表达式的更改,并在需要热重启才能使一组更改生效时进行标记。上述示例中的大多数初始化工作都会触发此标记机制,但以下情况除外

dart
final bar = foo;

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

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

有关更多信息,请阅读 Dart 中constfinal 关键字之间的区别

不包含近期 UI 更改

#

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

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

例如,考虑以下代码

dart
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'));
  }
}

运行此应用后,按如下方式更改代码

dart
import 'package:flutter/widgets.dart';

void main() {
  runApp(const Center(child: Text('Hello', textDirection: TextDirection.ltr)));
}

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

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

工作原理

#

当调用热重载时,宿主机查看自上次编译以来的已编辑代码。以下库会被重新编译:

  • 任何有更改代码的库
  • 应用的主库
  • 从主库到受影响库的那些库

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

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

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