flutter-mobxFlutter 状态管理- 使用 MobX实现计数器

Posted 2023-02-13 ThinkerWing

实践flutter mobx：

提示：对下面这篇掘金文章的实践，通过flutter结合 mobx 实现计数器，过程中也添加了一些处理和注释，代码放在feat/mobx下

• https://juejin.cn/post/6954523549386162213
• https://github.com/ThinkerWing/language/commit/56be25d4b11264cfffa4e909a3a03565063240ff
  演示效果
  

---

第一步，我们首先从pubspec.yaml开始：

在 pubspec.yaml 中添加一些依赖 (dependencies 与 dev_dependencies)，同时运行依赖拉取flutter packages get，它会将我们所需的软件包添加至项目中

dependencies:
  mobx:
  flutter_mobx:

dev_dependencies:
  build_runner: 
  mobx_codegen:

重写一下main.dart 更加整洁

import 'package:flutter/material.dart';
import 'package:language/pages/counter_page.dart';
 
void main() => runApp(const MyApp());
 
class MyApp extends StatelessWidget 
  const MyApp(super.key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: CounterPage(),
    );
  

---

第二步，在lib/pages/counter_page.dart 中创建 CounterPage：

CounterPage只是一个StatelessWidget，在main.dart中导入，project 为项目名。
import 'package:`$project`/pages/counter_page.dart';

onPressed 回调可以用来调用counter.increment

  // 这里先不用Text而是包裹一个新的widget，然后这里需要一个observer widget
             // 它不是可以直接使用的，因此我们需要导入它
             Observer(
                 builder: (_) => Text(
                       '$counter.value',
                       style: const TextStyle(fontSize: 42.0),
                     )),
             // 现在我们有了Observe 和 builder，它随时给我们的Text一个最新的值

import 'package:language/store/counter/counter.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';

class CounterPage extends StatelessWidget 
  final Counter counter = Counter();

  CounterPage(super.key);

  @override
  Widget build(BuildContext context) 
    return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter and MobX by think'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'Counter',
                style: TextStyle(fontSize: 30.0),
              ),
              // const Text(
              //   '0',
              //   style: TextStyle(fontSize: 42.0),
              // ),
              // 这里先不用Text而是包裹一个新的widget，然后这里需要一个observer widget
              // 它不是可以直接使用的，因此我们需要导入它
              Observer(
                  builder: (_) => Text(
                        '$counter.value',
                        style: const TextStyle(fontSize: 42.0),
                      )),
              // 现在我们有了Observe 和 builder，它随时给我们的Text一个最新的值
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  TextButton.icon(
                    icon: const Icon(Icons.add),
                    label: const Text('Add'),
                    // onPressed 回调可以用来调用counter.increment
                    // onPressed: () ,
                    onPressed: counter.increment,
                  ),
                  TextButton.icon(
                    icon: const Icon(Icons.remove),
                    label: const Text('Remove'),
                    onPressed: counter.decrement,
                  ),
                ],
              )
            ],
          ),
        ));
  

第三步，在lib目录下创建store文件夹，我们很有可能在store中管理很多的内容，所以再创建一个counter文件夹再创建counter.dart.

import 'package:mobx/mobx.dart';
 
// This is our generated file (we'll see this soon!)
part 'counter.g.dart';
 
// We expose this to be used throughout our project
class Counter = _Counter with _$Counter;
 
// Our store class
abstract class _Counter with Store 
  @observable
  // 定义变量，它是一个能够被观察到int类型的count
  int value = 1;
 
  @action
  void increment() 
    value++;
  
 
  @action
  void decrement() 
    value--;
  

提示：写完counter.dart之后需要启动生成器
在终端的该工程目录下通过下面的命令运行 build_runner 和 mobx_codegen：

flutter packages pub run build_runner watch

---

整体的变化也是比较小的，main.dart 就是将create的初始化项目更简洁的重新写了一下,
counter.g.dart 也是通过命令自己生成的，实际上只改动了4个文件，也没有很多代码，这里的行数主要是添加依赖上。