Flutter 视图核心对象简介
Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改（类似于React/Vue中虚拟DOM的diff算法），如下是 Flutter 的架构图，可见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 要渲染对象的层级关系，下层节点不能更新上层节点状态；
也无法改变同级节点状态
更多关于widget的详细介绍，请参考以下链接
Flutter-ios
Flutter-android
Flutter-widget
Flutter-doc
Flutter-sourcecode
Element
存放上下文，通过Element遍历视图树，Element同时持有Widget和RenderObject
RenderObject
根据Widget的布局属性进行layout，paint Widget传人的内容
BuildContext
BuildContext 就是Element的一个接口类
更深层的flutter界面开发知识，参考以下链接
深入理解Flutter界面开发
