Flutter Widget中的State
作者:互联网
一、Flutter 的声明式视图开发
程序地带 www.secn.net 在原生系统(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。
前者一般用于静态内容的展示,而后 者则用于存在交互反馈的内容呈现中。
二、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 构建的设计方式实现的。
标签:Widget,StatefulWidget,视图,State,StatelessWidget,组件,Flutter 来源: https://blog.csdn.net/weixin_48967543/article/details/115442907