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

构建 Widget 要点

• Flutter在构建页面时，会调用组件的build方法，widget的主要工作是提供一个build()方法来描述如何构建UI界面（通常是通过组合、拼装其它基础widget）
• 如下App继承StatefulWidget类，表示它是一个有状态的widget（Stateful widget）
• Stateful widget可以拥有状态，这些状态在widget生命周期中是可以变的，而Stateless widget是不可变的。
• Stateful widget至少由两个类组成：
  • StatefulWidget类。
  • State类； StatefulWidget类本身是不变的，但是 State类中持有的状态在widget生命周期中可能会发生变化。

实例一

import 'package:flutter/material.dart';

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


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,
        ),
      )
    );
  }
}

• App类代表Flutter应用，它继承了 StatelessWidget类，这也就意味着应用本身也是一个widget。
  

• 运行调试

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 ），你就会在你的设备或模拟器上看到更改。

实例地址

• [email protected]:AngelovLee/FlutterDemo.git