Flutter状态管理插件flutter_mobx的使用

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

Flutter状态管理插件flutter_mobx的使用

flutter_mobx

flutter_mobx是Flutter与MobX.dart集成的状态管理库。它提供了Observer小部件，该小部件可以监听可观察对象（observables），并在其发生变化时自动重新构建。

版本和状态

  • pub package
  • Build Status
  • Coverage Status

示例代码

以下是一个简单的计数器示例，展示了如何在Flutter中使用flutter_mobx进行状态管理。

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

// 定义一个计数器类，并使用MobX的注解来定义可观察属性
part 'counter.g.dart';

class Counter = _Counter with _$Counter;

abstract class _Counter with Store {
  @observable
  int value = 0;

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CounterExample(),
    );
  }
}

class CounterExample extends StatefulWidget {
  const CounterExample({Key key}) : super(key: key);

  @override
  _CounterExampleState createState() => _CounterExampleState();
}

class _CounterExampleState extends State<CounterExample> {
  final _counter = Counter();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Observer(
                builder: (_) => Text(
                      '${_counter.value}',
                      style: const TextStyle(fontSize: 20),
                    )),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _counter.increment,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

注意在这个例子中我们使用了Observer小部件来监听_counter.value这个可观察属性的变化，并且当这个值变化时，Observer内部的Text小部件会自动更新显示最新的值。

此外，我们还需要生成MobX的代码，可以通过运行mobx_codegen包中的命令来实现。确保你已经在项目中添加了build_runner和mobx_codegen依赖，并且运行以下命令：

flutter pub run build_runner watch --delete-conflicting-outputs

或者对于一次性构建：

flutter pub run build_runner build --delete-conflicting-outputs

这样就可以保证你的MobX类被正确地生成并且可以正常工作了。

更多示例可以在官方GitHub仓库中找到，包括但不限于：

  • Counter：经典的计数器应用。
  • Todos：一个待办事项列表应用，用于展示更复杂的状态管理场景。

希望这些信息能帮助你更好地理解和使用flutter_mobx！如果你有任何问题或需要进一步的帮助，请随时提问。


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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter中使用flutter_mobx进行状态管理的示例代码。flutter_mobx是一个将MobX与Flutter集成的插件，它使得状态管理变得更加简单和高效。

首先，你需要确保在你的pubspec.yaml文件中添加了flutter_mobx和mobx的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_mobx: ^2.0.0 # 请检查最新版本号
  mobx: ^2.0.0 # 请检查最新版本号
  mobx_dart: ^2.0.0 # mobx依赖于mobx_dart，通常会自动添加

然后，你可以按照以下步骤来设置和使用flutter_mobx进行状态管理。

1. 创建一个Store类

Store类将包含应用的状态和修改这些状态的动作。使用observable和action来定义状态和动作。

import 'package:mobx/mobx.dart';

class CounterStore = _CounterStore with _$CounterStore;

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

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

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

2. 初始化Store并提供给应用

使用Provider来将Store提供给Flutter应用。你可以在main.dart文件中完成这一步。

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

void main() {
  runApp(
    Provider(
      store: CounterStore(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter MobX Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CounterPage(),
    );
  }
}

3. 在UI中使用Store

使用Observer组件来监听Store的变化，并更新UI。

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

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final store = Provider.of<CounterStore>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter MobX Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Observer(
              builder: (_) => Text(
                'You have pushed the button this many times:',
                style: Theme.of(context).textTheme.headline4,
              ),
            ),
            Observer(
              builder: (_) => Text(
                '${store.count}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => store.increment(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }
}

4. 运行应用

现在，你可以运行你的Flutter应用，并看到一个简单的计数器应用，它使用MobX进行状态管理。

这个示例展示了如何使用flutter_mobx来创建一个简单的计数器应用。你可以根据需要扩展这个示例，以包含更复杂的状态管理和逻辑。

回到顶部