Flutter开发者

Flutter状态管理2

2020-06-16

在前面的文章中我们学习了如何使用Provider来实现状态管理,本次就来介绍下如何使用Scoped和flutter_redux进行状态管理。

Scoped_model

在前面的文章中我们了解到Provider其实是借助于InheritedWidget与Listenable实现的状态管理,Scoped_model呢其实也是这样实现的,只不过 Scoped_model使用AnimatedBuilder实现数据接收并通过ScopedModelDescendant做了层封装,而Provider没有借助于Widget。

我们还是按照上篇文章的例子来进行讲解。

惯例第三方库我们需要在pubspec.yaml中进行声明

1
scoped_model: ^1.0.1

然后调用pub get

首先我们定义数据存储的model,这次我们需要继承Model,这个Model是Scoped_model中的封装类,其实也是继承Listenable

1
2
3
4
5
6
7
8
9
10
11
12
class UserModel extends Model {
String _nickName = "userName";

// 读方法
String get nickName => _nickName;

// 写方法
void updateNickName(String nickName) {
_nickName = nickName;
notifyListeners(); // 通知听众刷新
}
}

然后我们需要在合适的地方初始化UserModel,这次我们在app的入口来初始化它

1
2
3
4
5
void main() {
runApp(new MaterialApp(
home: MyApp(model: UserModel(),),
));
}

然后使用ScopedModel(ScopedModel其实是一个继承与StatelessWidget的Widget)来构建Wdiget,具体实现原理也很简单,大家可以去看下源码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class MyApp extends StatelessWidget {
final UserModel model;

const MyApp({Key key, @required this.model}) : super(key: key);

@override
Widget build(BuildContext context) {
return ScopedModel<UserModel>(//构建Widget
model: model,
child: MaterialApp(
title: 'Scoped Model Demo',
home: HomePage(),
),
);
}
}

最后我们在需要使用数的地方使用ScopedModelDescendant来构建Wdiget并获取到相应的Model

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("scopedTitle"),
),
body: Center(
child: Column(
children: [
ScopedModelDescendant<UserModel>(//构建Wdiget并传递Model
builder: (context, child, model) {
return Text(
model.nickName,
style: Theme.of(context).textTheme.display1,
);
},
),
RaisedButton(
child: Text("去设置界面"),
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) {
return SecondPage();
}));
},
)
],
),
),
);
}
}

第二个界面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
TextEditingController _unameController = TextEditingController();

return Scaffold(
appBar: AppBar(
title: Text("ProviderTitle"),
),
body: Column(
children: [
TextField(
autofocus: true,
controller: _unameController,
decoration: InputDecoration(
labelText: "用户名",
hintText: "用户名或邮箱",
prefixIcon: Icon(Icons.person)),
),
ScopedModelDescendant<UserModel>(//构建Wdiget并传递Model
builder: (context, child, model) {
return RaisedButton(
onPressed: () {
model.updateNickName(_unameController.text);
},
child: Text("设置"),
);
},
),
],
),
);
}
}

Flutter状态管理2_post1

ScopedModel使用起来非常的简单,接下来我们来看下flutter_redux如何使用。

flutter_redux

Redux是一种单向数据流架构,往往作用于前端页面当中,在Flutter我们同样可以使用Redux来进行状态管理

我们在Redux中,所有的状态都储存在Store里。这个Store会放在App顶层。

View拿到Store储存的状态(State)并把它映射成视图。View还会与用户进行交互,用户点击按钮滑动屏幕等等,这时会因为交互需要数据发生改变。

Redux让我们不能让View直接操作数据,而是通过发起一个action来告诉Reducer,状态得改变啦。

这时候Reducer接收到了这个action,他就回去遍历action表,然后找到那个匹配的action,根据action生成新的状态并把新的状态放到Store中。

Store丢弃了老的状态对象,储存了新的状态对象后,就通知所有使用到了这个状态的View更新(类似setState)。这样我们就能够同步不同view中的状态了。

接下来我们看下如何使用Redux

首先引入第三方库

1
2
flutter_redux: ^0.6.0
redux: ">=4.0.0 <5.0.0"

首先我们建立基础类

1
2
3
4
5
6
7
8
9
10
11
enum Actions { UserState }//枚举类,声明操作

class ActionType {//定义基类
String type;
ActionType(this.type);
}

class UserState extends ActionType {//定义操作类
String userName;
UserState({this.userName}) : super('userName');
}

根据传入的类型进行业务处理

1
2
3
4
5
6
UserState counterReducer(UserState state, dynamic action) {

if ("userName"==( action as UserState).type) {
return action;
}
}

在根结点初始化Redux

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
void main() {
final store = Store<UserState>(counterReducer,
initialState: UserState(userName: "userName"));

runApp(FlutterReduxApp(
store: store,
));
}

class FlutterReduxApp extends StatelessWidget {
final Store<UserState> store;

FlutterReduxApp({Key key, this.store}) : super(key: key);

@override
Widget build(BuildContext context) {
return StoreProvider<UserState>(
store: store,
child: MaterialApp(

title: "Flutter Redux Demo",
routes: { "/SecondPage": (context) => SecondPage()},
home: HomePage(),
),
);
}
}

第一个界面使用StoreConnector监听数据变更

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
class HomePage extends StatelessWidget {


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("scopedTitle"),
),
body: Center(
child: Column(
children: [
StoreConnector<UserState, String>(
converter: (store) => store.state.userName,
builder: (context, userName) {
return Text(
userName,
style: Theme
.of(context)
.textTheme
.display1,
);
},
),
RaisedButton(
child: Text("去设置界面"),
onPressed: () {
Navigator.pushNamed(context, "/SecondPage");
},
)
],
),
),

);
}
}

第二个界面,使用store.dispatch()发送事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
TextEditingController _unameController = TextEditingController();

return Scaffold(
appBar: AppBar(
title: Text("ProviderTitle"),
),
body: Column(
children: [
TextField(
autofocus: true,
controller: _unameController,
decoration: InputDecoration(
labelText: "用户名",
hintText: "用户名或邮箱",
prefixIcon: Icon(Icons.person)),
),
StoreConnector<UserState, VoidCallback>(
converter: (store) {
return () =>
store.dispatch(UserState(userName: _unameController.text));
},
builder: (store, callback) {
return RaisedButton(
onPressed: callback,
child: Text("设置"),
);
},
),
],
),
);
}
}

Redux使用起来相对的麻烦,但是面对复杂的业务逻辑使用Redux就会体现出他的价值。

小结

  1. Scoped_model使用InheritedWidget和Listenable实现监听和数据传递
  2. Redux的用法跟react里的用法类似
  3. Redux虽然不是最佳的解决方案,但是面对复杂的界面就会突出它的特点
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

打赏请备注姓名或者昵称,方便我后期统计哦

关注公众号,及时查阅最新文章