易县有没有z做网站的,宜宾建设局网站,云阳做网站,更新网站内容前言
像vue、react有对应的状态管理库#xff0c;比如#xff1a;pinia、Redux 。同样flutter中也有状态管理库#xff0c;但是flutter中的状态管理库很多#xff0c;对于像我这样的新手来说这很难选择。因此只好选择官方库——Provider
因为是第一次学习#xff0c;如果…前言
像vue、react有对应的状态管理库比如pinia、Redux 。同样flutter中也有状态管理库但是flutter中的状态管理库很多对于像我这样的新手来说这很难选择。因此只好选择官方库——Provider
因为是第一次学习如果有哪些地方理解的不正确麻烦指出。
参考
官方文档
Provider
简介
Provider是一个Flutter状态管理库它是基于InheritedWidget的简单、可扩展且易于使用的解决方案。它帮助开发者在Flutter应用程序中管理和共享状态以便于组件之间的通信和数据共享。
Provider的核心概念是Provider和Consumer。Provider是一个数据源它包含要共享的数据并将其提供给应用程序中的其他组件。Consumer是一个接收Provider数据的组件它会自动订阅Provider并在数据发生变化时进行更新。
使用Provider开发者可以避免在组件树中手动传递数据。相反它提供了一种便捷的方式来访问和更新共享数据。开发者只需要在应用程序的根部分创建一个Provider并在需要访问共享数据的组件中使用Consumer来获取数据。
Provider还提供了一些高级功能如多Provider的组合、跨组件的数据传递、数据变更通知、异步数据处理等。它还支持与其他状态管理库如Redux的集成以满足更复杂的应用程序需求。
这里的话我们只学习最基础的部分。高级功能等水平达到后再学习
基本使用
安装
flutter pub add provider我们以数字新增为例
1、创建一个状态管理类
首先需要创建一个状态管理类对于需要共享的状态进行统一管理
counter_state.dart
import package:flutter/cupertino.dart;// 创建状态管理类
class CounterState with ChangeNotifier {
// 要共享的状态int _count 0;// 获取状态int get count _count;// 修改状态的方法void increment() {_count;// 通知使用该状态的widgetnotifyListeners();}
}注意点
在Flutter项目中通常使用小写字母和下划线来命名源代码文件状态建议定义为私有类型变量前面加_不要直接修改状态使用混合模式而不是使用继承。避免继承关系的复杂性
2、创建顶层共享数据
//使用箭头函数简写
main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {//创建widget的唯一标识const MyApp({Key? key}) : super(key: key);//重写build方法overrideWidget build(BuildContext context) {// ChangeNotifierProvider 会返回一个 ChangeNotifier 对象它允许消费者在 CounterState 对象发生变化时收到通知。return ChangeNotifierProvider(// CounterState 对象会作为共享的状态实例被整个应用程序使用。create: (context) CounterState(),child: const MaterialApp(home: YcHomePage(),),);}
}或者
runApp(ChangeNotifierProvider(create: (context) CounterState(),child: const MyApp(),
));本质上是通过ChangeNotifierProvider来为最父级的widget来提供状态
3、在子页面中使用
//app的主页面
class YcHomePage extends StatelessWidget {const YcHomePage({Key? key}) : super(key: key);overrideWidget build(BuildContext context) {// 从上下文中获取类型为 CounterState 的对象final counter Provider.ofCounterState(context);return Scaffold(appBar: AppBar(title: const Text(Provider状态管理),),body: Center(child: Column(children: [// 调用get方法获取值Text(数值是${counter.count}),// 用于占位const SizedBox(height: 30,),ElevatedButton(onPressed: () {// 调用increment方法counter.increment();},child: const Text(加1))],)),);}
}注意点 避免产生副作用我们在build方法里通过 final counter Provider.ofCounterState(context);来获取实例。这里需要注意不要在build方法里执行一些操作比如数据请求。原因是调用Provider.ofT(context); 会重新运行其 build方法这会导致build里面的某些操作又被执行了一次。这就是副作用
解决方式是在initState方法里来执行这些操作initState 只会在初始化的时候被执行。
或者
class YcHomePage extends StatelessWidget {const YcHomePage({Key? key}) : super(key: key);overrideWidget build(BuildContext context) {// 掉接口获取数据或者其他的操作return Scaffold(appBar: AppBar(title: const Text(Provider状态管理),),body: Center(child: ConsumerCounterState(builder: (context,counterState,child){return Column(children: [// 调用get方法获取值Text(数值是${counterState.count}),// 用于占位const SizedBox(height: 30,),ElevatedButton(onPressed: () {// 调用increment方法counterState.increment();},child: const Text(加1))],);})));}
}这种方式是通过Consumer来创建一个消费者然后在builder函数中通过上下文参数context来获取CounterState对象。这样做的优点是可以直接在builder函数中访问CounterState对象并且可以在builder函数中进行一些额外的逻辑处理。
这种方式下在build里执行的操作不会在状态更新后再次执行。但是在builder中的话当状态更新后每次都会执行。这里可以自己使用print打印一下日志试试。
局部使用
局部使用与全局使用很相似假设有两个子组件需要共享某个状态这时你可以在这两个子组件的公共父组件上使用ChangeNotifierProvider来提供状态。
多个 Provider
如果需要共享的状态不多时使用一个状态管理类是没有问题的。但是当状态过多时都放在一个状态管理类里是不合适。这时应该建立不同的状态类来管理不同类别的状态。这时后可以结合MultiProvider
main() {runApp(MultiProvider(providers: [ChangeNotifierProviderCounterState(create: (context) CounterState()),// 其他的状态],child: const MyApp(),));
}关于获取到对应的状态实例你可以使用final counter Provider.ofCounterState(context);也可以使用 ConsumerCounterState(builder: (context, counterState, child) {} 唯一需要注意的是类型不要填写错误了。
其他类型的Provider
上面的例子中使用的都是ChangeNotifierProvider除了ChangeNotifierProvider还有其他的Provider
ListenableProvider
ListenableProvider是Flutter中的一种Provider用于将依赖项注入到需要监听列表数据变化的组件中。当依赖项发生变化时ListenableProvider会通知所有订阅者subscribers更新他们的UI。适合在需要监听列表数据变化的情况下使用例如在列表视图中显示动态数据时可以使用ListenableProvider来管理数据并提供数据变化的通知。
ChangeNotifierProvider
ChangeNotifierProvider是Dart语言中另一个用于实现依赖注入的Provider类它主要用于管理可变数据并提供数据变化的通知。当依赖项发生变化时ChangeNotifierProvider会通知所有订阅者subscribers更新他们的UI。适合在需要管理可变数据并提供数据变化通知的情况下使用例如在应用程序中管理用户设置或配置信息时可以使用ChangeNotifierProvider来提供数据变化通知并更新相关UI。
ValueListenableProvider
ValueListenableProvider是Flutter中的一种Provider类用于将依赖项注入到需要监听单个值变化或状态改变的组件中。当依赖项发生变化时ValueListenableProvider会通知所有订阅者subscribers更新他们的UI。适合在需要监听单个值或状态改变的情况下使用例如在应用程序中管理用户状态或设置时可以使用ValueListenableProvider来提供值变化通知并更新相关UI。
StreamProvider
StreamProvider是Dart语言中的一种Provider类用于将依赖项注入到需要监听流数据变化的组件中。当依赖项发生变化时StreamProvider会通知所有订阅者subscribers更新他们的UI。适合在需要监听流数据变化的情况下使用例如在实时更新数据流的情况下可以使用StreamProvider来管理流数据并提供数据变化的通知。
下面简单看一个ListenableProvider其他略可自行百度
创建自定义状态类
class ListDataState with ChangeNotifier {ListString _listData [];ListString get listData _listData;void addItem(String item) {_listData.add(item);notifyListeners();}void removeItem(String item) {_listData.remove(item);notifyListeners();}
}使用
Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(列表数据状态管理),),body: ConsumerListDataState(builder: (context, listDataState, child) {return ListView.builder(itemCount: listDataState.listData.length,itemBuilder: (context, index) {final item listDataState.listData[index];return ListTile(title: Text(item),onTap: () {listDataState.removeItem(item);},);},);},),floatingActionButton: FloatingActionButton(onPressed: () {Provider.ofListDataState(context, listen: false).addItem(New Item);},child: Icon(Icons.add),),);
}
