Flutter 状态管理 Mobx 之使用

Flutter Mobx

Flutter Mobx Github

Build_runner

1. 依赖

dependencies:
  mobx: ^0.3.9+3
  flutter_mobx: ^0.3.3+3
dev_dependencies:
  # 用于mobx代码生成
  mobx_codegen: ^0.3.10+1
  build_runner: ^1.7.1

• 下载包

flutter pub get

• 导入

import 'package:flutter_mobx/flutter_mobx.dart';

2. 创建可观察对象

• 生成文件步骤
  步骤:

1. 创建 counter.dart
2. 添加 part 'counter.g.dart';
3. 添加 class Counter = CounterMobx with _$Counter;
4. 执行命令: flutter packages pub run build_runner build
5. 删除之内再生成: flutter packages pub run build_runner build --delete-conflicting-outputs
6. 实时更新.g文件: flutter packages pub run build_runner watch

import 'package:mobx/mobx.dart';

/// 必须, 用于生成.g文件
part 'counter.g.dart';
class Counter = CounterMobx with _$Counter;

/// 步骤:
/// 1. 创建counter.dart
/// 2. 添加 part 'counter.g.dart';
/// 3. 添加 class Counter = CounterMobx with _$Counter;
/// 4. 执行命令: flutter packages pub run build_runner build
/// 5. 删除之内再生成: flutter packages pub run build_runner build --delete-conflicting-outputs
/// 6. 实时更新.g文件: flutter packages pub run build_runner watch

/// Counter可观察对象
abstract class CounterMobx with Store {
  /// 可观察的值
  @observable int value = 0;

  /// 加法
  @action void increment() {
    value++;
  }

  /// 减法
  @action void decrement() {
    value--;
  }

  /// 设置值
  @action void set(int value) {
    this.value = value;
  }
}

3. 页面使用

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobx/mobx.dart';
import 'package:state_manage/mobx/counter/counter.dart';

/// Mobx计数器页面
class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mobx Counter',
      theme: ThemeData(primaryColor: Colors.blue),
      home: CounterStatePage(title: 'Mobx Counter'),
    );
  }
}

class CounterStatePage extends StatefulWidget {
  /// 标题
  final String title;
  CounterStatePage({Key key, this.title}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _CounterStatePageState();
}

class _CounterStatePageState extends State<CounterStatePage> {
  /// 创建管理者
  final Counter _counter = Counter();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Observer( // 观察数据
                builder: (_) => Text(
                  '${_counter.value}',
                  style: Theme.of(context).textTheme.display1,
                ),
              )
            ],
          ),
        ),
        floatingActionButton: Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              // 加
              Padding(
                padding: EdgeInsets.symmetric(vertical: 5.0),
                child: FloatingActionButton(
                  onPressed: _counter.increment,
                  tooltip: 'Increment',
                  child: Icon(Icons.add),
                ),
              ),
              // 减
              Padding(
                padding: EdgeInsets.symmetric(vertical: 5.0),
                child: FloatingActionButton(
                  onPressed: _counter.decrement,
                  tooltip: 'Decrement',
                  child: Icon(Icons.remove),
                ),
              )
            ]));
  }
}

注意: Observer的使用

• 效果图

效果图.gif