Flutter状态管理插件riverbloc的使用

简介

riverbloc 是一个基于 riverpod providers 实现的 BlocProvider，旨在简化从 flutter_bloc 到 flutter_riverpod 的迁移过程。它允许你以一种更现代、更高效的方式管理应用的状态。

如果你对 hooks 和 bloc 感兴趣，可以查看 flutter_hooks_bloc。

使用方法

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 riverbloc 依赖：

dependencies:
  flutter:
    sdk: flutter
  riverbloc: ^0.1.0 # 请根据最新版本进行调整

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

2. 创建 Cubit

接下来，创建一个继承自 Cubit 的类来管理状态。这里我们创建一个简单的计数器 CounterCubit：

import 'package:flutter_bloc/flutter_bloc.dart';

class CounterCubit extends Cubit<int> {
  CounterCubit(super.state);

  void increment() => emit(state + 1);
}

3. 创建 Provider

使用 BlocProvider 创建一个提供者，并将其与 CounterCubit 关联起来：

import 'package:riverbloc/riverbloc.dart';

final counterProvider = BlocProvider<CounterCubit, int>(
  (ref) => CounterCubit(0),
);

4. 使用 Provider

在你的 UI 中使用这个提供者。下面是一个完整的示例，展示了如何在一个页面中使用 counterProvider：

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:riverbloc/riverbloc.dart';

void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends ConsumerWidget {
  const MyHomePage({required this.title, super.key});

  final String title;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 监听 cubit/bloc 的变化，但不会因为相同 cubit/bloc 的状态变化而重建
    final counterCubit = ref.watch(counterProvider.bloc);
    
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'initial counterCubit.state: ${counterCubit.state}',
            ),
            Consumer(
              builder: (context, ref, __) {
                // 每次状态发射时重建
                final counter = ref.watch(counterProvider);
                return Text(
                  '$counter',
                  style: Theme.of(context).textTheme.headlineMedium,
                );
              },
            ),
            Consumer(
              builder: (context, ref, __) {
                // 使用 when 和 select 方法处理复杂的状态转换逻辑
                final counter0 = ref.watch(
                  counterProvider
                      .when((prev, curr) => (curr + prev) % 5 == 0)
                      .select((state) => 2 * state),
                );
                return Text(
                  '$counter0',
                  style: Theme.of(context).textTheme.headlineMedium,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => ref.read(counterProvider.bloc).increment(),
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

5. 运行项目

确保所有设置正确后，运行你的 Flutter 项目：

flutter run

你应该会看到一个带有计数器的应用程序，点击加号按钮可以增加计数器的值，同时界面上会显示当前的计数值和经过计算后的特殊计数值（当计数器值满足特定条件时）。

总结

通过上述步骤，你可以轻松地将 riverbloc 集成到你的 Flutter 应用中，从而实现更加灵活且高效的状态管理。希望这个指南对你有所帮助！如果有任何问题或需要进一步的帮助，请随时提问。