MobX.dart 开源项目教程

最新推荐文章于 2024-09-11 07:57:46 发布

鲍凯印Fox

最新推荐文章于 2024-09-11 07:57:46 发布

阅读量294

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00077/article/details/139019345

版权

MobX.dart 开源项目教程

mobx.dart MobX for the Dart language. Hassle-free, reactive state-management for your Dart and Flutter apps. 项目地址: https://gitcode.com/gh_mirrors/mo/mobx.dart

1、项目介绍

MobX.dart 是一个用于 Dart 语言的响应式编程库，灵感来源于 JavaScript 版本的 MobX。它通过透明的函数式响应式编程（TFRP）使得状态管理变得简单、高效且可扩展。MobX.dart 的核心思想是通过观察者模式自动追踪状态变化，并自动更新依赖于该状态的 UI 或其他计算。

2、项目快速启动

安装

首先，在 pubspec.yaml 文件中添加 MobX.dart 依赖：

dependencies:
  mobx: ^2.0.6
  flutter_mobx: ^2.0.1

然后运行 flutter pub get 安装依赖。

创建 Store

创建一个简单的 Store 类来管理状态：

import 'package:mobx/mobx.dart';

part 'counter.g.dart';

class Counter = CounterBase with _$Counter;

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

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

生成代码

使用 build_runner 生成 MobX 的观察代码：

flutter pub run build_runner build

使用 Store

在 Flutter 应用中使用刚才创建的 Store：

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'counter.dart'; // 导入刚才创建的 Store

void main() => runApp(MyApp());

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

class HomePage extends StatelessWidget {
  final Counter counter = Counter();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('MobX Counter')),
      body: Center(
        child: Observer(
          builder: (_) => Text('${counter.value}', style: TextStyle(fontSize: 24)),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counter.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}