Flutter学习-热重载

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/skycnlr/article/details/86070671

Flutter学习-热重载

前言

上一篇文章Flutter学习-基础组件Widgets中学习了使用Container来构建一个app页面,此时如果需要修改调试,不需要再次运行,有一个简便的方式就是使用热重载。

什么是热重载

所谓热重载就是页面每次改动,不需要手动去刷新,可自动刷新。即支持开发过程中热重载。很多跨平台方案框架,如Vuex都是支持热重载的,而我们学习这个Flutter,当然也是支持。
Flutter的热重载原理:
通过将更新后的源代码文件注入正在运行的Dart虚拟机(VM)中来实现热重载。在虚拟机使用新的的字段和函数更新类后,Flutter框架会自动重新构建widget树,以便您快速查看更改的效果。
参考官网:https://flutterchina.club/hot-reload/

怎么使用

要热重载一个Flutter应用程序:

从受支持的IntelliJ IDE或终端窗口运行应用程序。物理机或虚拟器都可以运行。
修改项目中的一个Dart文件。大多数类型的代码更改可以重新加载;(PS:但是还是有限制的,一些数据无法进行热重载,只能重新运行程序。)
第一次运行应用到设备后如下图所示:(使用上一篇文章Flutter学习-基础组件Widgets的demo测试)
在这里插入图片描述
现在修改代码,将文本this is a container修改为this is a container hot reload;

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new Container(        alignment: new Alignment(1.0,1.0),
      color: Colors.red,
      width: 500,
      height: 600,
      padding: new EdgeInsets.all(110),
      constraints: new BoxConstraints(),
      child: new Text("this is a container",
          textDirection: TextDirection.ltr),

    );
  }
}

然后点击工具栏上的Hot Reload,此时会将修改的代码运行到设备。
Android studio中点击工具栏图标如下:
在这里插入图片描述
运行后,此时终端日志输出如下:
在这里插入图片描述
Reloaded 1 of 419 libraries in 1,179ms.表示热加载时间仅仅1秒多。
效果如下:
在这里插入图片描述

总结

如上过程就是一个热加载的使用过程,可以看到的优点就是减少了开发调试时间,能帮助开发更快的进行布局、代码逻辑修改验证等。
但是,热重载不是万能的,对于热重载存在一些代码无法实现,如静态字段等,所以要根据实际来判断是否使用热重载。

猜你喜欢

转载自blog.csdn.net/skycnlr/article/details/86070671