Flutter Widget中的State

1、Flutter 的声明式视图开发

在原生系统(Android、iOS)或原生JavaScript 开发的话，应该知道视图开发是 命令式的，须要精确地告诉操做系统或浏览器用 何种方式去作事情。

好比，若是咱们想要变动界面的某个文案，则须要找到具体的文本控件并调用它的控件方法命令，才能完成文字变动。

 

 // Android 设置某文本控件展现文案为 Hello World
 TextView textView = (TextView) findViewById(R.id.txt);
 textView.setText("Hello");

 // iOS 设置某文本控件展现文案为 Hello World
 UILabel *label = (UILabel *)[self.view viewWithTag:100];
 label.text = @"Hello";

　　

与此不一样的是， Flutter 的视图开发是声明式的，其核心设计思想就是将视图和数据分离， 这与 React 的设计思路彻底一致。

 对咱们来讲，若是要实现一样的需求，则要稍微麻烦点:

除了设计好 Widget 布局方案之 外，还须要提早维护一套文案数据集，

并为须要变化的 Widget 绑定数据集中的数据，使 Widget 根据这个数据集完成渲染。

可是，当须要变动界面的文案时，咱们只要改变数据集中的文案数据，并通知 Flutter 框架 触发 Widget 的从新渲染便可。

这样一来，开发者将无需再精确关注 UI 编程中的各个过程 细节，只要维护好数据集便可。

比起命令式的视图开发方式须要挨个设置不一样组件 (Widget)的视觉属性，这种方式要便捷得多。

 

总结来讲，命令式编程强调精确控制过程细节;而声明式编程强调经过意图输出结果总体。

对应到 Flutter 中，意图是绑定了组件状态的 State，结果则是从新渲染后的组件。

 

在 Widget 的生命周期内，应用到 State 中的任何更改都将强制 Widget 从新构建。

其中，对于组件完成建立后就无需变动的场景，状态的绑定是可选项。

这里“可选”就区分出了 Widget 的两种类型，

即:StatelessWidget 不带绑定状态，而 StatefulWidget 带绑 定状态。

当你所要构建的用户界面不随任何状态信息的变化而变化时，须要选择使用 StatelessWidget，反之则选用 StatefulWidget。

前者通常用于静态内容的展现，然后 者则用于存在交互反馈的内容呈现中。

 

2、Widget 选型的基本原则

接下来，我分别和你介绍 StatelessWidget 和 StatefulWidget，总结一些关于 Widget 选型的基本原则。

StatelessWidget

在 Flutter 中，Widget 采用由父到子、自顶向下的方式进行构建，父 Widget 控制着子 Widget 的显示样式，其样式配置由父 Widget 在构建时提供。

用这种方式构建出的 Widget，有些(好比 Text、Container、Row、Column 等)在建立 时，除了这些配置参数以外不依赖于任何其余信息，

换句话说，它们一旦建立成功就再也不关 心、也不响应任何数据变化进行重绘。

在 Flutter 中，这样的 Widget 被称为 StatelessWidget(无状态组件)。

这里有一张 StatelessWidget 的示意图，以下所示:

 

 

StatelessWidget 示意图

能够看到，在构造后，build 方法随即将子组件 RichText 经过其属性列表(如文本 data、对齐方式 textAlign、文本展现方向 textDirection 等)初始化后返 回，以后 Text 内部再也不响应外部数据的变化。

那么，什么场景下应该使用 StatelessWidget 呢?

一个简单的判断规则:父 Widget 是否能经过初始化参数彻底控制其 UI 展现效果?

若是能，那么咱们就可使用 StatelessWidget 来设计构造函数接口了。

 

 StatefulWidget

与 StatelessWidget 相对应的，有一些 Widget(好比 Image、Checkbox)的展现，除了父 Widget 初始化时传入的静态配置以外，

还须要处理用户的交互(好比，用户点击按 钮)或其内部数据的变化(好比，网络数据回包)，并体如今 UI 上。

换句话说，这些 Widget 建立完成后，还须要关心和响应数据变化来进行重绘。在 Flutter 中，这一类 Widget 被称为 StatefulWidget(有状态组件)。

这里有一张 StatefulWidget 的示意图，以下所示:

 

 

  StatefulWidget 示意图

以前了解到，Widget 是不可变的，发生变化时须要销毁重建，因此谈不上状态。

其实，StatefulWidget 是以 State 类代理 Widget 构建的设计方式实现的。