Flutter 状态管理的实现
作者:叫我丶华仔 发布时间:2023-08-21 02:38:33
一、什么是状态管理
大到整个app的状态,用户使用app是登录状态,还是游客状态;小到一个按钮的状态,按钮是点击选中状态还是未点击状态等等,这些都是状态管理。
二、命令式编程和声明式编程状态管理的区别
iOS是如何管理状态的,一般都是获取这个控件然后设置你想要的状态 当你的 Flutter 应用的状态发生改变时(例如,用户在设置界面中点击了一个开关选项)你改变了状态,这将会触发用户界面的重绘。去改变用户界面本身是没有必要的(例如 widget.setText )—你改变了状态,那么用户界面将重新构建。
三、状态管理中的声明式编程思维
Flutter 应用是 声明式 的,这也就意味着 Flutter 构建的用户界面就是应用的当前状态。
一旦你的界面状态发生改变,就会触发界面的重新绘制,绘制出你想要的界面,而不是像iOS的OC语言那样去获取需要改变状态的控件,然后修改它
四、短时 (ephemeral) 和应用 (app) 状态的区别
Flutter中的状态管理又分为短时状态和应用状态。
短时状态,就是在单个页面需要保持的状态,比如页面数据加载到了第几页,关注按钮是已关注还是未关注等,都是在单个页面需要保持的状态。widget树中其他部分不需要访问这种状态。不需要去序列化这种状态,这种状态也不会以复杂的方式改变。换句话说,不需要使用状态管理架构(例如 ScopedModel, Redux)去管理这种状态。你需要用的只是一个 StatefulWidget。
在下方你可以看到一个底部导航栏中当前被选中的项目是如何被被保存在 _MyHomepageState 类的 _index 变量中。在这个例子中,_index 是一个短时状态。
class MyHomepage extends StatefulWidget {
@override
_MyHomepageState 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 ...
);
}
}
在这里,使用 setState() 和一个变量就能达到管理状态的目的。你的 app 中的其他部分不需要访问 _index。这个变量只会在 MyHomepage widget 中改变。而且,如果用户关闭并重启这个 app,_index会被重置而不会继续保持原来的状态。
应用状态,如果你想在你的应用中的多个部分之间共享一个非短时的状态,并且在用户会话期间保留这个状态,我们称之为应用状态(有时也称共享状态)。 应用状态的一些例子:
1、用户选项
2、登录信息
3、一个社交应用中的通知
4、一个电商应用中的购物车
5、一个新闻应用中的文章已读/未读状态
五、共享状态管理
在 Flutter 中,一般是将存储状态的对象置于 widget 树中对应 widget 的上层,当它发生改变的时候,它对应的widget会从上层开始重构。因为这个机制,所以 widget 无需考虑生命周期的问题—它只需要针对 上层存储数据的对象 声明所需显示内容即可。当内容发生改变的时候,旧的 widget 就会消失,完全被新的 widget 替代。 Flutter原生提供了两个方法来管理共享状态:
5.1 --InheritedWidget
class ADCounterWidget extends InheritedWidget {
// 1. 共享的数据
final int counter;
// 2. 定义构造方法
ADCounterWidget({this.counter, Widget child}): super(child: child);
// 3. 找到当前Widget树中最近的InheritedWidget
static ADCounterWidget of(BuildContext context) {
// 沿着Element树, 去找到最近的ADCounterElement, 从Element中取出Widget对象
return context.dependOnInheritedWidgetOfExactType();
}
// 4. 要不要回调State中的didChangeDependencies方法
@override
bool updateShouldNotify(ADCounterWidget oldWidget) {
return oldWidget.counter != counter;
}
}
上面定义了一个of方法,该方法通过context开始去查找父级的HYDataWidget
updateShouldNotify方法是对比新旧HYDataWidget,是否需要对更新相关依赖的Widget
class HYHomePage extends StatefulWidget {
@override
_HYHomePageState createState() => _HYHomePageState();
}
class _HYHomePageState extends State<HYHomePage> {
int data = 100;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("InheritedWidget"),
),
body: HYDataWidget(
counter: data,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
HYShowData()
],
),
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
setState(() {
data++;
});
},
),
);
}
}
创建HYDataWidget,并且传入数据(这里点击按钮会修改数据,并且出发重新build)
5.2 --Provider
Provider库有三个主要用到的类:
ChangeNotifier:真正数据(状态)存放的地方
ChangeNotifierProvider:Widget树中提供数据(状态)的地方,会在其中创建对应的ChangeNotifier
Consumer:Widget树中需要使用数据(状态)的地方
第一步 在程序的最顶层创建自己的ChangeNotifier
将ChangeNotifierProvider放到了顶层,这样方便在整个应用的任何地方可以使用CounterProvider
在ChangeNotifier中创建一个私有的_counter,并且提供了getter和setter
在setter中我们监听到_counter的改变,就调用notifyListeners方法,通知所有的Consumer进行更新
void main() {
runApp(ChangeNotifierProvider(
create: (context) => CounterProvider(),
child: MyApp(),
));
}
class CounterProvider extends ChangeNotifier {
int _counter = 100;
intget counter {
return _counter;
}
set counter(int value) {
_counter = value;
notifyListeners();
}
}
第二步 在首页中使用Consumer引入和修改状态
在body中使用Consumer,Consumer需要传入一个builder回调函数,当数据发生变化时,就会通知依赖数据的Consumer重新调用builder方法来构建
在floatingActionButton中使用Consumer,当点击按钮时,修改CounterNotifier中的counter数据
class HYHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("列表测试"),
),
body: Center(
child: Consumer<CounterProvider>(
builder: (ctx, counterPro, child) {
return Text("当前计数:${counterPro.counter}", style: TextStyle(fontSize: 20, color: Colors.red),);
}
),
),
floatingActionButton: Consumer<CounterProvider>(
builder: (ctx, counterPro, child) {
return FloatingActionButton(
child: child,
onPressed: () {
counterPro.counter += 1;
},
);
},
child: Icon(Icons.add),
),
);
}
}
Consumer的builder方法有三个参数:
context,每个build方法都会有上下文,目的是知道当前树的位置
ChangeNotifier对应的实例,也是我们在builder函数中主要使用的对象
child,目的是进行优化,如果builder下面有一颗庞大的子树,当模型发生改变的时候,我们并不希望重新build这颗子树,那么就可以将这颗子树放到Consumer的child中,在这里直接引入即可(注意我案例中的Icon所放的位置)
第四步 创建一个新的页面,在新的页面中修改数据
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("第二个页面"),
),
floatingActionButton: Consumer<CounterProvider>(
builder: (ctx, counterPro, child) {
return FloatingActionButton(
child: child,
onPressed: () {
counterPro.counter += 1;
},
);
},
child: Icon(Icons.add),
),
);
}
}
来源:https://juejin.im/post/5ee31fd26fb9a047de53dc9d
猜你喜欢
- 因为支持csv,所以就一块写上了Workbook,Worksheet using Aspose.Cells(第三方)把Excel读取到属性对
- java.sql.Timestamp(时间戳)继承父类:java.util.Date所有已实现的接口:Serializable, Clone
- explicit 关键字用于显式声明一个类构造函数是显式而非隐式的,从而禁用类构造函数的隐式自动类型转换。类构造函数默认情况下即声
- 前言哈哈哈哈哈。。。。。。。。问题终于解决了,让我得瑟一会(吗卖批,折腾了两天)~~~如果你的Android Studio出现以下错误,那么
- 在 Windows 有一些字符是不能作为文件名,尝试重命名一个文件,输入/ 就可以看到windows 提示的不能作为文件名的字符那么具体是包
- ListView如何实现简单列表,供大家参考,具体内容如下效果图:啥也没干的ListView张这样:fry.Activity01packag
- 配置准备在build.gradle文件中添加如下依赖: compile "org.elasticsearc
- 由于机器内存坏了,换了个内存,重新安装了一个64位的Fedora16,把原来的32位的Fedora15格掉了。于是在重新安装Android
- Mybatis表现关联关系比hibernate简单,没有分那么细致one-to-many、many-to-one、one-to-one。而是
- Android Material Design:PopupMenuAndroid Material Design 引入的PopupMenu类
- 前言腾讯动漫app v8.1.6 工具:jadx、frida、pixel3 安卓10提示:以下是本篇文章正文内容,案例可供参考一、问题1.1
- 时间戳在游戏开发中虽然是一个比较小的功能?但是如果缺少这个功能就会导致开发遇到困难,为了帮助大家开发,下面就给大家介绍下将时间戳的使用方法,
- 本次教程将教大家如何用monkeyrunner进行android的自动化测试,包括环境的搭建、monkeyrunner和uiautomato
- Console.WriteLine("This is a Client, host name is {0}", Dns.
- Android Studio软件下载地址如下:下载:http://www.android-studio.org/index.php/down
- 使用版本:spring-boot: 2.1.6.RELEASEsping: 5.1.8.RELEASEjava: openjdk 11.0.
- 本文实例讲述了java实现将结果集封装到List中的方法。分享给大家供大家参考,具体如下:import java.sql.Connectio
- 本文实例讲述了Android开发之开关按钮用法。分享给大家供大家参考,具体如下:效果如下:以下是布局文件:<?xml version=
- 哈希表的分离链接法原理Hash Table可以看作是一种特殊的数组。他的原理基本上跟数组相同,给他一个数据,经过自己设置的哈希函数变换得到一
- 要实现摇一摇的功能,类似于微信的摇一摇方法1:通过分析加速计数据来判断是否进行了摇一摇操作(比较复杂)方法2:iOS自带的Shake监控AP