Flutter 中的热重载是如何工作的？

Question

我正在开发一个具有

run

函数的库，该函数运行带有大量配置参数的整个应用程序样板，例如

LoginPageColor

如何在更改颜色时以更新应用程序的方式执行热重载？

这不起作用。

void main() {
  run(loginPageColor: Colors.red); // change this
}
void run({required Color loginPageColor}) {
  runApp(MyApp(loginPageColor: loginPageColor));
}
class MyApp extends StatelessWidget {
  final Color loginPageColor;

  const MyApp({Key? key, required this.loginPageColor}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginPage(color: loginPageColor),
    );
  }
}

class LoginPage extends StatelessWidget {
  final Color color;

  const LoginPage({Key? key, required this.color}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: color,
      body: Center(
        child: Text('Login Page'),
      ),
    );
  }
}

我在某处读到热重载与隔离一起工作，所以我做了配置顶级函数，这是一个丑陋的解决方案，但它有效。有没有一种更优雅的方法可以在不使用这种

top-level

和 getter 方法的情况下进行热重载？

MaterialColor getColor (){
  return Colors.pink; // change this to Red
}
void main() {
  run(loginPageColor: getColor);
}

void run({required Color Function() loginPageColor}) {
  runApp(MyApp(loginPageColor: loginPageColor));
}

class MyApp extends StatelessWidget {
  final Color Function() loginPageColor;

  const MyApp({Key? key, required this.loginPageColor}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginPage(color: loginPageColor()),
    );
  }
}

class LoginPage extends StatelessWidget {
  final Color color;

  const LoginPage({Key? key, required this.color}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: color,
      body: Center(
        child: Text('Login Page'),
      ),
    );
  }
}

注意：这是丑陋，因为我不想在包描述中写一个免责声明，即配置应该是“顶级”功能，否则它将无法与热重载一起使用。除非这是 Dart 的限制，但我不这么认为，因为

Flutter Widgets

不是顶级，但它们可以热重载。

是否有一个很好的官方资料来深入解释 Dart 中的热重载如何工作？。大多数来源只是解释了如何将它与小部件一起使用，但我找不到解释如何使用它的来源。

Answer 1

Flutter 使用 DVM 来渲染小部件，其工作原理如下：

1：状态保存：

热重载保留应用程序的当前状态。当您更改代码时，应用程序将继续运行，并保留状态（如用户输入、滚动位置等）。 源代码更改：

2. 当您保存更改时，Flutter 会检测修改的文件。它仅编译这些文件而不是整个应用程序。 增量编译：

3. Flutter 使用 Dart VM 对修改后的代码进行增量编译。这意味着它只会重新编译已更改的代码部分。

4. Widget 树更新：Flutter 引擎将更新的代码发送到 Dart VM，Dart VM 更新 Widget 树。框架使用新代码重建受影响的小部件。

5. 重建小部件：更新后的小部件树随后呈现在屏幕上。由于应用程序状态被保留，UI 会立即反映更改而不会丢失上下文。