Flutter界面开发（二）

Flutter 视图核心对象简介

Everything’s a Widget

Widget

在flutter的世界里，包括views,view controllers,layouts等在内的概念都建立在Widget之上，对于一个iOS/Android开发人员来说，并没有一个对于的控件或者概念能与 widget 类同，我们应该怎理解widget呢？
Describes the configuration for an [Element].
widget 是 Element 的描述；
Widgets are the central class hierarchy in the Flutter framework.
是Flutter 框架的核心；
A widget is an immutable description of part of a user interface.
对一个 UI 的不可变的描述；
Widgets can be inflated into elements, which manage the underlying render tree.
可调用方法 widget.createElement() 生成 Element，管理下层的渲染树。

以上是官方文档对 widget 的描述，看完之后，一脸懵逼，widget作为 Element 的描述可以理解，也就是说类比到iOS/Android，Element 是View对象，那么 widget 可以类比为 viewmodel，但是让人困惑的是，怎么用 immutable widget 来构建灵活多变的 UI 呢？
state
在 iOS 上更新 views，只需要直接改变它们就可以了。在 Flutter 中，widgets 是不可变的，而且不能被直接更新。你需要去操纵 widget 的 state。
这也正是有状态（stateful）的和无状态（stateless）的 widget 这一概念的来源。一个 StatelessWidget 正如它听起来一样，是一个没有附加状态的 widget。

为什么要分为有状态和无状态
相比有状态，从最最基本的内存占用来说，有状态比无状态至少多了一个 state 属性，就必然要消耗更多的资源，特别是在性能特别敏感的 UI 渲染场景。

实战
StatelessWidget 在你构建初始化后不再进行改变的界面时非常有用。
举个例子，你可能会用一个 UIImageView 来展示你的 logo image 。如果这个 logo 在运行时不会改变，那么你就可以在 Flutter 中使用 StatelessWidget。
如果你希望在发起 HTTP 请求时，依托接收到的数据动态的改变 UI，请使用 StatefulWidget。当 HTTP 请求结束后，通知 Flutter 框架 widget 的 State 更新了，好让系统来更新 UI。

有状态和无状态的 widget 之间一个非常重要的区别是，StatefulWidget 拥有一个 State 对象来存储它的状态数据，并在 widget 树重建时携带着它，因此状态不会丢失。

如果你有疑惑，请记住以下规则：如果一个 widget 在它的 build 方法之外改变（例如，在运行时由于用户的操作而改变），它就是有状态的。如果一个 widget 在一次 build 之后永远不变，那它就是无状态的。但是，即便一个 widget 是有状态的，包含它的父亲 widget 也可以是无状态的，只要父 widget 本身不响应这些变化。

下面的例子展示了如何使用一个 StatelessWidget 。一个常见的 StatelessWidget 是 Text widget。如果你查看 Text 的实现，你会发现它是 StatelessWidget 的子类。

Text(
  'I like Flutter!',
);

你可能会注意到 Text widget 并不显示地携带任何状态。它通过传入给它的构造器的数据来渲染，除此之外再无其他。

但是，如果你希望 I like Flutter 在点击 FloatingActionButton 时动态的改变呢？

为了实现这个，用 StatefulWidget 包裹 Text widget，并在用户点击按钮时更新它。

class SampleApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  @override
  createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  // Default placeholder text
  String textToShow = "I Like Flutter";
  void _updateText() {
    setState(() {
      // update the text
      textToShow = "Flutter is Awesome!";
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample App"),
      ),
      body: Center(child: Text(textToShow)),
      floatingActionButton: FloatingActionButton(
        onPressed: _updateText,
        tooltip: 'Update Text',
        child: Icon(Icons.update),
      ),
    );
  }
}

注意：manage the underlying render tree。
通过 setstate 要渲染对象的层级关系，下层节点不能更新上层节点状态；
也无法改变同级节点状态

Element

存放上下文，通过Element遍历视图树，Element同时持有Widget和RenderObject

RenderObject

根据Widget的布局属性进行layout，paint Widget传人的内容

BuildContext

BuildContext 就是Element的一个接口类