Provider 与 BLoC 的区别

Provider 和 BLoC 都是 Flutter 中非常流行的 状态管理 方案，但它们的设计理念和使用场景有所不同。下面我会从多个维度详细对比它们，以帮助你理解两者的优缺点和应用场景。

一、基本概念对比

二、实现方式对比

1️⃣ Provider 示例

Provider 是最常用的 Flutter 状态管理库之一，基于 ChangeNotifier 或 ValueNotifier 实现状态的管理和更新。它简单易用，适合大多数的状态管理需求。

// 1. 创建一个 ChangeNotifier 管理状态
class Counter with ChangeNotifier {
  int _count = 0;
  
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // 通知UI更新
  }
}

// 2. 使用 Provider 提供和获取状态
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text("Provider Example")),
          body: Consumer<Counter>(
            builder: (context, counter, child) {
              return Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('Count: ${counter.count}'),
                    ElevatedButton(
                      onPressed: () => counter.increment(),
                      child: Text('Increment'),
                    ),
                  ],
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

2️⃣ BLoC 示例

BLoC 是通过 Streams 来处理事件（Event）和状态（State）。BLoC 适合较为复杂的业务逻辑和状态更新。事件被触发时，BLoC 会通过 Stream 输出新的状态。

// 1. 创建事件和状态类
abstract class CounterEvent {}

class IncrementEvent extends CounterEvent {}

abstract class CounterState {}

class CounterInitial extends CounterState {}

class CounterValue extends CounterState {
  final int count;
  CounterValue(this.count);
}

// 2. 创建 BLoC 类
class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterInitial());

  @override
  Stream<CounterState> mapEventToState(CounterEvent event) async* {
    if (event is IncrementEvent) {
      if (state is CounterValue) {
        yield CounterValue((state as CounterValue).count + 1);
      } else {
        yield CounterValue(1);
      }
    }
  }
}

// 3. 使用 BLoC 在 UI 中
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => CounterBloc(),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text("BLoC Example")),
          body: BlocBuilder<CounterBloc, CounterState>(
            builder: (context, state) {
              if (state is CounterValue) {
                return Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('Count: ${state.count}'),
                      ElevatedButton(
                        onPressed: () {
                          context.read<CounterBloc>().add(IncrementEvent());
                        },
                        child: Text('Increment'),
                      ),
                    ],
                  ),
                );
              }
              return Center(child: CircularProgressIndicator());
            },
          ),
        ),
      ),
    );
  }
}