热重载

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 中运行、运行调试、热重载和热重启的控件

只有在更改后再次运行修改后的 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 所做的更改。有关更多信息，请参阅 问题 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);
}

有关更多信息，请阅读有关 Dart 中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 重新构建。这会导致热重载后没有可见的更改。

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

• 任何具有更改代码的库
• 应用程序的主库
• 从主库到受影响库的库

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

Dart VM 从新的内核文件中重新加载所有库。到目前为止，还没有代码重新执行。

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

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-05-05。 查看源代码 或 报告问题.