（四）Widget 以及热重载和重启

构建 Widget 要点

不需要修改数据继承StatelessWidget
需要修改数据则继承StatefulWidget

实例一

import 'package:flutter/material.dart';

void main() =>  runApp(App());

/*
不需要修改数据 继承StatelessWidget 
需要修改数据则 继承StatefulWidget
*/ 
class App extends StatelessWidget {
  /*
  * 装饰 @override 表示 重写父类 StatelessWidget 中的 build方法
  * build 方法返回值类型是 Widget
  * */
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Text(
        'Hello Widget',
        textDirection: TextDirection.ltr,
      )
    );
  }
}

在这里插入图片描述

Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。
Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同，以确定底层渲染树从一个状态转换到下一个状态所需的最小更改，类似于React/Vue中虚拟DOM的diff算法。

关于widget

在编写应用程序时，通常会创建新的widget，这些widget是无状态的StatelessWidget或者是有状态的StatefulWidget，
具体的选择取决于您的widget是否需要管理一些状态。如下的App 部件就是继承无状态的StatelessWidget
widget的主要工作是实现一个build函数，用以构建自身。一个widget通常由一些较低级别widget组成。
Flutter框架将依次构建这些widget，直到构建到最底层的子widget时，这些最低层的widget通常为RenderObject，它会计算并描述widget的几何形状。

import 'package:flutter/material.dart';

void main() =>  runApp(App());

// 不需要修改数据 继承StatelessWidget 需要则 StatefulWidget
class App extends StatelessWidget {
  /*
  * 装饰 @override 表示 重写父类 StatelessWidget 中的 build方法
  * build 方法返回值类型是 Widget
  * */
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Text(
        'Hello Widget',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 45.0,
          fontWeight: FontWeight.bold,
          color: Colors.amberAccent,
        ),
      )
    );
  }
}

在这里插入图片描述

运行调试

H:\src\f_demo_1>flutter run
Using hardware rendering with device Android SDK built for x86 64. If you get graphics artifacts, consider enabling software
rendering with "--enable-software-rendering".
Launching lib/main.dart on Android SDK built for x86 64 in debug mode...
Initializing gradle...                                              3.8s
Resolving dependencies...                                          21.1s
Running Gradle task 'assembleDebug'...
Running Gradle task 'assembleDebug'... Done                        42.1s
Built build\app\outputs\apk\debug\app-debug.apk.
Installing build\app\outputs\apk\app.apk...                         4.3s
D/        ( 3989): HostConnection::get() New Host Connection established 0x7a171270df60, tid 4006
D/EGL_emulation( 3989): eglMakeCurrent: 0x7a1708ba8060: ver 2 0 (tinfo 0x7a170b40c920)

Flutter终端调试热键


热重载 To hot reload changes while running, press "r". 
重启 To hot restart (and rebuild state), press "R".
For a more detailed help message, press "h".
"o" IOS 与 android 互切
To detach, press "d";
推出调试 To quit, press "q".

热重载

Flutter 可以通过热重载（hot reload）实现快速的开发周期，热重载就是无需重启应用程序就能实时加载修改后的代码，并且不会丢失状态。
简单的对代码进行更改，然后告诉IDE或命令行工具你需要重新加载（点击reload按钮或者终端键入如上所述的控制符 r ），你就会在你的设备或模拟器上看到更改。

（四）Widget 以及热重载和重启

猜你喜欢