首页 > 其他分享 >第145期:Flutter中的状态

第145期:Flutter中的状态

时间:2022-12-31 10:32:06浏览次数:35  
标签:状态 145 管理 index Flutter 需要 应用 我们

封面图

第145期:Flutter中的状态_Vue

窗外是一所小学,这两天那座教学楼的墙上多了个校训,我总是把【脚踏实地】看成【实训基地】~

状态管理

对于经常写​​Vue​​​和​​React​​项目的同学来说,状态管理这个名词并不陌生。同样,在我们开发Flutter应用的时候,我们也需要对状态进行管理。

比如:我们的Flutter应用有两个页面需要共享一个数据,或者父子组件之间需要相互调用之类,我们都可以通过状态管理来处理这些个情况。

声明式的应用

Flutter其实是声明式的。这意味着Flutter会根据我们声明的状态实时的调整UI的布局。这其实跟​​Vue​​​和​​React​​很像。

当我们改变了应用的状态,就会触发界面的重绘。我们并没有主动去触发界面UI的变更,就像我们在​​Vue​​中没有手动触发html的更新一样,更新了状态,界面就会跟着改变,重新进行绘制。

声明式的代码编写有很多优点,我们只需要在一个地方定义好状态,通过状态来控制UI的展示,只需要定义好状态数据和UI界面的对应关系即可。

应用状态 和 临时状态

从广义上来说,应用状态包括了应用程序运行时内存中所有的状态。这些状态包括:应用的资源、所有的变量、动画的状态、字体等等。

虽然广义上的状态我们是可以理解的,但是这在我们开发应用程序时,作用并不大。

首先,有些状态我们其实是不需要进行处理的,框架本身会对它们进行管理。所以,我们定义状态时,只需要定义跟UI更新相关的状态即可。其次,我们管理自己定义的状态时,这些状态其实是分为​​应用状态​​​ 和 ​​临时状态​​的。

​临时状态​​(有时称为UI状态或本地状态)是我们定义在单个组件中的状态。这其实也是一个比较模糊的定义,比如:

  • ​​PageView​​中的​​current page​
  • 复杂动画中的当前进度
  • ​BottomNavigationBar​​中当前选中的tab

组件树的其他部分基本上不需要访问这些状态,也不需要进行序列化操作,基本上也不会有复杂的变化。

换句话说,我们不需要用状态管理相关的技术(比如Redux等)对这些状态进行管理,我们只需要用一个​​StatefulWidget​​就可以解决问题。

下面这个例子中,​​_index​​就是一个临时状态:

class MyHomepage extends StatefulWidget {
const MyHomepage({super.key});

@override
State<MyHomepage> createState() => _MyHomepageState();
}

class _MyHomepageState extends State<MyHomepage> {
int _index = 0;

@override
Widget build(BuildContext context) {
return BottomNavigationBar(
currentIndex: _index,
onTap: (newIndex) {
setState(() {
_index = newIndex;
});
},
// ... items ...
);
}
}

程序的其他部分不需要访问​​_index​​​变量,​​_index​​​只在​​MyHomepage​​​中进行更改。而且,如果用户关闭并重新启动应用程序,​​_index​​将重置为零。

我们希望在应用程序的许多部分共享,并且希望在用户会话之间保持,这种状态就是我们所说的的应用状态(有时也称为共享状态)。比如:

  • 登录信息
  • 社交网络应用程序中的通知
  • 电子商务应用程序中的购物车
  • 新闻应用程序中文章的已读/未读状态

对于如何管理应用状态,我们需要研究我们具体的需求。根据所开发应用程序的复杂性、性质、团队以往的经验以及许多其他方面,选择合适的方案进行状态的管理。

如何管理状态

对于如何进行状态的管理,其实并没有一个明确的规则。

我们可以使用​​State​​​和​​setState()​​来管理应用中的所有状态。但是,有时候随着应用程序规模的不断扩展,有些临时状态就需要在组件之间,或者各种会话之间进行保持,这时候就需要我们选择合适的方案进行处理。

这个关系图可以帮助我们理解这个逻辑:

第145期:Flutter中的状态_UI_02

单个组件需要这个状态时,就可以理解它是临时状态。多个组件需要共享这个状态时,它就可以理解为应用状态。

最后

在Flutter的状态管理中,有很多概念我觉得和​​React​​​以及​​Vue​​中的状态管理基本上都是一个道理。

比如:也存在状态提升,都可以用​​setState()​​​以及​​Provider​​进行管理等等。

最后,这篇文章没有什么实质性的技术点,主要是对状态的概念做一个简单的阐述~

谢谢~

最后一天打榜,如果你刚好有时间,不妨帮我投个票~

谢谢了~

​​掘金2022年度人气创作者打榜中,快来帮我打榜吧~​​

标签:状态,145,管理,index,Flutter,需要,应用,我们
From: https://blog.51cto.com/u_15531399/5982006

相关文章

  • 第143期:flutter中的资源和图片
    封面图下个季度的目标是把前端监控相关的内容梳理出来,梳理出来之后可能会在公司内部做个分享~Flutter应用程序既括代码也包括一些其他的资产,我们通常这些资产为资源。有时候......
  • 第142期:flutter的状态组件和状态管理
    封面图我们在看电影的时候,往往只关注某个主演的角色,其实那些小角色的表演,远远比主演角色的表演要丰富~场景怎样才能在我们的flutter应用中对用户输入做出响应?比如我们有个图......
  • Zabbix监控Nginx性能状态
    Zabbix监控Nginx性能状态Nginx在生产环境中的应用越来越广泛,所以需要对nginx的性能状态做一些监控,从而发现故障隐患,Ngnx的监控指标可分为:基本活动指标,错误指标,性能指标。需......
  • Zabbix监控Redis性能状态
    Zabbix监控Redis性能状态监控原理示意图:监控原理Zabbix-server通过agent监控中配置文件调用shell脚本。Redis中提供redis-cli命令使用info可以获得redis大部分信息。在使用......
  • Zabbix监控MongoDB性能状态
    Zabbix监控MongoDB性能的原理:通过echo"db.serverStatus()"|mongoadmin来查看mongodb的状态。Zabbix监控MongoDB性能,主要监控以下项目:-内存使用情况-连接数-锁-刷新......
  • Flutter异常监控 - 贰 | 框架Catcher原理分析
    前言在给Flutter应用做异常监控的时候,一开始我是拒绝滴,如果不考虑FlutterEngine和native侧的监控,用我另一篇文章中不得不知道的Flutter异常捕获知识点提到的方......
  • 2、任务状态理论和实验
    一、任务状态理论:1、running2、ready3、blocked:阻塞,等待某件事情发生4、suspended:暂停(主动休息、被动休息)   纠正:应该是让任务3进入ready状态。   调用......
  • 为有状态应用而生,云原生本地存储Carina正式进入CNCF沙箱
    12月14日,云原生本地存储开源项目 Carina 通过了全球顶级开源基金会 CNCF技术监督委员会(TOC)的评定,正式成为CNCF沙箱级项目(SandboxProjects)。Carina是由博云于2021年10......
  • http状态码
    一、什么是状态码HTTP状态码(HTTPStatusCode)是用以表示网页服务器HTTP响应状态的3位数字代码。它由RFC2616规范定义的,并得到RFC2518、RFC2817、RFC2295、RFC2774、......
  • apache cv2.xxx(imread)方法一直挂起,处于堵塞状态,无法正常进行,
    flask项目中调用cv2.imread(),在flaskrun运行时一切正常,但是把flask项目部署到apache后cv2.imread()方法一直挂起,无法执行,导致处于堵塞状态,后来在网上查询解决,在httpd.conf......