Widget乐高积木

在开始实作App之前，我们需要认识 Flutter 程序架构的基本概念。

回顾 Flutter 的程序码

我想要先带大家理解一下Flutter应用程序的启动过程，请查看程序码上的编号以对应下方的说明。

// 1. flutter sdk material style framework
import 'package:flutter/material.dart';

// 2. 程序进入点
void main() => runApp(MyApp());

// 3. root widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

1. 这段是 import Flutter SDK 的语句， Dart 透过 pubspec.yaml 这只 YAML 格式档案描述该专案相关内容说明，这只档案记录了引用的相依套件，你可以在 dependencies: 这边找到 flutter sdk 的设定。Flutter 提供了两种风格供使用，一个是 material design 风格设计；另一个则是 iOS 风格 的 cupertino，不管引用哪一套，其内部都提供了 Flutter 渲染引擎的运行环境。

2. 这边是 dart 可执行程序的起点，其中 SDK 提供的函式 runApp 封装了 Flutter 如何透过 root widget 建立整个 UI 画面的行为，要深入了解底架架构的可以使用 IDE 追踪一下 SDK 的原始码。

3. 这个 widget 是我们的 root widget，可以看到这个类别继承 StatelessWidget，并且 override build 的方法，方法回传名为 MaterialApp 的 widget　类别实例。这个 widget 有许多命名参数的设定，对应画面上的区块内容。

从上述程序码内容，我们可以发现 Flutter 主要是透过 widget 组合的方式，渲染出应用程序的介面。

Widgets介绍

在 Flutter 内是将 widget 以类似积木的方式组合出 Flutter 应用程序介面。从 root widget 开始组建成类似一个Tree的结构。

Flutter 会根据 widget 里的状态Tree上的节点进行管理，并在每一帧更新过程中根据 widget 中的 build 方法渲染画面。

结构上抽象化可以拆分成下述树的结构：

• Widget Tree

Widget Tree 负责管理整个介面的配置状态，并在生成的过程中透过createElement方法产生对应的 Element Tree。

• Element Tree

Element Tree 负责管控 Widget Tree 上的节点，在节点状态发生改变时透过 widget 的 build 方法重建新的画面资料，并担位 Widget Tree 与 RenderObject Tree 之间关联的桥梁。

• RenderObject Tree

RenderObject Tree 负责处理渲染画面上的计算工作，并将计算的结果传递给底层进行渲染画面。

我们初步意识到这上述这些关系就好，後续我们在深入了解 widget 行为时会慢慢理解这几层之间的关系。

小结

今日学习上认识了 widget 在 Flutter 中扮演的角色与定位，通常看到演算法谈到有关树(Tree)的章节时，脑袋总是会不自觉得昏昏欲睡，不过从前端人员的角度来看，这些 Tree 的概念跟 DOM (Document Object Model) 是很相近的，开发前端的过程好像也没完全厘清 DOM 架构与节点的关系，反正我介面刻得出来就好 XDDD。