Flutter 主流状态管理方案深度对比

Flutter 主流状态管理方案深度对比 (State Management Solutions)

---

前言

Flutter 的状态管理生态是整个框架中讨论最多也最容易引战的话题。setState、Provider、Riverpod、BLoC、GetX、MobX、Signals……选哪个？

本文不给出"最好"的答案——因为不存在这样的答案。我们用同一个业务需求（购物车）分别用 4 种主流方案实现，通过代码量、可测试性、学习曲线等维度对比，帮你在不同场景下做出合理选择。

---

一、状态分类：先搞清楚你管理的是什么状态

在选方案之前，先对状态分类：

状态类型	定义	最适合的方案
局部 UI 状态	仅在单个 Widget 内使用，如表单输入、展开/折叠	setState
共享 UI 状态	多个 Widget 共用，如主题、语言	Provider / InheritedWidget
业务状态	领域数据，如用户信息、购物车、订单	Riverpod / BLoC
服务器状态	远程数据的缓存、加载状态	Riverpod FutureProvider
路由状态	当前页面、导航栈	go_router

---

二、方案一：setState（局部状态的王者）

适用场景

• 状态只在单个 StatefulWidget 内使用
• 不需要在多个 Widget 间共享
• 简单的 UI 交互状态

购物车实现

class CartPage extends StatefulWidget {
  @override
  State<CartPage> createState() => _CartPageState();
}

class _CartPageState extends State<CartPage> {
  final List<CartItem> _items = [];

  double get _total => _items.fold(0, (sum, item) => sum + item.price * item.quantity);

  void _addItem(Product product) {
    setState(() {
      final index = _items.indexWhere((i) => i.product.id == product.id);
      if (index != -1) {
        _items[index] = _items[index].copyWith(quantity: _items[index].quantity + 1);
      } else {
        _items.add(CartItem(product: product, quantity: 1));
      }
    });
  }

  void _removeItem(String productId) {
    setState(() {
      _items.removeWhere((i) => i.product.id == productId);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('购物车 (${_items.length})')),
      body: ListView.builder(
        itemCount: _items.length,
        itemBuilder: (context, index) {
          final item = _items[index];
          return ListTile(
            title: Text(item.product.name),
            subtitle: Text('¥${item.price} × ${item.quantity}'),
            trailing: IconButton(
              icon: const Icon(Icons.delete),
              onPressed: () => _removeItem(item.product.id),
            ),
          );
        },
      ),
      bottomNavigationBar: BottomAppBar(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('合计：¥${_total.toStringAsFixed(2)}',
                  style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
              ElevatedButton(
                onPressed: _items.isEmpty ? null : () { /* 结算 */ },
                child: const Text('结算'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

优点： 零依赖、简单直接、IDE 支持完美
缺点： 状态无法跨 Widget 共享，需要 Prop Drilling

---

三、方案二：Provider（业界最广泛）

核心思想

ChangeNotifier + InheritedWidget 封装 = 响应式状态管理

购物车实现

// 1. 定义状态模型
class CartModel extends ChangeNotifier {
  final List<CartItem> _items = [];
  
  List<CartItem> get items => List.unmodifiable(_items);
  double get total => _items.fold(0, (sum, item) => sum + item.price * item.quantity);
  int get itemCount => _items.length;

  void addItem(Product product) {
    final index = _items.indexWhere((i) => i.product.id == product.id);
    if (index != -1) {
      _items[index] = _items[index].copyWith(quantity: _items[index].quantity + 1);
    } else {
      _items.add(CartItem(product: product, quantity: 1));
    }
    notifyListeners();
  }

  void removeItem(String productId) {
    _items.removeWhere((i) => i.product.id == productId);
    notifyListeners();
  }

  void clear() {
    _items.clear();
    notifyListeners();
  }
}

// 2. 在顶层提供
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => CartModel(),
      child: const MyApp(),
    ),
  );
}

// 3. 在子 Widget 中消费

// 方式一：Consumer（细粒度重建）
class CartBadge extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<CartModel>(
      builder: (context, cart, child) {
        // 只有 CartModel 变化时，这个 builder 才会重新执行
        return Badge(
          label: Text('${cart.itemCount}'),
          child: child!, // child 是静态部分，不参与重建
        );
      },
      child: const Icon(Icons.shopping_cart), // 静态部分
    );
  }
}

// 方式二：context.watch（简洁）
class CartTotalWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final total = context.watch<CartModel>().total; // 订阅，变化时重建
    return Text('¥${total.toStringAsFixed(2)}');
  }
}

// 方式三：context.select（精确订阅）
class CartCountWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 只有 itemCount 变化时才重建，total 等其他属性变化不重建
    final count = context.select<CartModel, int>((cart) => cart.itemCount);
    return Text('共 $count 件');
  }
}

// 方式四：context.read（不订阅，用于事件处理）
class AddToCartButton extends StatelessWidget {
  final Product product;
  const AddToCartButton({super.key, required this.product});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        // 不需要订阅，只需要触发动作
        context.read<CartModel>().addItem(product);
      },
      child: const Text('加入购物车'),
    );
  }
}

代码量对比： 比 setState 多 ~30 行（模型定义），但可全局共享
可测试性： ✅ 好（ChangeNotifier 独立测试）
学习成本： ✅ 低

---

四、方案三：BLoC（企业级事件驱动）

核心思想

Business Logic Component：UI 发送 Event，BLoC 处理后输出 State，UI 响应 State。

UI ──Event──▶ BLoC ──State──▶ UI
              （纯函数转换）

购物车实现

// 1. 定义事件
abstract class CartEvent {}
class AddToCart extends CartEvent {
  final Product product;
  AddToCart(this.product);
}
class RemoveFromCart extends CartEvent {
  final String productId;
  RemoveFromCart(this.productId);
}
class ClearCart extends CartEvent {}

// 2. 定义状态
class CartState {
  final List<CartItem> items;
  final bool isLoading;
  final String? error;

  const CartState({
    this.items = const [],
    this.isLoading = false,
    this.error,
  });

  double get total => items.fold(0, (sum, item) => sum + item.price * item.quantity);
  int get itemCount => items.length;

  CartState copyWith({List<CartItem>? items, bool? isLoading, String? error}) {
    return CartState(
      items: items ?? this.items,
      isLoading: isLoading ?? this.isLoading,
      error: error,
    );
  }
}

// 3. 定义 BLoC
class CartBloc extends Bloc<CartEvent, CartState> {
  CartBloc() : super(const CartState()) {
    on<AddToCart>(_onAddToCart);
    on<RemoveFromCart>(_onRemoveFromCart);
    on<ClearCart>(_onClearCart);
  }

  void _onAddToCart(AddToCart event, Emitter<CartState> emit) {
    final items = List<CartItem>.from(state.items);
    final index = items.indexWhere((i) => i.product.id == event.product.id);
    
    if (index != -1) {
      items[index] = items[index].copyWith(quantity: items[index].quantity + 1);
    } else {
      items.add(CartItem(product: event.product, quantity: 1));
    }
    
    emit(state.copyWith(items: items));
  }

  void _onRemoveFromCart(RemoveFromCart event, Emitter<CartState> emit) {
    final items = state.items.where((i) => i.product.id != event.productId).toList();
    emit(state.copyWith(items: items));
  }

  void _onClearCart(ClearCart event, Emitter<CartState> emit) {
    emit(const CartState());
  }
}

// 4. 提供和消费
void main() {
  runApp(
    BlocProvider(
      create: (_) => CartBloc(),
      child: const MyApp(),
    ),
  );
}

// BlocBuilder：State 变化时重建
class CartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CartBloc, CartState>(
      builder: (context, state) {
        if (state.isLoading) return const CircularProgressIndicator();
        
        return ListView.builder(
          itemCount: state.items.length,
          itemBuilder: (context, index) {
            final item = state.items[index];
            return ListTile(
              title: Text(item.product.name),
              trailing: IconButton(
                icon: const Icon(Icons.delete),
                onPressed: () {
                  context.read<CartBloc>().add(RemoveFromCart(item.product.id));
                },
              ),
            );
          },
        );
      },
    );
  }
}

// BlocSelector：精确订阅
class CartCountBadge extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocSelector<CartBloc, CartState, int>(
      selector: (state) => state.itemCount, // 只有 itemCount 变化时重建
      builder: (context, count) => Badge(label: Text('$count')),
    );
  }
}

// BlocListener：监听状态变化执行副作用（如跳转、弹窗）
class CheckoutButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<CartBloc, CartState>(
      listenWhen: (prev, curr) => prev.error != curr.error && curr.error != null,
      listener: (context, state) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text(state.error!)),
        );
      },
      child: ElevatedButton(
        onPressed: () {/* 结算逻辑 */},
        child: const Text('结算'),
      ),
    );
  }
}

代码量对比： 比 Provider 多 ~50%（Event/State 定义冗长）
可测试性： ✅✅ 极好（纯函数，bloc_test 库支持）
学习成本： ⚠️ 中等（需理解事件驱动思想）

BLoC 的测试

// bloc_test 让 BLoC 测试极其优雅
blocTest<CartBloc, CartState>(
  'AddToCart 应该增加购物车数量',
  build: () => CartBloc(),
  act: (bloc) {
    bloc.add(AddToCart(Product(id: '1', name: '苹果', price: 5.0)));
    bloc.add(AddToCart(Product(id: '1', name: '苹果', price: 5.0))); // 重复添加
  },
  expect: () => [
    CartState(items: [CartItem(product: Product(id: '1', name: '苹果', price: 5.0), quantity: 1)]),
    CartState(items: [CartItem(product: Product(id: '1', name: '苹果', price: 5.0), quantity: 2)]),
  ],
);

---

五、方案四：Riverpod（现代化依赖注入）

Riverpod 的深度解析见下一篇文章，本节只做对比性介绍。

// 1. 定义 Provider
final cartProvider = StateNotifierProvider<CartNotifier, CartState>((ref) {
  return CartNotifier();
});

class CartNotifier extends StateNotifier<CartState> {
  CartNotifier() : super(const CartState());

  void addItem(Product product) {
    final items = List<CartItem>.from(state.items);
    final index = items.indexWhere((i) => i.product.id == product.id);
    
    if (index != -1) {
      items[index] = items[index].copyWith(quantity: items[index].quantity + 1);
    } else {
      items.add(CartItem(product: product, quantity: 1));
    }
    
    state = state.copyWith(items: items);
  }

  void removeItem(String productId) {
    state = state.copyWith(
      items: state.items.where((i) => i.product.id != productId).toList(),
    );
  }
}

// 2. 消费（ConsumerWidget 或 Consumer）
class CartPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final cartState = ref.watch(cartProvider);
    
    return ListView.builder(
      itemCount: cartState.items.length,
      itemBuilder: (context, index) {
        final item = cartState.items[index];
        return ListTile(
          title: Text(item.product.name),
          trailing: IconButton(
            icon: const Icon(Icons.delete),
            onPressed: () => ref.read(cartProvider.notifier).removeItem(item.product.id),
          ),
        );
      },
    );
  }
}

// 精确订阅（类似 BlocSelector）
class CartCountBadge extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 只有 itemCount 变化时重建
    final count = ref.watch(cartProvider.select((s) => s.itemCount));
    return Badge(label: Text('$count'));
  }
}

---

六、方案五：GetX（简洁与隐式依赖的权衡）

// GetX 的控制器
class CartController extends GetxController {
  final RxList<CartItem> items = <CartItem>[].obs;
  
  double get total => items.fold(0, (sum, item) => sum + item.price * item.quantity);
  int get itemCount => items.length;
  
  void addItem(Product product) {
    final index = items.indexWhere((i) => i.product.id == product.id);
    if (index != -1) {
      items[index] = items[index].copyWith(quantity: items[index].quantity + 1);
    } else {
      items.add(CartItem(product: product, quantity: 1));
    }
  }
  
  void removeItem(String productId) {
    items.removeWhere((i) => i.product.id == productId);
  }
}

// 使用（无需 BuildContext，无需 Provider 包裹根 Widget）
class CartPage extends StatelessWidget {
  final CartController controller = Get.put(CartController()); // 注册并获取
  
  @override
  Widget build(BuildContext context) {
    return Obx(() => ListView.builder(
      itemCount: controller.itemCount,
      itemBuilder: (context, index) {
        final item = controller.items[index];
        return ListTile(
          title: Text(item.product.name),
          trailing: IconButton(
            icon: const Icon(Icons.delete),
            onPressed: () => controller.removeItem(item.product.id),
          ),
        );
      },
    ));
  }
}

优点： 极少的样板代码，无需 BuildContext
缺点： 全局状态隐式注入，依赖不可见（测试困难）；Get.find 失败难以调试；与 Flutter 的声明式哲学背离

---

七、横向对比：同一需求四种方案对比

维度	setState	Provider	BLoC	Riverpod
代码行数	~80	~120	~180	~130
样板代码	最少	少	较多	少
可测试性	⚠️ 需要 Widget 测试	✅ 单元测试	✅✅ 优秀	✅✅ 优秀
学习曲线	✅ 极低	✅ 低	⚠️ 中等	⚠️ 中等
编译期安全	✅	✅	✅	✅✅ 最高
ProviderScope 依赖	否	是	否（BlocProvider）	是（ProviderScope）
调试工具	FlutterDevTools	Provider DevTools	BLoC Observer	Riverpod DevTools
状态共享	❌ 仅局部	✅	✅	✅✅ 全局无 BuildContext
异步支持	手动	手动	✅（EventHandler）	✅✅（FutureProvider）
适合团队规模	个人/小团队	中小团队	中大团队	中大团队

---

八、选型建议

🟢 选 setState 当：

• 状态只在单个页面内使用
• 快速原型或简单 Demo

🟡 选 Provider 当：

• 团队已熟悉 ChangeNotifier 模式
• 中小型项目，状态不复杂
• 需要从 InheritedWidget 渐进式迁移

🔵 选 BLoC 当：

• 企业级项目，严格分层架构
• 需要事件溯源（Event Sourcing）
• 团队有 Redux/Flux 背景
• 对可测试性要求极高

🟣 选 Riverpod 当：

• 新项目，不受历史包袱限制
• 需要编译期安全（无 BuildContext 依赖）
• 有复杂的异步数据流（FutureProvider/StreamProvider）
• 需要 Provider 之间的依赖关系管理

❌ 谨慎选 GetX 当：

• 对团队技术要求不高，追求快速开发
• 注意：大型项目中 GetX 的隐式依赖会导致维护困难

---

九、实际项目的混合使用

不同粒度的状态可以混用方案，这才是实际项目的常态。

// 架构示例：Riverpod（业务状态）+ setState（UI 状态）

class ProductListPage extends ConsumerStatefulWidget {
  @override
  ConsumerState<ProductListPage> createState() => _ProductListPageState();
}

class _ProductListPageState extends ConsumerState<ProductListPage> {
  // ✅ 搜索框的输入状态 → 局部 setState
  final _searchController = TextEditingController();
  String _searchQuery = '';

  @override
  Widget build(BuildContext context) {
    // ✅ 产品列表数据 → Riverpod FutureProvider
    final productsAsync = ref.watch(productsProvider(_searchQuery));
    
    // ✅ 购物车数量 → Riverpod StateNotifierProvider
    final cartCount = ref.watch(cartProvider.select((s) => s.itemCount));

    return Scaffold(
      appBar: AppBar(
        title: TextField(
          controller: _searchController,
          onChanged: (query) {
            // UI 状态用 setState
            setState(() => _searchQuery = query);
          },
        ),
        actions: [Badge(label: Text('$cartCount'), child: const Icon(Icons.shopping_cart))],
      ),
      body: productsAsync.when(
        data: (products) => ListView.builder(
          itemCount: products.length,
          itemBuilder: (context, index) => ProductCard(product: products[index]),
        ),
        loading: () => const CircularProgressIndicator(),
        error: (e, _) => Text('Error: $e'),
      ),
    );
  }
}

---

十、过关自检

Q：能根据项目规模和团队情况给出状态管理方案的选型建议并说明理由？

参考第八节的选型建议。核心判断维度：

1. 状态范围：局部状态 → setState；全局共享 → Provider/Riverpod/BLoC
2. 团队规模：小团队追求简单 → Provider；大团队追求规范 → BLoC 或 Riverpod
3. 异步复杂度：有复杂异步流 → Riverpod FutureProvider/StreamProvider；事件驱动 → BLoC
4. 可测试性要求：高要求 → BLoC（bloc_test 生态完善）或 Riverpod（无 BuildContext 依赖）
5. 历史包袱：老项目已用 Provider → 继续；新项目 → 推荐 Riverpod

---

小结

没有"最好"的状态管理方案，只有"最适合当前场景"的方案。理解每种方案的本质：

• setState = 局部可变状态，触发当前 Widget 重建
• Provider = ChangeNotifier + InheritedWidget，响应式数据流
• BLoC = Event → State 的纯函数映射，最适合事件驱动架构
• Riverpod = 编译期安全的依赖注入 + 响应式，无 BuildContext 污染

---

上一篇：12. InheritedWidget 与依赖注入 (InheritedWidget & DI)
下一篇：14. Riverpod 深入 (Riverpod Advanced)