Provider
基本使用
使用前得先引入库：
dependencies:
provider: ^5.0.0
接下来我们分三步来了解它的使用：
- 将number封装到ChangeNotifier中，创建需要共享的状态
class NumberModel extends ChangeNotifier {
int _number = 0;
int get number => _number;
set number(int value) {
_number = value;
notifyListeners();
}
}
ChangeNotifier是Flutter Framework的基础类，不是Provider库中的类。ChangeNotifier继承自Listenable,也就是ChangeNotifier可以通知观察者值的改变(实现了观察者模式)。
NumberModel有一个_number状态，然后提供了获取的方法get和设置set的方法。
- 在应用程序的顶层添加ChangeNotifierProvider
void main() {
runApp(
ChangeNotifierProvider(
create: (ctx) => NumberModel(),
child: MyApp(),
),
);
}
将应用的顶层设置为ChangeNotifierProvider, 然后将MyApp()变为它的子Widget。
ChangeNotifierProvider的create函数需要返回ChangeNotifier。
- 其它Widget使用共享的状态
有四个地方需要使用到共享的状态，三个显示文字的Text Widget和FloatingActionButton。
Provider.of
class NumberWidget1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 获取NumberModel的number
int number = Provider.of<NumberModel>(context).number;
return Container(
child: Text(
"点击次数: $number",
style: TextStyle(fontSize: 30),
),
);
}
}
我们将Text Widget封装成了NumberWidget1, 通过int number = Provider.of<NumberModel>(context).number;获取到NumberModel的number值，然后就可以显示了。
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 1 获取NumberModel
NumberModel model = Provider.of<NumberModel>(context);
return Scaffold(
appBar: AppBar(
title: Text("Provider"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [NumberWidget1(), NumberWidget1(), NumberWidget1()]),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// 2 修改number值
model.number++;
},
child: Icon(Icons.add),
));
}
}
FloatingActionButton也需要通过Provider.of<NumberModel>(context)方法先拿到NumberModel，然后调用set方法改变number的值。
Mobx
基本使用
1.导入包
dependencies:
mobx: ^1.0.1
flutter_mobx: ^1.0.1
dev_dependencies:
mobx_codegen: ^1.0.1
build_runner: ^1.7.4
2.定义 Observable与Action
import 'package:mobx/mobx.dart';
part 'counter.g.dart';
// 运行 flutter packages pub run build_runner build 生成
class Counter = CounterBase with _$Counter;
abstract class CounterBase with Store {
@observable
int value = 0;
@action
void increment() async {
value++;
print('$value');
}
}
3.观察数据与发送Action
import 'package:flutter/material.dart';
import 'counter.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
class MobxTester extends StatelessWidget {
final Counter _counter=Counter();
@override
Widget build(BuildContext context) {
print('build');
return Scaffold(
appBar: AppBar(
title: Text('mobx demo'),
),
body: Center(
// mobx 观察者 观察数据
child: Observer(
builder: (_)=>Text(_counter.value.toString()),
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: (){
// 发送 action
_counter.increment();
},
),
);
}
}
4.VS Code 模板代码
{
"Create Mobx Observales": {
"prefix": "mobx",
"body": [
"import 'package:mobx/mobx.dart';",
"//*.g.dart will be created by cmd:",
"//flutter packages pub run build_runner build",
"part '${TM_FILENAME_BASE}.g.dart';",
"class $1 = $1Base with _$$1;",
"abstract class $1Base with Store {",
" //TODO create observable",
" @observable",
" $2",
" //TODO create action method",
" @action",
" $3",
" //TODO create computed method",
" //@computed",
" $4",
"}"
],
"description": "Create Mobx Observales"
}
}
Getx
基本使用
参考链接：https://blog.csdn.net/lcl130/article/details/115603504
参考链接：https://www.jianshu.com/p/5b667a184385
