Provider、Mobx、Getx

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