Flutter状态管理插件altera_flutter_mobx的使用

Flutter状态管理插件altera_flutter_mobx的使用



pub package Build Status Coverage Status

Flutter集成MobX.dart。

提供一个Observer小部件，该小部件监听可观察对象并在更改时自动重建。

示例

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

  [@override](/user/override)
  _CounterExampleState createState() => _CounterExampleState();
}

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

  [@override](/user/override)
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: const Text('Counter'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                '你已经按了按钮这么多次:',
              ),
              Observer(
                  builder: (_) => Text(
                        '${_counter.value}',
                        style: const TextStyle(fontSize: 20),
                      )),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _counter.increment,
          tooltip: '增加',
          child: const Icon(Icons.add),
        ),
      );
}

注意使用了Observer小部件来监听_counter.value（一个可观察对象），并在值改变时重新构建。

你可以点击这里查看更多例子。

Observer

Observer(Widget Function(BuildContext context) builder)

builder函数将由MobX监控，并跟踪其中使用的所有可观察对象。当任何可观察对象发生变化时，将再次调用builder函数以重新构建Widget。这为你提供了一种无缝创建反应式Widget的方法。

请注意，如果在builder函数中未发现任何可观察对象，Observer将会打印警告信息。

完整示例Demo

下面是一个完整的示例Demo，展示了如何使用flutter_mobx插件进行状态管理。

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

// 创建一个计数器类
class Counter = _Counter with ChangeNotifier;

abstract class _Counter with ReactiveMixin {
  int _value = 0;

  int get value => _value;

  void increment() {
    _value++;
    notifyListeners();
  }
}

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  [@override](/user/override)
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  final _counter = Counter();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('计数器'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '你已经按了按钮这么多次:',
            ),
            Observer(
              builder: (_) => Text(
                '${_counter.value}',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _counter.increment,
        tooltip: '增加',
        child: Icon(Icons.add),
      ),
    );
  }
}

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

1 回复

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


altera_flutter_mobx 是一个基于 MobX 的状态管理插件，专门为 Flutter 应用设计。MobX 是一个流行的状态管理库，它通过自动追踪和更新状态来简化应用程序的状态管理。altera_flutter_mobx 提供了与 Flutter 更紧密的集成，使得在 Flutter 应用中使用 MobX 更加方便。

以下是使用 altera_flutter_mobx 的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  mobx: ^2.0.0
  altera_flutter_mobx: ^1.0.0
  flutter_mobx: ^2.0.0

然后运行 flutter pub get 来获取依赖。

2. 创建 MobX Store

MobX store 是状态管理的核心部分。你可以创建一个包含可观察状态、计算属性和动作的类。

import 'package:mobx/mobx.dart';

part 'counter_store.g.dart'; // 这是自动生成的代码文件

class CounterStore = _CounterStore with _$CounterStore;

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

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

3. 生成代码

使用 build_runner 来自动生成代码。在终端中运行以下命令：

flutter packages pub run build_runner build

这将生成 counter_store.g.dart 文件，其中包含了 MobX 所需的代码。

4. 在 Flutter 中使用 Store

在你的 Flutter 应用中，你可以使用 Provider 或 MobxProvider 来提供 store，并使用 Observer 来观察状态的变化。

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

void main() {
  final counterStore = CounterStore();
  runApp(
    Provider<CounterStore>.value(
      value: counterStore,
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final counterStore = Provider.of<CounterStore>(context);

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