Flutter状态管理代码生成插件mobx_codegen的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter状态管理代码生成插件mobx_codegen的使用

简介

mobx_codegen 是 MobX 的代码生成库，它为 MobX 提供了注解支持，使得使用 MobX 变得更加简单。你可以通过 @observable、@computed 和 @action 注解来标记你的状态、计算属性和操作方法。这些注解只能在 store 类中使用。store 类是抽象类，并且使用 Store 混入（mixin）。当你运行 build_runner 时，它会自动生成一个 *.g.dart 文件，该文件必须被导入到你的文件中。

安装与配置

添加依赖

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  mobx: ^2.0.0

dev_dependencies:
  build_runner: ^2.0.0
  mobx_codegen: ^2.0.0

配置构建脚本

确保你的 pubspec.yaml 文件中包含以下内容，以启用代码生成：

flutter:
  generate: true

使用示例

创建 Store 类

首先，创建一个 Dart 文件，例如 todos.dart，并编写如下代码：

import 'package:mobx/mobx.dart';

// Include generated file
part 'todos.g.dart';

// This is the class used by rest of your codebase
class Todo = TodoBase with _$Todo;

// The store-class
abstract class TodoBase with Store {
  TodoBase(this.description);

  @observable
  String description = '';

  @observable
  bool done = false;

  @action
  void toggleDone() {
    done = !done;
  }
}

生成代码

在项目根目录下运行以下命令以生成代码：

$ flutter packages pub run build_runner build

这将生成一个 todos.g.dart 文件，其中包含了所有必要的 getter 和 setter 方法。

使用 Store 类

接下来，在你的 Flutter 应用中使用这个 Store 类。例如，在 main.dart 中：

import 'package:flutter/material.dart';
import 'package:mobx/mobx.dart' as mobx;
import 'todos.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TodoListScreen(),
    );
  }
}

class TodoListScreen extends StatefulWidget {
  @override
  _TodoListScreenState createState() => _TodoListScreenState();
}

class _TodoListScreenState extends State<TodoListScreen> {
  final Todo todo = Todo('Buy groceries');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todo List'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(todo.description),
            Checkbox(
              value: todo.done,
              onChanged: (bool? value) {
                mobx.action(() {
                  todo.toggleDone();
                });
                setState(() {});
              },
            ),
          ],
        ),
      ),
    );
  }
}

总结

通过 mobx_codegen 插件，你可以轻松地使用 MobX 进行状态管理。只需要添加相应的注解，并运行代码生成工具，就可以自动生成所需的代码。这种方式不仅简化了代码编写过程，还提高了代码的可维护性和性能。

希望这个示例能帮助你更好地理解和使用 mobx_codegen 插件。如果你有任何问题或需要进一步的帮助，请随时提问！


更多关于Flutter状态管理代码生成插件mobx_codegen的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter状态管理代码生成插件mobx_codegen的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用mobx_codegen插件来进行状态管理的代码示例。mobx_codegen是一个与mobx-dart配合使用的代码生成器，用于简化MobX状态管理的实现。

1. 安装依赖

首先，在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  mobx_dart: ^2.0.0
  flutter_mobx: ^2.0.0

dev_dependencies:
  build_runner: ^2.0.0
  mobx_codegen: ^2.0.0

2. 创建Store类

接下来，创建一个用于状态管理的Store类。假设我们要管理一个计数器应用的状态。

// counter_store.dart
import 'package:mobx_dart/mobx_dart.dart';
part 'counter_store.g.dart';

class CounterStore = _CounterStore with _$CounterStore;

abstract class _CounterStore with Store {
  @observable
  int count = 0;

  @action
  void increment() {
    count++;
  }

  @action
  void decrement() {
    count--;
  }
}

注意，我们在文件的顶部添加了part 'counter_store.g.dart';，这是mobx_codegen生成的代码将放置的位置。

3. 生成代码

在项目的根目录下运行以下命令以生成代码：

flutter pub run build_runner build

这个命令会查找所有带有part 'xxx.g.dart';的文件，并生成相应的xxx.g.dart文件。

4. 使用Store

现在，我们可以在Flutter组件中使用这个Store。

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'counter_store.dart';

void main() {
  final store = CounterStore();
  runApp(MyApp(store));
}

class MyApp extends StatelessWidget {
  final CounterStore store;

  MyApp(this.store);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MobX Counter'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Observer(
                builder: (_) => Text(
                  'You have pushed the button this many times:',
                ),
              ),
              SizedBox(height: 20),
              Observer(
                builder: (_) => Text(
                  '${store.count}',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: store.increment,
                child: Text('Increment'),
              ),
              SizedBox(height: 10),
              ElevatedButton(
                onPressed: store.decrement,
                child: Text('Decrement'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个MyApp组件，并在其中使用了Observer小部件来监听CounterStore中的count变量。每当count变化时，Observer中的小部件将重新构建。

总结

通过上述步骤，我们展示了如何在Flutter项目中使用mobx_codegen插件来进行状态管理。这包括安装依赖、创建Store类、生成代码以及在组件中使用Store。希望这个示例能帮助你更好地理解和使用mobx_codegen进行状态管理。

回到顶部