Flutter基础架构插件basic_bloc_dart的使用

Flutter基础架构插件basic_bloc_dart的使用

basic_bloc_dart 是一个简单的 Bloc（Business Logic Component）库，用于在 Flutter 应用中管理状态流。Bloc 模式是一种将 UI 和业务逻辑分离的架构模式，它通过事件驱动的方式更新状态。

特性

• 简单易用。
• 支持事件驱动的状态管理。
• 提供清晰的状态流。

安装

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

dependencies:
  basic_bloc_dart: ^1.0.0

然后运行以下命令以安装依赖：

flutter pub get

使用示例

1. 创建 Bloc 类

创建一个继承自 Bloc 的类，并定义事件类型和状态类型。

import 'package:basic_bloc_dart/basic_bloc.dart';

// 定义事件类型
abstract class CounterEvent {}

class IncrementEvent extends CounterEvent {}

class DecrementEvent extends CounterEvent {}

// 定义状态类型
class CounterState {
  final int count;

  CounterState({required this.count});
}

// 创建 Bloc
class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterState(count: 0));

  [@override](/user/override)
  Stream<CounterState> mapEventToState(CounterEvent event) async* {
    if (event is IncrementEvent) {
      yield CounterState(count: state.count + 1);
    } else if (event is DecrementEvent) {
      yield CounterState(count: state.count - 1);
    }
  }
}

2. 在 Widget 中使用 Bloc

在 Flutter 应用中使用 Bloc 来管理状态。

import 'package:flutter/material.dart';
import 'counter_bloc.dart'; // 导入刚才创建的 Bloc

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        bloc: CounterBloc(), // 提供 Bloc 实例
        child: CounterPage(),
      ),
    );
  }
}

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

class _CounterPageState extends State<CounterPage> {
  late CounterBloc _bloc; // 声明 Bloc

  [@override](/user/override)
  void initState() {
    super.initState();
    _bloc = BlocProvider.of(context); // 获取 Bloc 实例
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Basic Bloc Example'),
      ),
      body: Center(
        child: StreamBuilder<CounterState>(
          stream: _bloc.stateStream, // 订阅状态流
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return CircularProgressIndicator();
            }
            return Text(
              'Count: ${snapshot.data!.count}',
              style: TextStyle(fontSize: 24),
            );
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () {
              _bloc.add(IncrementEvent()); // 发送事件
            },
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {
              _bloc.add(DecrementEvent()); // 发送事件
            },
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    _bloc.close(); // 关闭 Bloc
    super.dispose();
  }
}