Flutter入门13 -- 状态管理
2021-12-03 本文已影响0人
YanZi_33
- 状态管理是声明式编程非常重要的一个概念,Flutter是属于声明式编程;
- 在Flutter开发过程中,我们有大量的State需要进行管理,这些大量State的改变,正是更新界面,刷新界面;
状态管理分类
- 状态管理分类为
短时状态
与应用状态
; - 短时状态:只需要在自己的widget中使用即可,
- 简单的计数器counter
- PageView组件记录当前的页面
- 动画记录当前的进度
- BottomNavigationBar中当前被选中的tab
- 这种状态我们只需要使用StatefulWidget对应的State类自己管理即可,widget树中的其他组件不需要访问这个状态;
- 应用状态:其需要在多个组件之间进行状态数据的共享;
- 个性化选项的设置
- 用户登陆状态信息
- 针对应用状态,因为要在不同组件之间传递状态数据,如果涉及的组件很多,就会造成代码的耦合度很高,这对于代码的编写质量与代码的维护都是非常差的,这个时候我们就需要选择
全局状态管理
的方式,来对状态进行统一的管理与应用; - 在开发的过程中,并没有明确规则去区分哪些状态是短时状态,哪些状态时应用状态,某些短时状态可能在之后的开发维护中需要升级为应用状态;
- 我们可以遵守下面这幅图的规则:
共享状态管理
InheritedWidget
-
InheritedWidget
可实现跨组件数据的传递
; - 定义一个共享数据组件
SFCounterWidget
,需要继承自inheritedWidget
,案例代码如下所示:
import 'package:flutter/material.dart';
main() => runApp(SFMyApp());
class SFCounterWidget extends InheritedWidget {
final int counter;
SFCounterWidget({this.counter, Widget child}) : super(child:child);
static SFCounterWidget of(BuildContext ctx) {
//沿着Element树 去找到最近的SFCounterWidgetElement,然后从element中取出widget对象
return ctx.dependOnInheritedWidgetOfExactType();
}
//返回true:依赖当前SFCounterWidget的widget的state类 会执行didChangeDependencies()方法
@override
bool updateShouldNotify(SFCounterWidget oldWidget) {
return oldWidget.counter != counter;
}
}
class SFMyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SFHomePage(),
);
}
}
class SFHomePage extends StatefulWidget {
@override
_SFHomePageState createState() => _SFHomePageState();
}
class _SFHomePageState extends State<SFHomePage> {
int _counter = 1000;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter测试共享数据"),
),
body: SFCounterWidget(
counter: _counter,
child: Column(
children: [
SFShowData01(),
SFShowData02(),
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: (){
setState(() {
_counter++;
});
},
),
);
}
}
class SFShowData01 extends StatefulWidget {
@override
_SFShowData01State createState() => _SFShowData01State();
}
class _SFShowData01State extends State<SFShowData01> {
@override
void didChangeDependencies() {
super.didChangeDependencies();
print("_SFShowData01State 执行了 didChangeDependencies方法");
}
@override
Widget build(BuildContext context) {
int counter = SFCounterWidget.of(context).counter;
return Card(
color: Colors.red,
child: Text("当前计数: $counter"),
);
}
}
class SFShowData02 extends StatelessWidget {
@override
Widget build(BuildContext context) {
int counter = SFCounterWidget.of(context).counter;
return Card(
color: Colors.green,
child: Text("当前计数: $counter"),
);
}
}
- 上述代码的关系网如下所示:
-
SFCounterWidget
是共享数据,继承自InheritedWidget,内部提供初始化构造方法SFCounterWidget({this.counter, Widget child}) : super(child:child)
,其中可选参数child
是共享数据的子节点; - 静态方法,实现如下:
static SFCounterWidget of(BuildContext ctx) {
//沿着Element树 去找到最近的SFCounterWidgetElement,
//然后从element中取出widget对象
return ctx.dependOnInheritedWidgetOfExactType();
}
- 根据
BuildContext
,也就是child子节点widget(SFShowData01与SFShowData02)的element,在Element树 去找到最近的SFCounterWidgetElement,然后从element中取出widget对象SFCounterWidget,也就是共享数据; - 实现父类的抽象方法
updateShouldNotify
@override
bool updateShouldNotify(SFCounterWidget oldWidget) {
return oldWidget.counter != counter;
}
- 返回true,就表示共享数据SFCounterWidget内部子节点widget(获取数据的组件)的state类 就会执行
void didChangeDependencies()
方法;
Provider
-
Provider
是官方推荐的全局状态管理工具,使用之前我们需要引入对它的依赖:
dependencies:
provider: ^4.0.4
-
Provider的使用步骤通常分为下面三步:
- 第一步:创建需要共享的数据模型继承自ChangeNotifier;
- 第二步:在应用程序顶层包装一个
ChangeNotifierProvider
; - 第三步:
更改
共享数据模型中的数据,发出通知,给观察者; - 第四步:观察者 在引用共享数据的位置,
使用数据,刷新界面
;
-
在引用数据的位置,使用共享数据,通常有三种形式,分别为:
Provider.of
,Consumer
与Selector
,下面分别介绍这三种形式的用法与优缺点;
Provider.of的使用
- 第一步:创建的共享数据模型
SFCounterViewModel
继承自ChangeNotifier
import 'package:flutter/material.dart';
//创建共享数据模型
class SFCounterViewModel extends ChangeNotifier{
int _counter = 1000;
int get counter => _counter;
set counter(int value) {
_counter = value;
notifyListeners();
}
}
- 第二步:应用程序顶层包装
ChangeNotifierProvider
组件,并传入刚定义的共享数据模型;
import 'package:flutter/material.dart';
import 'package:learn_flutter_01/day02/viewmodel/SFCounterViewModel.dart';
import 'package:provider/provider.dart';
void main() {
//2.在应用程序的顶层 包装一个ChangeNotifierProvider
runApp(
ChangeNotifierProvider(
create: (ctx) => SFCounterViewModel(),
child: SFMyApp(),
)
);
}
- 第三步:更改共享数据模型中的数据 发送通知 本质是调用共享数据模型的setter方法;
-
context.read<SFCounterViewModel>().counter+=1
是Provider库中对context扩展了一个read方法,其本质是调用Provider.of<SFCounterViewModel>(context, listen: false).counter+=1
,其中listen参数默认为true,我们需要改成false,否则会报错,这个参数是在Provider 4.0.2后会出现的;
-
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: SFHomePage(),
);
}
}
class SFHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
print("SFHomePage build");
return Scaffold(
appBar: AppBar(
title: Text("商品列表"),
),
body: Column(
children: [
SFShowData01()
],
),
floatingActionButton: FloatingActionButton(
onPressed: (){
///更改共享数据模型中的数据 发送通知 本质是调用共享数据模型的setter方法
context.read<SFCounterViewModel>().counter+=1;
///Provider.of<SFCounterViewModel>(context, listen: false).counter+=1;
},
child: Icon(Icons.add),
)
);
}
}
- 第四步:通知回调 更新数据 本质是调用共享数据模型的getter方法 获取数据,刷新界面;
///子组件一
class SFShowData01 extends StatelessWidget {
@override
Widget build(BuildContext context) {
print("SFShowData01 build");
///通知回调 更新数据 本质是调用共享数据模型的getter方法 获取数据
int counter = Provider.of<SFCounterViewModel>(context).counter;
return Card(
color: Colors.red,
child: Text("当前计数: $counter"),
);
}
}
- 效果图如下所示:
- 当用户点击右下方的按钮时,Provider.of所在的widget
SFShowData01的build方法有调用,会出现SFShowData01的重建,效率略低
;
Consumer的使用
- 第一,二,三步与Provider.of的内容完全相同,不同点在于第四步,引用共享数据刷新界面时,使用
Consumer
,代码如下:
class SFShowData01 extends StatelessWidget {
@override
Widget build(BuildContext context) {
print("SFShowData01 build");
///通知回调 更新数据 本质是调用共享数据模型的getter方法 获取数据
return Card(
color: Colors.red,
child: Consumer<SFCounterViewModel>(
builder: (ctx, viewModel, child) {
return Text("当前计数: ${viewModel.counter}");
}
)
);
}
}
- 发现使用
Consumer
引用共享数据时,SFShowData01的build方法没有调用,不会出现SFShowData01的重建,效率效率比Provider.of
相对较高;
selector的使用
- 首先上案例代码,如下所示:
- 共享数据模型SFCounterViewModel,内部有两个属性值_counter与_number;
import 'package:flutter/cupertino.dart';
class SFCounterViewModel extends ChangeNotifier {
int _counter = 1000;
int _number = 50;
int get counter => _counter;
set counter(int value) {
_counter = value;
///发送通知 给观察者
notifyListeners();
}
int get number => _number;
set number(int value) {
_number = value;
notifyListeners();
}
}
- 界面构建如下:
import 'package:SFLayout/provider/counter_view_model.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
main() {
runApp(
///App顶层包装ChangeNotifierProvider组件
ChangeNotifierProvider(
create: (context) => SFCounterViewModel(),
child: MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: SFHomePage(),
);
}
}
class SFHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
print("SFHomePage build");
return Scaffold(
appBar: AppBar(
title: Text("商品列表"),
),
body: Column(
children: [
SFShowData01(),
SFShowData02()
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
///更改共享数据模型中的数据 发送通知 本质是调用共享数据模型的setter方法
Provider.of<SFCounterViewModel>(context,listen: false).counter+=1;
// context.read<SFCounterViewModel>().counter+=1;
},
child: Icon(Icons.add),
)
);
}
}
///子组件一
class SFShowData01 extends StatelessWidget {
@override
Widget build(BuildContext context) {
print("SFShowData01 build");
///通知回调 更新数据 本质是调用共享数据模型的getter方法 获取数据
return Card(
color: Colors.red,
child: Consumer<SFCounterViewModel>(
builder: (ctx, viewModel, child) {
print("counter");
return Text("当前计数counter: ${viewModel.counter}");
}
)
);
}
}
class SFShowData02 extends StatelessWidget {
const SFShowData02({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Card(
color: Colors.green,
child: Consumer<SFCounterViewModel>(
builder: (ctx, viewModel, child) {
print("number");
return Text("当前计数number: ${viewModel.number}");
}
)
);
}
}
- 效果图如下:
- 当点击右下角的按钮时,我们只改变了
SFCounterViewModel
的_counter值,但是SFShowData01与SFShowData02都会去刷新数据,也就是说只要SFCounterViewModel的内部属性发生变化,所有的观察者都会执行回调,刷新数据,如何实现针对共享数据模型的特定属性,进行监测,实现更精细化的监听回调
,答案是使用selector
,代码改造如下:
import 'package:SFLayout/provider/counter_view_model.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
main() {
runApp(
///App顶层包装ChangeNotifierProvider组件
ChangeNotifierProvider(
create: (context) => SFCounterViewModel(),
child: MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: SFHomePage(),
);
}
}
class SFHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
print("SFHomePage build");
return Scaffold(
appBar: AppBar(
title: Text("商品列表"),
),
body: Column(
children: [
SFShowData01(),
SFShowData02()
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
///更改共享数据模型中的数据 发送通知 本质是调用共享数据模型的setter方法
Provider.of<SFCounterViewModel>(context,listen: false).counter+=1;
// context.read<SFCounterViewModel>().counter+=1;
},
child: Icon(Icons.add),
)
);
}
}
///子组件一
class SFShowData01 extends StatelessWidget {
@override
Widget build(BuildContext context) {
print("SFShowData01 build");
///通知回调 更新数据 本质是调用共享数据模型的getter方法 获取数据
return Card(
color: Colors.red,
child: Consumer<SFCounterViewModel>(
builder: (ctx, viewModel, child) {
print("counter");
return Text("当前计数counter: ${viewModel.counter}");
}
)
);
}
}
class SFShowData02 extends StatelessWidget {
const SFShowData02({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Card(
color: Colors.green,
child: Selector<SFCounterViewModel,int>(
selector: (ctx,viewModel) => viewModel.number,
builder: (ctx,numberValue,child) {
print("number");
return Text("当前计数number: ${numberValue}");
},
)
);
}
}
- SFShowData01监听SFCounterViewModel的counter属性,SFShowData02监听SFCounterViewModel的number属性,当点击右下角按钮只改变counter属性时,现在只有SFShowData01执行回调,刷新数据,满足需求;
多个数据模型的共享
- 可使用
MultiProvider
组件; - 再新建一个共享数据模型
SFUserInfoViewModel
,其数据来源于模型SFUserInfoModel
class SFUserInfoModel {
String name;
int level;
String imageUrl;
SFUserInfoModel(this.name,this.level,this.imageUrl);
}
import 'package:flutter/material.dart';
import 'package:learn_flutter_01/day02/model/SFUserInfoModel.dart';
class SFUserInfoViewModel extends ChangeNotifier {
SFUserInfoModel _userInfo;
SFUserInfoViewModel(this._userInfo);
SFUserInfoModel get userInfo => _userInfo;
set userInfo(SFUserInfoModel value) {
_userInfo = value;
notifyListeners();
}
}
- 案例代码如下所示:
import 'package:flutter/material.dart';
import 'package:learn_flutter_01/day02/model/SFUserInfoModel.dart';
import 'package:learn_flutter_01/day02/viewmodel/SFCounterViewModel.dart';
import 'package:learn_flutter_01/day02/viewmodel/SFUserInfoViewModel.dart';
import 'package:provider/provider.dart';
void main() {
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider(create: (ctx) => SFCounterViewModel()),
ChangeNotifierProvider(create: (ctx) => SFUserInfoViewModel(SFUserInfoModel("yanzi",20,"haha"))),
],
child: SFMyApp(),
)
);
}
class SFMyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SFHomePage(),
);
}
}
class SFHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
print("SFHomePage build");
return Scaffold(
appBar: AppBar(
title: Text("商品列表"),
),
body: Column(
children: [
SFShowData01(),
SFShowData02(),
SFShowData03(),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
///更改共享数据模型中的数据 发送通知 本质是调用共享数据模型的setter方法
// Provider.of<SFCounterViewModel>(context,listen: false).counter+=1;
context.read<SFCounterViewModel>().counter+=1;
},
child: Icon(Icons.add),
)
);
}
}
class SFShowData01 extends StatelessWidget {
@override
Widget build(BuildContext context) {
print("SFShowData01 build");
//3.在需要使用共享数据的位置调用Provider.of方法
int counter = Provider.of<SFCounterViewModel>(context).counter;
return Card(
color: Colors.red,
child: Text("当前计数: $counter",style: TextStyle(fontSize: 25)),
);
}
}
class SFShowData02 extends StatelessWidget {
@override
Widget build(BuildContext context) {
//int counter = Provider.of<SFCounterViewModel>(context).counter;
print("SFShowData02 build");
return Card(
color: Colors.green,
child: Consumer<SFCounterViewModel> (
builder: (ctx,counterViewModel,child) {
print("Consumer builder");
return Text("当前计数: ${counterViewModel.counter}",style: TextStyle(fontSize: 25));
},
)
);
}
}
class SFShowData03 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Consumer2<SFCounterViewModel,SFUserInfoViewModel>(
builder: (ctx,countViewModel,userInfoViewModel,child){
return Text(
"nickname=${userInfoViewModel.userInfo.name} counter = ${countViewModel.counter}",
style: TextStyle(fontSize: 25)
);
}
);
}
}
- 在
SFShowData01
中,利用Provider.of
监听SFCountViewModel
数据; - 在
SFShowData02
中,利用Consumer
监听SFCountViewModel
数据; - 在
SFShowData03
中,利用Consumer2<A,B>
同时监听SFCountViewModel
与SFUserInfoViewModel
两种共享数据,运行效果图如下: - 同理
Consumer3<A,B,C>
可同时监听三种共享数据模型,最多可监听6种共享数据模型;