Flutter状态管理插件state_composer的使用

Flutter状态管理插件state_composer的使用

State Composer

使用对象组合在 Dart 中创建状态机。

该软件包正在开发中。目前仅支持简单的状态转换。下一步将添加监听器和支持并行状态。

使用方法

简单的状态机

实例化你的 StateMachine，传递它的ID（即一个唯一的名称），初始状态ID和一系列状态。

每个 ComposerState 还有一个可以自由命名的ID，只要没有其他状态使用相同的名称即可。

状态通过 onEnter 和 onLeave 函数执行操作。

  • onEnter 将传递上一个和当前状态。
  • onLeave 将传递当前和下一个状态。

这些函数接受未来值（Futures）。

所有允许状态进行的转换都必须包含在转换列表中。一个 Transition 还会接收一个ID以及要转到的状态ID。

machine = StateMachine(
  id: "machine1",
  initialStateId: "A",
  states: [
    ComposerState(
      id: "A",
      onEnter: (stateMachine) async {
        test("onEnter A Last State Should be Null", () {
          expect(stateMachine.lastState, null);
        });
        test("onEnter A Current State ID Should be A", () {
          expect(stateMachine.currentState!.id, "A");
        });
        print("Entered A");
      },
      onLeave: (stateMachine, nextState) async {
        print("Leaving A");

        expect(stateMachine.currentState!.id, "A");
        expect(nextState.id, "B");

        await Future.delayed(Duration(seconds: 3));
        print("Leaving A future completed");
      },
      transitions: [
        Transition(id: "A=>B", to: "B"),
      ],
    ),
    ComposerState(
      id: "B",
      onEnter: (stateMachine) {
        print("Entered B");

        expect(stateMachine.lastState!.id, "A");
        expect(stateMachine.currentState!.id, "B");
      },
      onLeave: (currentState, nextState) {
        print("leaving B");

        expect(currentState.id, "B");
        expect(nextState.id, "A");
      },
      transitions: [
        Transition(id: "B=>A", to: "A"),
      ],
    )
  ],
);

状态之间的转换

print(machine.currentState!.id) // A
await machine.transitionTo("B");
// Leaving A
// Leaving A future completed
// Entered B
print(machine.currentState!.id) // B

通用状态和转换类型

你可以创建自定义的状态和转换，这些状态和转换扩展自 ComposerState 和 Transition。要查看示例，请参阅 flutter_chat_composer 的模型，该模型扩展了 state_composer 以基于状态机创建聊天机器人。

监听状态变化

使用状态机的 stateStream 来监听状态变化。

machine.stateStream.listen((currentState) {
  print("State Changed to ${currentState.id}");
});

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

1 回复

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


state_composer 是一个用于 Flutter 的状态管理插件，它旨在简化状态管理并提高代码的可读性和可维护性。state_composer 提供了一种组合状态的方式，使得开发者可以更灵活地管理应用的状态。

安装

首先，你需要在 pubspec.yaml 文件中添加 state_composer 依赖：

dependencies:
  flutter:
    sdk: flutter
  state_composer: ^1.0.0  # 请使用最新版本

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

基本使用

state_composer 的核心思想是通过组合多个状态来管理应用的复杂状态。你可以将状态分解为多个小的状态单元，然后将它们组合在一起。

1. 创建状态单元

首先，你需要创建一些状态单元。每个状态单元都是一个 StateNotifier 或者 ValueNotifier。

import 'package:state_composer/state_composer.dart';

class CounterState extends StateNotifier<int> {
  CounterState() : super(0);

  void increment() => state++;
  void decrement() => state--;
}

2. 组合状态单元

接下来，你可以将这些状态单元组合在一起，形成一个更大的状态。

class AppState {
  final CounterState counter;

  AppState({required this.counter});
}

3. 使用 StateComposer 管理状态

StateComposer 可以帮助你管理这些组合状态。

final appStateComposer = StateComposer<AppState>(
  () => AppState(counter: CounterState()),
);

4. 在 UI 中使用状态

你可以使用 StateComposerBuilder 来监听状态的变化，并在 UI 中响应这些变化。

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StateComposerBuilder<AppState>(
        composer: appStateComposer,
        builder: (context, state) {
          return Scaffold(
            appBar: AppBar(
              title: Text('State Composer Example'),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Counter: ${state.counter.state}',
                    style: Theme.of(context).textTheme.headline4,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      ElevatedButton(
                        onPressed: () => state.counter.increment(),
                        child: Text('Increment'),
                      ),
                      SizedBox(width: 20),
                      ElevatedButton(
                        onPressed: () => state.counter.decrement(),
                        child: Text('Decrement'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}
回到顶部