Flutter【01】状态管理

声明式编程

Flutter 应用是 声明式 的,这也就意味着 Flutter 构建的用户界面就是应用的当前状态。

当你的 Flutter 应用的状态发生改变时(例如,用户在设置界面中点击了一个开关选项)你改变了状态,这将会触发用户界面的重绘。去改变用户界面本身是没有必要的(例如 widget.setText )—你改变了状态,那么用户界面将重新构建。

将开发者的重点,从UI展示转移到state的维护上。

状态

概念

“当任何时候你需要重建你的用户界面时你所需要的数据”

广义上来讲,一个应用的状态就是当这个应用运行时存在于内存中的所有内容。这包括了应用中用到的资源,所有 Flutter 框架中有关用户界面、动画状态、纹理、字体以及其他等等的变量

你需要自己 管理 的状态可以分为两种概念类型:短时 (ephemeral) 状态和应用 (app) 状态。

短时状态

短时状态(有时也称UI 状态或者 局部状态)是你可以完全包含在一个独立 widget 中的状态。

例如

  • 一个复杂动画中当前进度

widget 树中其他部分不需要访问这种状态。不需要去序列化这种状态,这种状态也不会以复杂的方式改变。

换句话说,不需要使用状态管理架构(例如 ScopedModel, Redux)去管理这种状态。你需要用的只是一个 StatefulWidget

应用状态

如果你想在你的应用中的多个部分之间共享一个非短时的状态,并且在用户会话期间保留这个状态,我们称之为应用状态(有时也称共享状态)。

应用状态的一些例子:

  • 用户选项

  • 登录信息

  • 一个社交应用中的通知

  • 一个电商应用中的购物车

  • 一个新闻应用中的文章已读/未读状态

为了管理应用状态,你需要选择不同的状态管理架构。选择的标准取决于应用的复杂度和限制。

如何划分两种状态

需要说明的是,你 可以 使用 StatesetState() 管理你的应用中的所有状态。实际上Flutter团队在很多简单的示例程序(包括你每次使用 flutter create 命令创建的初始应用)中正是这么做的。

没有一个明确、普遍的规则来区分一个变量属于短时状态还是应用状态,有时你不得不在此之间重构。比如,刚开始你认为一些状态是短时状态,但随着应用不断增加功能,有些状态需要被改变为应用状态。

因此,请有保留地遵循以下这张流程图:

A flow chart. Start with 'Data'. 'Who needs it?'. Three options: 'Most widgets', 'Some widgets' and 'Single widget'. The first two options both lead to 'App state'. The 'Single widget' option leads to 'Ephemeral state'.

“经验原则是: 选择能够减少麻烦的方式”

总之,在任何 Flutter 应用中都存在两种概念类型的状态,短时状态经常被用于一个单独 widget 的本地状态,通常使用 StatesetState() 来实现。其他的是你的应用状态,在任何一个 Flutter 应用中这两种状态都有自己的位置。如何划分这两种状态取决于你的偏好以及应用的复杂度。

状态管理

基本概念

状态管理主要解决以下问题:

  • 帮助我们清晰快速的维护状态

  • 跨组件状态共享

  • 帮助我们实现不同的架构,MVC/MVP/MVVM等,实现高内聚,低耦合

随着产品迭代节奏速度的加快,项目逐渐变得越来越庞大,不同组件之间的数据依赖性越来越高,我们就需要更清晰、明确的处理各个组件之间的数据关系,这时候如果还单单使用setState做状态处理,我们就很难明确的处理数据的流向,最终可能会导致数据传递和嵌套逻辑过于复杂,不便于维护和管理,在出现问题的时候,也会花费大量的时间成本来捋清数据之间的关系。

总的来说,对于跨组件(跨页面)之间进行数据共享和传递,而且需要保持状态的一致性和可维护性,这就需要我们对状态进行管理。

Flutter自带的状态管理

setState

常用而且使用最频繁的一个状态管理方式,它必须结合StatefulWidget一起使用。

setState 仅在本地范围内有效,如果一个 Widget 需要改变它自己的状态,那么 setState 就是你最好的选择。

InheritedWidget

当InheritedWidget数据发生变化时,可以自动更新依赖的子组件。

利用这个特性,我们可以将需要跨组件共享的状态保存在InheritedWidget中,然后在子组件中引用InheritedWidget中的数据即可。

代码示例:

import 'package:flutter/material.dart';class ShareDataWidget extends InheritedWidget {ShareDataWidget({Key? key,required this.data,required Widget child,}) : super(key: key, child: child);final int data; //需要在子树中共享的数据,保存点击次数//定义一个便捷方法,方便子树中的widget获取共享数据static ShareDataWidget? of(BuildContext context) {return context.dependOnInheritedWidgetOfExactType<ShareDataWidget>();}//该回调决定当data发生变化时,是否通知子树中依赖data的Widget重新build@overridebool updateShouldNotify(ShareDataWidget old) {return old.data != data;}
}class InheritedWidgetTestRoute extends StatefulWidget {@override_InheritedWidgetTestRouteState createState() => _InheritedWidgetTestRouteState();
}class _InheritedWidgetTestRouteState extends State<InheritedWidgetTestRoute> {int count = 0;@override //下文会详细介绍。void didChangeDependencies() {super.didChangeDependencies();//父或祖先widget中的InheritedWidget改变(updateShouldNotify返回true)时会被调用。//如果build中没有依赖InheritedWidget,则此回调不会被调用。print("Dependencies change");}@overrideWidget build(BuildContext context) {return Center(child: ShareDataWidget(//使用ShareDataWidgetdata: count,child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Padding(padding: const EdgeInsets.only(bottom: 20.0),child: TestWidget(), //子widget中依赖ShareDataWidget),ElevatedButton(child: Text("Increment"),//每点击一次,将count自增,然后重新build,ShareDataWidget的data将被更新onPressed: () => setState(() => ++count),)],),),);}
}class TestWidget extends StatefulWidget {@override_TestWidgetState createState() => _TestWidgetState();
}class _TestWidgetState extends State<TestWidget> {@overrideWidget build(BuildContext context) {//使用InheritedWidget中的共享数据return Text(ShareDataWidget.of(context)?.data.toString() ?? "123131");}@override //下文会详细介绍。void didChangeDependencies() {super.didChangeDependencies();//父或祖先widget中的InheritedWidget改变(updateShouldNotify返回true)时会被调用。//如果build中没有依赖InheritedWidget,则此回调不会被调用。print("Dependencies change");}
}

MOBX

概念

MobX unidirectional flow

MobX 区分了以下几个应用中的概念:

State(状态)

状态 是驱动应用的数据。 通常有像待办事项列表这样的领域特定状态,还有像当前已选元素的视图状态。 记住,状态就像是有数据的excel表格。

Derivations(衍生)

任何 源自状态并且不会再有任何进一步的相互作用的东西就是衍生。 衍生以多种形式存在:

  • 用户界面
  • 衍生数据,比如剩下的待办事项的数量。
  • 后端集成,比如把变化发送到服务器端。

MobX 区分了两种类型的衍生:

  • Computed values(计算值) - 它们是永远可以使用纯函数(pure function)从当前可观察状态中衍生出的值。
  • Reactions(反应) - Reactions 是当状态改变时需要自动发生的副作用。需要有一个桥梁来连接命令式编程(imperative programming)和响应式编程(reactive programming)。或者说得更明确一些,它们最终都需要实现I / O 操作。

刚开始使用 MobX 时,人们倾向于频繁的使用 reactions。 黄金法则: 如果你想创建一个基于当前状态的值时,请使用 computed

回到excel表格这个比喻中来,公式是计算值的衍生。但对于用户来说,能看到屏幕给出的反应则需要部分重绘GUI。

Actions(动作)

动作 是任一一段可以改变状态的代码。用户事件、后端数据推送、预定事件、等等。 动作类似于用户在excel单元格中输入一个新的值。

在 MobX 中可以显式地定义动作,它可以帮你把代码组织的更清晰。 如果是在严格模式下使用 MobX的话,MobX 会强制只有在动作之中才可以修改状态。

原则

MobX 支持单向数据流,也就是动作改变状态,而状态的改变会更新所有受影响的视图

Action, State, View

状态改变时,所有衍生都会进行原子级的自动更新。因此永远不可能观察到中间值。

所有衍生默认都是同步更新。这意味着例如动作可以在改变状态之后直接可以安全地检查计算值。

计算值延迟更新的。任何不在使用状态的计算值将不会更新,直到需要它进行副作用(I / O)操作时。 如果视图不再使用,那么它会自动被垃圾回收。

所有的计算值都应该是纯净的。它们不应该用来改变状态

基本用法

  1. 使用Observer包裹需要刷新的UI组件。

  2. 创建可观察的model

  3. 使用命令自动生成.g文件

    flutter pub run build_runner build
    

示例代码

mobx的基本使用

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobx/mobx.dart';
import 'utils/mobx_extension.dart';
import 'mobx_extension_demo.dart';class CounterSimple extends StatefulWidget {const CounterSimple({Key? key}) : super(key: key);CounterSimpleState createState() => CounterSimpleState();
}class CounterSimpleState extends State<CounterSimple> {final Counter counter = Counter();MobxBean mobxBean = MobxBean();void initState() {super.initState();mobxBean.count.listen(funcListen);}void funcListen(value) {print("listen1 newValue $value");}void dispose() {mobxBean.count.removeListen();super.dispose();}Widget build(BuildContext context) => Scaffold(appBar: AppBar(backgroundColor: Colors.blue,title: const Text('MobX Counter'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('You have pushed the button this many times:',),Observer(builder: (_) => Text(// '${mobxBean.count.value}','${counter.value}',style: const TextStyle(fontSize: 40),)),],),),floatingActionButton: FloatingActionButton(onPressed: () {counter.increment();//simple demo// mobxBean.count.set(mobxBean.count.value + 1);// Navigator.push(context, PageRouteBuilder<dynamic>(pageBuilder: (context, animation, secondaryAnimation) => CounterSimpleExample()));//mvvm demo},tooltip: 'Increment',child: const Icon(Icons.add),),);
}
// GENERATED CODE - DO NOT MODIFY BY HAND// **************************************************************************
// StoreGenerator
// **************************************************************************// ignore_for_file: non_constant_identifier_names, unnecessary_brace_in_string_interps, unnecessary_lambdas, prefer_expression_function_bodies, lines_longer_than_80_chars, avoid_as, avoid_annotating_with_dynamicmixin _$Counter on _Counter, Store {final _$valueAtom = Atom(name: '_Counter.value');int get value {_$valueAtom.reportRead();return super.value;}set value(int value) {_$valueAtom.reportWrite(value, super.value, () {super.value = value;});}final _$_CounterActionController = ActionController(name: '_Counter');void increment() {final _$actionInfo = _$_CounterActionController.startAction(name: '_Counter.increment');try {return super.increment();} finally {_$_CounterActionController.endAction(_$actionInfo);}}String toString() {return '''
value: ${value}''';}
}class Counter = _Counter with _$Counter;abstract class _Counter with Store {int value = 0;void increment() {value++;}
}

依赖:

dependencies:flutter:sdk: flutter# The following adds the Cupertino Icons font to your application.# Use with the CupertinoIcons class for iOS style icons.cupertino_icons: ^1.0.2mobx: ^2.0.6+1flutter_mobx: ^2.0.4dev_dependencies:flutter_test:sdk: flutterbuild_runner: ^2.1.0mobx_codegen: ^2.0.0

mobx的封装

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'utils/mobx_extension.dart';
import 'package:mobx/mobx.dart';class CounterExtension extends StatefulWidget {const CounterExtension({Key? key}) : super(key: key);CounterExtensionState createState() => CounterExtensionState();
}class CounterExtensionState extends State<CounterExtension> {MobxBean mobxBean = MobxBean();void initState() {super.initState();mobxBean.count.listen(funcListen);}void funcListen(value) {print("listen2 newValue $value");}void dispose() {mobxBean.count.removeListen();super.dispose();}Widget build(BuildContext context) => Scaffold(appBar: AppBar(backgroundColor: Colors.blue,title: const Text('MobX Counter'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('You have pushed the button this many times:',),Observer(builder: (_) => Text('${mobxBean.count.value}',style: const TextStyle(fontSize: 40),)),],),),floatingActionButton: FloatingActionButton(onPressed: () {mobxBean.count.set(mobxBean.count.value + 1);},tooltip: 'Increment',child: const Icon(Icons.add),),);
}class MobxBean {static final MobxBean _mobxBean = MobxBean._internal();factory MobxBean() {return _mobxBean;}MobxBean._internal();Observable<int> count = Observable(0);
}
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobx/mobx.dart';typedef MobxListenFunc = dynamic Function(dynamic value);extension MobxObserverExtension<T> on Observable<T> {static late ReactionDisposer listenFunc;void set(T data) {ActionController controller = ActionController();final runInfo = controller.startAction();this.value = data;controller.endAction(runInfo);}void listen(MobxListenFunc mobxListenFunc) {listenFunc = reaction((_) => value, (newValue) => mobxListenFunc(newValue));}void removeListen() => listenFunc.call();
}

基于mobx实现mvvm

import 'package:mobx/mobx.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'utils/mobx_extension.dart';class CounterMvvm extends StatefulWidget {const CounterMvvm({Key? key}) : super(key: key);CounterMvvmState createState() => CounterMvvmState();
}class CounterMvvmState extends State<CounterMvvm> {MobxViewModel _mobxViewModel = MobxViewModel();void initState() {super.initState();_mobxViewModel.registerCountListen();}void dispose() {super.dispose();_mobxViewModel.unregisterCountListen();}Widget build(BuildContext context) => Scaffold(appBar: AppBar(backgroundColor: Colors.blue,title: const Text('MobX Counter'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('You have pushed the button this many times:',),Observer(builder: (_) => Text('${_mobxViewModel.count.value}',style: const TextStyle(fontSize: 40),)),],),),floatingActionButton: FloatingActionButton(onPressed: _mobxViewModel.countIncrement,tooltip: 'Increment',child: const Icon(Icons.add),),);
}class MobxViewModel {static final MobxViewModel _mobxViewModel = MobxViewModel._internal();factory MobxViewModel() {return _mobxViewModel;}MobxViewModel._internal();Observable<int> count = Observable(0);void countListen(value) {print("listen2 newValue $value");}void registerCountListen() {count.listen(countListen);}void unregisterCountListen() {count.removeListen();}void countIncrement() {count.set(count.value + 1);}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/405207.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

25届科大讯飞飞星计划 AI研究算法工程师 面经

目录 一面/技术面 2024/08/15 &#x1f4cb; 总结&#xff1a; 本来应该是在7月底面试的&#xff0c;但因为有事就拖到了现在&#xff0c;或许是飞星计划里最晚面试的一批&#xff1f;面试官很和蔼&#xff0c;问的问题不算难&#xff0c;总体体验还算不错。 一面/技术面 2024/…

洛谷B3981题解

题目描述 &#xff08;你不需要看懂这张图片&#xff1b;但如果你看懂了&#xff0c;会觉得它很有趣。&#xff09; JavaScript 是一种功能强大且灵活的编程语言&#xff0c;也是现代 Web 开发的三大支柱之一 (另外两个是 HTML 和 CSS)。灵活的 JavaScript 包含“自动类型转换…

Python 数据分析之Numpy学习(一)

Python 数据分析之Numpy学习&#xff08;一&#xff09; 一、Numpy的引入 1.1 矩阵/向量的按位运算 需求&#xff1a;矩阵的按位相加 [0,1,4] [0,1,8] [0,2,12] 1.1.1 利用python实现矩阵/向量的按位运算 # 1.通过列表实现 list1 [0, 1, 4] list2 [0, 1, 8]# 列表使用…

【Linux网络】select函数

欢迎来到 破晓的历程的 博客 ⛺️不负时光&#xff0c;不负己✈️ 文章目录 select函数介绍select函数参数介绍select函数返回值select的工作流程TCP服务器【多路复用版】 select函数介绍 在Linux网络编程中&#xff0c;select 函数是一种非常有用的IO多路复用技术&#xff0…

基于Java和GeoTools的Shapefile矢量数据缩略图生成实践

目录 前言 一、关于GeoTools的图片生成 1、关于GtRenderer 2、关于 图像生成架构 3、流式计算绘制 二、全球空间预览生成实战 1、pom.xml中关于图像生成依赖 2、样式设置及地图资源绑定 3、图片生成绘制 4、图片生成测试 三、成果验证 1、全球范围生成 2、我国的范…

redis随笔记

缓存穿透。key不存在。恶意攻击、代码问题。加布隆过滤器&#xff0c;或者为空就返回。 缓存失效&#xff08;击穿&#xff09;。key刚好过期。缓存时间随机数。 缓存雪崩。缓存层宕机&#xff0c;一下子袭击数据库。缓存高可用、限流熔断、提前演练。 布隆过滤器就是一个key…

Python版《超级玛丽+源码》-Python制作超级玛丽游戏

小时候最喜欢玩的小游戏就是超级玛丽了&#xff0c;有刺激有又技巧&#xff0c;通关真的很难&#xff0c;救下小公主还被抓走了&#xff0c;唉&#xff0c;心累&#xff0c;最后还是硬着头皮继续闯&#xff0c;终于要通关了&#xff0c;之后再玩还是没有那么容易&#xff0c;哈…

从并发20到并发120之laravel性能优化

调优成果 遇到问题 单台服务并发20&#xff0c;平均响应时间1124ms&#xff0c;通过htop观察&#xff0c;发现cpu占用率达到100%&#xff08;包括sleep的进程&#xff09;&#xff0c;内存几乎没怎么用。 调优后 单机最大吞吐量达到120 响应时长不超过1000ms 硬件信息 …

EfficientFormer 系列算法

1. EfficientFormer V1 模型 论文地址&#xff1a;https://proceedings.neurips.cc/paper_files/paper/2022/file/5452ad8ee6ea6e7dc41db1cbd31ba0b8-Paper-Conference.pdf EfficientFormer V1 基于 ViT 的模型中使用的网络架构和具体的算子&#xff0c;找到端侧低效的原因。然…

高性能web服务器nginx

目录 nginx简介 服务端 I/O 流程 Nginx 进程结构 Nginx启动流程 nginx的源码编译下载 nginx命令常见参数 nginx的配置文件详解 全局配置优化 nginx的平滑升级和回滚 nginx目录匹配优先级测试&#xff08;因为只支持访问文件&#xff0c;所有不比对匹配目录优先级&…

五、2 移位操作符赋值操作符

1、移位操作符 2、赋值操作符 “ ”赋值&#xff0c;“ ”判断是否相等 1&#xff09;连续赋值 2&#xff09;复合赋值符

C ++初阶:类和对象(上)

目录 &#x1f31e;0.前言 1. 面向过程和面向对象初步认识 2..类的引入与定义 2.1类的引入 2.2类的定义 3.类的访问限定符及其封装 3.1访问限定符 3.2封装 4.类的作用域 4.1加餐和发现 5.类的实例化 6.类对象大小的计算 6.1.内部的存储方式 6.2结构体对齐规则回顾…

一、什么是 mvvm? MVC、MVP、MVVM三种模式的区别与详解

简介 MVC、MVP、MVVM都是常见的软件架构模式。 MVC&#xff08;Model-View-Controller&#xff09;架构模式中&#xff0c;将应用程序分为三个主要部分&#xff1a;模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;和控制器&#xff08;Controller&…

STM32自制手持小风扇实验

1.1 介绍&#xff1a; 实验功能说明&#xff1a;功能&#xff08;1&#xff09;按一下按键小风扇开启&#xff0c;再按一下关闭。 功能&#xff08;2&#xff09;按一下按键小风扇一档风速&#xff0c;再按一下二挡&#xff0c;依次三挡…关闭。 按键模块说明&#xff1a;按下…

什么是AR、VR、MR、XR?

时代背景 近年来随着计算机图形学、显示技术等的发展&#xff0c;视觉虚拟化技术得到了广泛的发展&#xff0c;并且越来越普及化&#xff0c;慢慢的也走入人们的视野。目前市场上视觉虚拟化技术的主流分为这几种 VR、AR、MR、XR。这几项技术并不是最近才出现的&#xff0c;VR的…

路由器VLAN配置(H3C)

路由器VLAN配置&#xff08;H3C&#xff09; 控制页面访问 路由器默认处于192.168.1.1网段&#xff08;可以短按reset重置&#xff09;&#xff0c;如果要直接使用需要设置静态IP处于同一网段&#xff1b; 对路由器进行配置也要将电脑IP手动设置为同一网段&#xff1b; 默…

执行rasa shell 遇到asyncio.exceptions.TimeoutError报错

在《树莓派3B运行rasa init和rasa shell遇到的tensorflow报错总结》一文中&#xff0c;我遇到的第7个报错是首次运行rasa shell时候碰到的。按照我在文中记录的解决方案&#xff0c;处理成功。 结果&#xff0c;今天我又一次遇到了asyncio - Task exception was never retrie…

91. 解码方法 -dp4

. - 力扣&#xff08;LeetCode&#xff09;. - 备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/decode-ways/description/ 示例 1&#xff1a; 输入&#xff1a;s &…

「字符串」前缀函数|KMP匹配:规范化next数组 / LeetCode 28(C++)

概述 为什么大家总觉得KMP难&#xff1f;难的根本就不是这个算法本身。 在互联网上你可以见到八十种KMP算法的next数组定义和模式串回滚策略&#xff0c;把一切都懂得特别混乱。很多时候初学者的难点根本不在于这个算法本身&#xff0c;而是它令人痛苦的百花齐放的定义。 有…