momentum

一个强大的 Flutter 状态管理库，受 MVC 模式启发，并具有非常灵活的依赖注入。

功能

  • 非常灵活的依赖注入，可以轻松地实例化任何依赖项一次，并在整个应用程序中多次重用。
  • 持久化状态和路由支持。使用任何存储提供商。
  • 开箱即用地支持时间旅行（撤销/重做）。
  • 可选的Equatable支持。（改善时间旅行）。
  • 不可变状态/模型。重建小部件只有一种方法。
  • 您可以重置状态或所有状态。
  • 跳过重建。小部件特定。
  • 易于使用的事件系统，用于将事件发送到小部件。用于显示对话框/Snackbar/警报/导航/等
  • Momentum没有任何依赖项，因此它增加了与其他平台的兼容性。
  • 支持Flutter的旧版本。

核心概念

  • Momentum仅在后台使用setState(...)。
  • 方法model.update(...)是momentum的setState。
  • 由于组件系统（MomentumController + MomentumModel），模块化的项目结构。
  • 一切都可以是可重用的，从小部件、服务、数据、状态到逻辑。
  • 一切都在小部件树中。

预览

在这张图片中，过程是这样的

  • 打开应用（主页）。
  • 转到添加新列表页面。
  • 输入一些数据。
  • 在任务视图中关闭并终止。
  • 再次重新打开应用程序。

魔法发生了！所有输入都被保留了，不仅如此，还包括您离开的页面。导航历史也被保留，这意味着按下系统后退按钮会将您导航到正确的先前页面。

001

黑暗模式

这种主题是通过momentum手动完成的。

002

此示例应用程序的源代码

这个示例应用程序展示了momentum的强大功能。

快速入门

您只需要安装一个包，momentum没有任何对等依赖项。

创建

入门，flutter create一个应用程序。随意命名。

安装

  1. 将此添加到您的包的 pubspec.yaml 文件中

    dependencies:
  momentum: ^1.1.6

    不建议使用GitHub上的那个，因为那里的更改可能会在未来推送到存储库时发生破坏性更改。

  2. 您可以从命令行安装此软件包

    flutter pub get

    或者，您的编辑器可能支持flutter pub get。

  3. 现在，在您的 Dart 代码中，您可以使用

    import 'package:momentum/momentum.dart';

    您只需要导入这一个文件，就可以使用所有momentum API。

计数器应用示例

复制此示例计数器应用程序代码并运行它

import 'package:flutter/material.dart';
import 'package:momentum/momentum.dart';

void main() {
  runApp(
    Momentum(
      controllers: [CounterController()],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Momentum State Management',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeWidget(),
    );
  }
}

class CounterController extends MomentumController<CounterModel> {
  @override
  CounterModel init() {
    return CounterModel(
      this,
      value: 0,
    );
  }

  void increment() {
    var value = model.value; // grab the current value
    model.update(value: value + 1); // update state (rebuild widgets)
    print(model.value); // new or updated value
  }
}

class CounterModel extends MomentumModel<CounterController> {
  CounterModel(
    CounterController controller, {
    this.value,
  }) : super(controller);

  final int value;

  @override
  void update({
    int value,
  }) {
    CounterModel(
      controller,
      value: value ?? this.value,
    ).updateMomentum();
  }
}

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Momentum Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            MomentumBuilder(
              controllers: [CounterController],
              builder: (context, snapshot) {
                var counter = snapshot<CounterModel>();
                return Text(
                  '${counter.value}',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: MomentumBuilder(
        controllers: [CounterController],
        // we don't need to rebuild the increment button.
        dontRebuildIf: (_, __) => true,
        builder: (context, snapshot) {
          var controller = snapshot<CounterModel>().controller;
          return FloatingActionButton(
            onPressed: controller.increment,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          );
        },
      ),
    );
  }
}
  • 在main()方法中，Momentum被设置为应用程序的根小部件。
  • CounterController在controllers参数中实例化。
  • 在CounterController中，有一个increment()方法可以更新值。它调用model.update(...)方法来重建小部件。
  • CounterModel是props定义的地方，目前具有value属性。
  • HomeWidget使用MomentumBuilder，用于将模型属性显示到屏幕上。您可以调用model.update(...)来重建此小部件。

GitHub

https://github.com/xamantra/momentum