开发者社区> ws5ztcvob2aao> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Flutter(八)——状态管理(一)

简介: Flutter(八)——状态管理(一)
+关注继续查看

前言


在学习完Flutter的常用组件之后,我们对这些组件的使用都有了一定的了解。但是,只是了解还是不够的,因为我们的数据是动态的,具备交互性,界面上的展示会根据用户的操作产生变化。这个时候,就需要对Flutter的状态管理机制有一定的了解,我们先来看一张图:

image

Flutter一切皆是组件,而组件Widget主要被划分为StatelessWidget和StatefulWidget两大类,下面将分辨介绍一下两类组件。


Widget


我们使用Flutter开发过程中,会出现布局层级。不管这个界面是简单的,还是复杂的,都会有布局的嵌套层级,这样的布局我们称为Widget树,并且在Widget之间存在这“父子”关系。其实Widget只是起到“描述”的作用,真正在屏幕上显示给用户看的UI是Element,Widget只是描述了Element的数据配置,Widget树的层级展现形式如下:

image

如果一个Widget存在子Widget,那么上一层的Widget就是父Widget,父Widget里面的则是子Widget。在实际开发中,我们会遇到复杂的布局情况,这个时候,不妨记住这颗布局树,回想一下,就会清晰了。


Context


做过Java开发的,应该清楚这个Context,因为用的最多,就是上下文的意思。Context对应的是,构建Widget树结构中具体某一个Widget的位置引用,并且它被视为Widget一部分,而每个Context只对应一个Widget。如果一个Context对应的是父Widget A,则Widget A对应的Context也包含了子Widget的Context。通过Context可以遍历和查找当前Widget树,Context之间也是关联在一起的,它们组成一颗Context树。


StatelessWidget


StatelessWidget即无状态的Widget,它无法通过setState设置组件的状态,其写法通过继承StatelessWidget,然后重写build函数来实现。对于其内部属性,应该声明为final,以防止被意外改变,例如:

class MyStatelessWidget extends StatelessWidget{
    MyStatelessWidget({
  Key key;
  this.parameter,
    }):super(key:key);
    final parameter;
    @override
    Widget build(BuildContext context){
  return new ....
    }
}


上面的代码中parameter参数只能传递一次,之后就无法被修改了。它的生命周期非常简单,就两部:1.初始化,2.通过build进行渲染。


StatefulWidget


StatefulWidget是有状态的Widget。当我们创建一个StatefulWidget组件时,它同时也创建了一个State对象,并且StatefulWidget通过与State关联可以达到刷新UI的目的。我们看一下官方的一个图示:

image

和React/Vue中的Reactive思想相似,但是还是有区别的,StatefulWidget只需要调用setState(…)方法,而不需要调用类似Android里的textView.setText(…)方法。某些组件在其生命周期里,内部数据会发生变化,基于这种情况,我们应该考虑使用StatefulWidget。


StatefulWidget的组成


StatefulWidget由两部分组成,第一部分为主体部分,代码如下所示:

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}


在主体部分里Widget继承了StatefulWidget的内容。在主体部分中创建的变量是无法变更的,第二部分代码如下:

class _MyHomePageState extends State<MyHomePage> {
    @override
  Widget build(BuildContext context) {
    ..........
  }
}


MyHomePageState前面以""开头,证明这个类为私有,可以通过widget.{name of the variable}格式访问第一部分里定义的变量,比如widget.title。


State


State是对StatefulWidget的行为和布局的描述,和StatefulWidget存在一一对应的关系。有时候StatefulWidget的组件需要改变其界面的表现形式,这个时候就可以通过setState(…)来改变。Flutter为我们做的服务功能非常全面,改变的过程只需要由Framework层控制,从而达到更新UI的目的。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Flutter(八)——状态管理(二)
Flutter(八)——状态管理(二)
0 0
Flutter | 关于状态管理,别再被吓着了
本篇是带大家了解并明白 Flutter 中状态管理相关,着眼与实际应用与通俗(说人话)解释,杜绝概念连篇 ❎ 。
0 0
Flutter 状态管理 Provider 快速指南【Flutter 专题 8】
Flutter 状态管理 Provider 快速指南 前面给大家讲了 http,dio,已经可以和后端交互了,还讲了动画等知识也可以做简单的界面了接下来就和大家一起了解状态管理
0 0
Flutter 状态管理概述【Flutter 专题 7】
Flutter 状态管理:概述 状态管理是 UI 框架必须实现的关键特性之一并且实现得很好。正是出于这个原因,许多开发人员已经开始构建专用的状态管理库;内置的解决方案对他们来说还不够,或者他们想根据自己的口味进行调整。
0 0
Flutter如何状态管理
Flutter如何状态管理
0 0
Flutter 88: 初识状态管理 Bloc (三)
0 基础学习 Flutter,第八十八步:简单了解 FlutterBloc 聚合方式状态管理 (三)!
593 0
Flutter 87: 初识状态管理 Bloc (二)
0 基础学习 Flutter,第八十七步:简单了解 FlutterBloc 状态管理 (二)!
253 0
Flutter 86: 初识状态管理 Bloc (一)
0 基础学习 Flutter,第八十六步:简单了解 Bloc 状态管理 (一)!
1156 0
Flutter如何调试应用【Dart Observatory 】以及调试模式断言
Flutter如何调试应用【Dart Observatory 】以及调试模式断言
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Flutter企业级应用开发实战手册
立即下载
Flutter技术解析与实战
立即下载
Flutter in action
立即下载