Flutter依赖注入与状态管理插件koin_bloc的使用

简介

koin_bloc是一个用于简化 Bloc 库与 koin.dart结合使用的包。通过 koin_bloc，您可以轻松实现依赖注入和状态管理。

插件koin_bloc的使用方法

1. 创建 Cubit 或 Bloc

首先，创建一个 Cubit 或 Bloc 类。例如，我们创建一个计数器的 Cubit：

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

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

2. 定义模块

接下来，定义一个模块来注册您的 Cubit。模块可以定义单例 Cubit 或作用域 Cubit。

var cubitModule = Module()
  // 定义一个单例 Cubit。
  // 单例 Cubit 会在全局 Koin 上下文关闭时被销毁。
  ..cubit((s) => CounterCubit())
  // 定义一个作用域 Cubit，绑定到 MyScopeWidget。
  // 作用域 Cubit 会在作用域实例关闭时被销毁，
  // 即当 MyScopeWidget 被从 Widget 树中移除时。
  ..scope<MyScope>((scope) {
    scope.scopedCubit<CounterCubit>((scope) => CounterCubit());
  });

3. 集成到应用中

在应用启动时，初始化 Koin 并加载模块。

void main() {
  // 初始化 Koin
  startKoin((app) {
    app.modules([cubitModule]); // 加载模块
  });

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterPage(),
    );
  }
}

4. 在 Widget 中使用 Cubit

现在可以在 Widget 中注入并使用 Cubit。以下是一个简单的示例：

class CounterPage extends StatefulWidget {
  [@override](/user/override)
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  late final CounterCubit _counterCubit;

  [@override](/user/override)
  void initState() {
    super.initState();

    // 从 Koin 中获取 CounterCubit 实例
    _counterCubit = get();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Koin Bloc Example')),
      body: Center(
        child: StreamBuilder<int>(
          stream: _counterCubit.stream,
          initialData: _counterCubit.state,
          builder: (context, snapshot) {
            return Text(
              'Counter: ${snapshot.data}',
              style: TextStyle(fontSize: 24),
            );
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: _counterCubit.increment,
            child: Icon(Icons.add),
          ),
          SizedBox(height: 16),
          FloatingActionButton(
            onPressed: _counterCubit.decrement,
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    // 手动关闭 Cubit（如果需要）
    _counterCubit.close();
    super.dispose();
  }
}

5. 作用域 Cubit 示例

如果您需要定义作用域 Cubit，可以结合 MyScope 类使用：

class MyScope {}

var scopedCubitModule = Module()
  ..scope<MyScope>((scope) {
    scope.scopedCubit<CounterCubit>((scope) => CounterCubit());
  });

void main() {
  startKoin((app) {
    app.modules([scopedCubitModule]);
  });

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyScopeWidget(),
    );
  }
}

class MyScopeWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return BlocProvider<CounterCubit>(
      create: (context) => get(),
      child: CounterPage(),
    );
  }
}