目录什么是状态管理常见的状态管理框架有哪些ProviderReduxGetXProvider 使用添加依赖导入应用定义需要共享的数据在应用程序入口初始化使用共享数据状态管理的好处结束
状态管理是一个十分广泛的概念,因为状态无处不在。从广义角度讲状态管理就是页面跟代码、跟服务器进行数据同步。例如:你在某购物应用内,添加了一件商品,你需要在购物车页面进行展示。这就是一种状态。相反的,你在商品页面点击了添加到购物车,却在购物车页面没有发现或者过段时间它才展示了,这就是状态管理没有做好。这就是我所理解的状态管理。
官方给出的解释:状态管理就是当某个状态发生改变的时候,告知使用该状态的状态监听者,让状态所监听的属性随之改变,从而达到联动效果。
Provider是官方文档的例子用的方法,Google 比较推荐的用法,也是今天的主角。Provider的实现在内部还是利用了InheritedWidget,它就是用于提供数据,可以很方便的管理状态。
Redux是一种单向数据流架构,可以轻松开发,维护和测试应用程序,也是google推荐的状态管理方式。所有的状态都存储在Store里,View拿到Store的状态数据会映射成视图渲染。Redux不直接让view操作数据,通过dispatch一个action通知Reducer,状态变更(类似于Vue中的vuex)。
GetX包含很多功能,各种弹出widget、路由管理、国际化、Utils、状态管理等所以我觉得它不单单是一个状态管理器,更像是一个框架(类似于vue cli)。关于GetX的争论也很多,今天我们不讨论。我的建议是,对于像我一样的小白,还是从Provider开始,打好基础再说。
Flutter pub add provider
dependencies:
provider: ^6.0.4
import 'package:provider/provider.dart';
class ProviderData with ChangeNotifier {
int count = 0;
void increment() {
count++;
notifyListeners();
}
}
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import './provider/index.dart';
import './page/HomePage.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (_) => CountNotifier(),
child: MaterialApp(
debugShowCheckedModeBanner: false,
home: const Scaffold(
body: HomePage(),
),
),
);
}
}
import 'package:flutter/material.dart';
import 'package:flutter_provider_example/provider_count_example/count_notifier.dart';
import './provider/provider.dart';
class ProviderExample extends StatefulWidget {
const ProviderExample({Key? key}) : super(key: key);
@override
State<ProviderExample> createState() => _ProviderExampleState();
}
class _ProviderExampleState extends State<ProviderExample> {
final counter = Provider.of<ProviderData>(context);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("InheritedWidget"),
),
floatingActionButton: FloatingActionButton(
onPressed: (){
counter.increment();
},
child: const Icon(Icons.add),
),
body: Center(
child: Text(counter.count.toString(),
style: const TextStyle(
color: Colors.red,
fontSize: 50
),
),
),
);
}
}
关于flutter状态管理的学习到这里就结束了,更多关于Flutter状态管理Provider的资料请关注编程网其它相关文章!
--结束END--
本文标题: Flutter状态管理Provider示例解析
本文链接: https://www.lsjlt.com/news/174353.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-21
2023-10-28
2023-10-28
2023-10-27
2023-10-27
2023-10-27
2023-10-27
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0