Flutter状态管理插件bloc_pod的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter状态管理插件bloc_pod的使用

Pod

License: MIT

⚠️ 状态:实验性


一个依赖注入和状态管理库,快速、简单且可组合。

灵感来自RiverpodJōtai

Pub
pod pub package
flutter_pod pub package
bloc_pod pub package

快速开始

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

import 'package:bloc_pod/bloc_pod.dart';

/// 计数器事件
sealed class CounterEvent {}
final class CounterIncrementPressed extends CounterEvent {}

/// 计数器BLoC
class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<CounterIncrementPressed>((event, emit) => emit(state + 1));
  }
}

/// 创建一个BLoC Pod
final counterBloc = blocPod<CounterBloc, int>((_) => CounterBloc());

/// 在Widget中使用计数器BLoC
///
/// 需要添加并导入flutter_pod
class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = context.watch(counterBloc);

    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text('$counter'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read(counterBloc.notifier).add(CounterIncrementPressed());
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

完整示例Demo

import 'package:bloc_pod/bloc_pod.dart';

/// 计数器事件
sealed class CounterEvent {}

final class CounterIncrementPressed extends CounterEvent {}

/// 计数器BLoC
class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<CounterIncrementPressed>((event, emit) => emit(state + 1));
  }
}

/// 创建一个计数器BLoC Pod
final counterBloc = blocPod<CounterBloc, int>((_) => CounterBloc());

void main() async {
  // 创建一个Pod容器。
  final container = PodContainer();

  // 打印计数器BLoC Pod的值。
  print(container.get(counterBloc)); // 0

  // 订阅计数器BLoC Pod的值变化。
  final cancelSubscribe = container.subscribe(counterBloc, (value) {
    print(value); // 1
  });

  // 增加计数器BLoC的值。
  container.get(counterBloc.notifier).add(CounterIncrementPressed());

  /// 等待下一个事件循环迭代
  /// 以确保事件已处理。
  await Future<void>.delayed(Duration.zero);

  // 取消计数器BLoC Pod的订阅。
  cancelSubscribe();
}

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

1 回复

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


当然,bloc 是 Flutter 社区中一个非常流行的状态管理库,它基于响应式编程原理,非常适合管理复杂的应用状态。虽然你提到的 bloc_pod 并不是一个广泛认可的 Flutter 插件或库,但假设你是指在使用 bloc 状态管理库时结合某种架构或模式(可能类似于“pod”概念,用于模块化),下面是一个使用 bloc 库管理状态的代码案例。

Flutter 项目中使用 bloc 状态管理

1. 添加依赖

首先,在你的 pubspec.yaml 文件中添加 flutter_bloc 依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_bloc: ^8.0.0  # 请检查最新版本

然后运行 flutter pub get

2. 创建 Cubit 和 State

假设我们有一个简单的计数器应用,我们将创建一个 CounterCubit 和相应的状态 CounterState

// counter_state.dart
part of 'counter_cubit.dart';

abstract class CounterState {}

class CounterInitial extends CounterState {}

class CounterChanged extends CounterState {
  final int count;
  CounterChanged(this.count);
}
// counter_cubit.dart
import 'package:bloc/bloc.dart';
import 'package:equatable/equatable.dart';

part 'counter_state.dart';

class CounterCubit extends Cubit<CounterState> {
  CounterCubit() : super(CounterInitial());

  void increment() {
    emit(CounterChanged(state is CounterChanged ? (state as CounterChanged).count + 1 : 1));
  }

  void decrement() {
    emit(CounterChanged(state is CounterChanged ? (state as CounterChanged).count - 1 : 0));
  }
}

3. 使用 Cubit 在 UI 中

在你的 Flutter 应用中使用 BlocBuilder 来监听 CounterCubit 的状态变化并更新 UI。

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'counter_cubit.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BlocProvider(
        create: (context) => CounterCubit(),
        child: CounterPage(),
      ),
    );
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            BlocBuilder<CounterCubit, CounterState>(
              builder: (context, state) {
                if (state is CounterChanged) {
                  return Text(
                    'You have pushed the button this many times:',
                    style: Theme.of(context).textTheme.headline4,
                  );
                } else if (state is CounterInitial) {
                  return Text('Initial State');
                } else {
                  return Text('Unknown State');
                }
              },
            ),
            SizedBox(height: 20),
            BlocBuilder<CounterCubit, CounterState>(
              builder: (context, state) {
                if (state is CounterChanged) {
                  return Text(
                    '${state.count}',
                    style: Theme.of(context).textTheme.headline4,
                    style: TextStyle(fontSize: 50),
                  );
                } else {
                  return Text('0', style: TextStyle(fontSize: 50));
                }
              },
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () => context.read<CounterCubit>().increment(),
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () => context.read<CounterCubit>().decrement(),
            tooltip: 'Decrement',
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

总结

上述代码展示了如何在 Flutter 应用中使用 bloc 库进行状态管理。我们通过创建一个 CounterCubit 来管理计数器的状态,并在 UI 中使用 BlocBuilder 来监听状态变化并更新界面。这种模式可以扩展到更复杂的应用,帮助开发者更好地管理应用状态。

如果你有特定的“pod”概念或架构需求,可以在此基础上进一步模块化你的代码,比如将不同的功能或页面拆分成独立的模块(pods),每个模块都有自己的 bloc 管理状态。

回到顶部