Flutter状态管理插件states_rebuilder的使用

简介

states_rebuilder 是一个用于Flutter应用程序的状态管理库，它具有以下特点：

• 代码清晰：分离UI和业务逻辑、零样板代码、纯Dart编写业务逻辑。
• 性能优越：支持不可变/可变状态、可预测且可控、严格控制重建。
• 用户友好：优雅轻量级语法、在无状态小部件中使用SetState和动画、无需BuildContext的导航、内置依赖注入系统。
• 高效生产：易于CRUD开发、用户认证授权、应用主题和多语言管理、易于测试和模拟依赖。

安装与导入

1. 安装包：

   • 使用Flutter命令安装：

     flutter pub add states_rebuilder
     

   • 或者在pubspec.yaml中添加依赖：

     dependencies:
       states_rebuilder: ^5.0.0
     

2. 导入库：

   import 'package:states_rebuilder/states_rebuilder.dart';
   

基本用法示例

1. 创建计数器应用

业务逻辑类（ViewModel）

class Counter {
  final int value;
  Counter(this.value);

  @override
  String toString() => 'Counter($value)';
}

@immutable
class ViewModel {
  final counter1 = 0.inj();
  final counter2 = RM.inject<Counter>(
    () => Counter(0),
    undoStackLength: 8,
    debugPrintWhenNotifiedPreMessage: 'counter2',
  );

  int get sum => counter1.state + counter2.state.value;

  void incrementCounter1() {
    counter1.state++;
  }

  void incrementCounter2() {
    counter2.state = Counter(counter2.state.value + 1);
  }
}

全局实例化ViewModel

final viewModel = ViewModel();

UI部分（CounterApp）

class CounterApp extends ReactiveStatelessWidget {
  const CounterApp();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Counter1View(), // Not const to make it rebuildable
            const Counter2View(), // Notice the use of const modifier (good approach)
            Text('Result: ${viewModel.sum}'), // Will be updated when sum changes
          ],
        ),
      ),
    );
  }
}

class Counter1View extends StatelessWidget {
  const Counter1View({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          child: const Text('Counter1 ++'),
          onPressed: () => viewModel.incrementCounter1(),
        ),
        Text('Counter1 value: ${viewModel.counter1.state}'),
      ],
    );
  }
}

class Counter2View extends ReactiveStatelessWidget {
  const Counter2View({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          child: const Text('Counter2 ++'),
          onPressed: () => viewModel.incrementCounter2(),
        ),
        ElevatedButton(
          child: const Text('Undo'),
          onPressed: () => viewModel.counter2.undoState(),
        ),
        Text('Counter2 value: ${viewModel.counter2.state.value}'),
      ],
    );
  }
}

2. 注册并监听状态变化

使用OnReactive或ReactiveStatelessWidget来注册并监听状态变化。例如，在CounterApp中，我们使用了ReactiveStatelessWidget来自动注册并监听状态变化。

3. 状态持久化

可以通过设置persist参数来实现状态的持久化：

final model = RM.inject<MyModel>(
  () => MyModel(),
  persist: () => PersistState(
    key: 'modelKey',
    toJson: (MyModel s) => s.toJson(),
    fromJson: (String json) => MyModel.fromJson(json),
    throttleDelay: 1000,
  ),
);

4. 动态主题切换

动态切换主题可以通过RM.injectTheme来实现：

final theme = RM.injectTheme<String>(
  lightThemes: {
    'simple': ThemeData.light(...),
    'solarized': ThemeData.light(...),
  },
  darkThemes: {
    'simple': ThemeData.dark(...),
    'solarized': ThemeData.dark(...),
  },
  themeMode: ThemeMode.system,
  persistKey: '__theme__',
);

// 切换主题
theme.state = 'solarized';
// 切换深浅模式
theme.toggle();

5. 国际化与本地化

通过RM.injectI18N实现国际化和本地化：

final i18n = RM.injectI18N<EnUS>(
  {
    Locale('en', 'US'): () => EnUS(),
    Locale('es', 'ES'): () => EsEs(),
  },
  persistKey: '__lang__',
);

Text(i18n.of(context).helloWorld);

总结

states_rebuilder 提供了一种简洁且功能强大的方式来进行Flutter应用的状态管理。通过上述基本用法和示例代码，您可以快速上手并在实际项目中应用该库。更多高级功能和详细信息可以参考官方文档和示例项目。