Flutter状态管理插件get_cubit的使用

简介

GetCubit 是一个用于在 Dart/Flutter 应用中管理 Cubit 实例的包。Cubit 是一种状态管理模式，它允许将状态管理与使用该状态的小部件分离。通过 GetCubit 包，开发者可以注册单例或多实例的 Cubit 类，并在整个应用中轻松访问和操作这些状态。

安装

要使用此包，请在项目的 pubspec.yaml 文件中添加 get_cubit 依赖项：

dependencies:
  flutter:
    sdk: flutter
  get_cubit: ^版本号

或者运行以下命令：

flutter pub add get_cubit

使用方法

创建一个简单的 Cubit 类

下面是一个简单的 CounterCubit 示例：

import 'package:get_cubit/get_cubit.dart';

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

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

注册 Cubit 实例

注册新实例

// 注册一个新的实例
GetCubit.put(CounterCubit());

// 注册一个现有的实例
CounterCubit counterCubit = CounterCubit();
GetCubit.put(counterCubit);

// 另一种注册现有实例的方法
counterCubit.addInstanceToGetCubit<CounterCubit>();

使用唯一标识符创建多个实例

// 使用 ID 注册新实例
GetCubit.put(CounterCubit(), id: "cubit_1");
GetCubit.put(CounterCubit(), id: "cubit_2");

// 使用 ID 注册现有实例
CounterCubit counterCubit1 = CounterCubit();
CounterCubit counterCubit2 = CounterCubit();
GetCubit.put(counterCubit1, id: "cubit_1");
GetCubit.put(counterCubit2, id: "cubit_2");

// 另一种使用 ID 注册现有实例的方法
counterCubit1.addInstanceToGetCubit<CounterCubit>(id: "cubit_1");
counterCubit2.addInstanceToGetCubit<CounterCubit>(id: "cubit_2");

访问已注册的实例

可以通过 GetCubit.find() 方法访问已注册的实例。

// file_1.dart :
final CounterCubit counterCubit = GetCubit.put(CounterCubit());
print(counterCubit.state); // 0
counterCubit.increment();

// file_2.dart
print(GetCubit.find<CounterCubit>().state); // 1

使用 ID 访问已注册的实例

// file_1.dart :
final CounterCubit counterCubit1 = GetCubit.put(CounterCubit(), id: "cubit_1");
final CounterCubit counterCubit2 = GetCubit.put(CounterCubit(), id: "cubit_2");
counterCubit1.emit(5);
counterCubit2.emit(10);

// file_2.dart
print(GetCubit.find<CounterCubit>(id: "cubit_1").state); // 5
print(GetCubit.find<CounterCubit>(id: "cubit_2").state); // 10

删除已注册的实例

GetCubit.delete<CounterCubit>(); // 不带 ID
GetCubit.delete<CounterCubit>(id: "cubit_1"); // 带 ID

删除所有关联的 Cubit 实例

GetCubit.find<CounterCubit>().deleteAllInstances();

列出所有关联的唯一 ID

GetCubit.put(CounterCubit(), id: "c1");
GetCubit.put(CounterCubit(), id: "c2");
GetCubit.put(CounterCubit(), id: "c3");
GetCubit.put(CounterCubit(), id: "c4");
GetCubit.put(CounterCubit(), id: "c5");

List<String> ids = GetCubit.find<CounterCubit>().getAllInstanceIds();
print(ids); // [c1, c2, c3, c4, c5]

清除所有 Cubit 实例

GetCubit.flush();

示例 Demo

以下是完整的示例代码，展示了如何在 Flutter 应用中使用 GetCubit：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GetCubit Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final CounterCubit _counterCubit = GetCubit.put(CounterCubit());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GetCubit Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            StreamBuilder<int>(
              stream: _counterCubit.stream,
              initialData: _counterCubit.state,
              builder: (context, snapshot) {
                return Text(
                  '${snapshot.data}',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () => _counterCubit.increment(),
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
          SizedBox(width: 10),
          FloatingActionButton(
            onPressed: () => _counterCubit.decrement(),
            tooltip: 'Decrement',
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    GetCubit.delete<CounterCubit>();
    super.dispose();
  }
}

这个示例展示了一个简单的计数器应用，其中 CounterCubit 被用来管理状态，并且通过 GetCubit 进行实例管理。