Flutter原子反应动画插件atomic_reaction的使用

Atomic Reaction

Atomic Reaction 是一个用于Flutter的状态管理库，它利用原子设计原则来创建模块化和可扩展的状态管理解决方案。它旨在为您的Flutter应用程序提供清晰的状态、事件和操作管理结构。

开始使用

要将Atomic Reaction集成到您的Flutter项目中，请遵循以下简单步骤：

1. 在pubspec.yaml文件中添加依赖项：

   dependencies:
     atomic_reaction: ^1.0.0
   

   将^1.0.0替换为pub.dev上可用的最新版本。

2. 运行flutter pub get以安装包。

3. 在Dart代码中导入库：

   import 'package:atomic_reaction/atomic_reaction.dart';
   

示例用法

以下是一个基本示例，演示如何在Flutter应用程序中使用Atomic Reaction来管理状态和事件。此示例包括一个简单的计数器应用。

// 定义一个分子来管理原子之间的交互
class CounterMolecule extends Molecule {
  CounterMolecule() {
    on(incrementEvent, (_) => counterState.value++);
    on(decrementEvent, (_) => counterState.value--);
    on(
      resetEvent,
      (_) {
        counterState.value = 0;
        showSnackBarAction('Counter reseted');
      },
      // 使用修饰符防止事件重复触发
      modifier: ListenerModifiers.debounceTime(const Duration(seconds: 1)),
    );
  }

  // 定义状态、事件和动作
  final counterState = StateAtom<int>(0);
  final incrementEvent = EventVoidAtom();
  final decrementEvent = EventVoidAtom();
  final resetEvent = EventVoidAtom();
  final showSnackBarAction = ActionAtom<String>();

  // 声明该分子管理的原子
  [@override](/user/override)
  List<Atom> get atoms => [
        counterState,
        incrementEvent,
        decrementEvent,
        resetEvent,
        showSnackBarAction,
      ];
}

// 定义主页小部件
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final counterMolecule = CounterMolecule();

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 处理由分子触发的动作
    return ActionBond(
      atom: counterMolecule.showSnackBarAction,
      onAction: (snackBarText) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text(snackBarText)),
        );
      },
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'You have pushed the button this many times:',
              ),
              // 监听状态原子以获取状态变化的通知
              StateBond(
                atom: counterMolecule.counterState,
                builder: (_, value) => Text(
                  '$value',
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
              ),
            ],
          ),
        ),
        floatingActionButton: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          mainAxisSize: MainAxisSize.min,
          children: [
            // 使用事件原子触发分子中的事件
            FloatingActionButton(
              onPressed: counterMolecule.incrementEvent,
              tooltip: 'Increment',
              child: const Icon(Icons.add),
            ),
            const SizedBox(width: 8),
            // 使用事件原子触发分子中的事件
            FloatingActionButton(
              onPressed: counterMolecule.decrementEvent,
              tooltip: 'Decrement',
              child: const Icon(Icons.remove),
            ),
            const SizedBox(width: 8),
            // 使用事件原子触发分子中的事件
            FloatingActionButton(
              onPressed: counterMolecule.resetEvent,
              tooltip: 'Reset',
              child: const Icon(Icons.refresh),
            ),
          ],
        ),
      ),
    );
  }
}