Flutter Bloc模式 #

一、Bloc基础 #

1.1 安装 #

yaml

dependencies:
  flutter_bloc: ^8.1.3

1.2 核心概念 #

Bloc模式基于事件驱动：

text

Event → Bloc → State

二、基本用法 #

2.1 定义事件 #

dart

abstract class CounterEvent {}

class Increment extends CounterEvent {}

class Decrement extends CounterEvent {}

2.2 定义Bloc #

dart

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<Increment>((event, emit) => emit(state + 1));
    on<Decrement>((event, emit) => emit(state - 1));
  }
}

2.3 使用Bloc #

dart

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => CounterBloc(),
      child: Scaffold(
        body: BlocBuilder<CounterBloc, int>(
          builder: (context, count) => Text('$count'),
        ),
        floatingActionButton: Column(
          children: [
            FloatingActionButton(
              onPressed: () => context.read<CounterBloc>().add(Increment()),
              child: Icon(Icons.add),
            ),
            FloatingActionButton(
              onPressed: () => context.read<CounterBloc>().add(Decrement()),
              child: Icon(Icons.remove),
            ),
          ],
        ),
      ),
    );
  }
}

三、Cubit #

3.1 定义Cubit #

dart

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);
  
  void increment() => emit(state + 1);
  void decrement() => emit(state - 1);
}

3.2 使用Cubit #

dart

BlocProvider(
  create: (_) => CounterCubit(),
  child: BlocBuilder<CounterCubit, int>(
    builder: (context, count) => Text('$count'),
  ),
)

四、总结 #

4.1 核心概念 #

概念	说明
Event	触发状态变化的事件
State	应用状态
Bloc	处理事件并发出状态
Cubit	简化版Bloc
BlocBuilder	监听状态变化

4.2 下一步 #

让我们学习导航基础！