Flutter Provider 状态管理：依赖注入与通知

在 Flutter 开发中，状态管理是构建响应式界面的核心。Provider 是 Google 官方推荐的状态管理方案之一，它通过依赖注入与通知机制，让你能够轻松地将数据与 UI 分离，并在数据变化时自动重建界面。本教程将从零开始，带你掌握 Provider 的实际使用方法。

为何选择 Provider？

Flutter 自带 setState，但在组件树深层或跨页面共享状态时会变得难以维护。Provider 解决了三个关键问题：

• 依赖注入：在任何子孙 Widget 中便捷获取顶层数据，无需层层传递。
• 响应式更新：数据变动时，只有依赖该数据的 Widget 才会重建，性能更好。
• 可测试性：将业务逻辑从 UI 中剥离，更易于单元测试。

Provider 的本质是对 InheritedWidget 的封装，但使用起来简单得多。

快速上手：安装与核心概念

在 pubspec.yaml 中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.1.1 # 请使用最新版本

核心概念只有三个类：ChangeNotifier、ChangeNotifierProvider 与 Consumer。

• ChangeNotifier：持有状态并具备发布通知的能力。
• ChangeNotifierProvider：将 ChangeNotifier 注入到 Widget 树中。
• Consumer：监听变化并自动重建 UI 的部分。

创建第一个可监听的状态模型

任何需要跨组件共享的数据，都应该封装成 ChangeNotifier 的子类。例如一个计数器：

import 'package:flutter/foundation.dart';

class CounterModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    // 通知所有监听者，数据已更新
    notifyListeners();
  }

  void decrement() {
    _count--;
    notifyListeners();
  }
}

为什么是 ChangeNotifier？

它提供 addListener 和 notifyListeners 方法。Provider 内部会订阅这些方法，从而在调用 notifyListeners 时触发界面刷新。这种模式比 setState 更精确——你只改变数据，UI 重建完全自动。

依赖注入：将状态放入 Widget 树

Provider 的注入功能让你在应用顶层或某个页面提供状态，其子孙节点可以直接获取，无需通过构造函数传递。

import 'package:provider/provider.dart';

void main() {
  runApp(
    // ChangeNotifierProvider 会创建并管理 CounterModel 的生命周期
    ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: const MyApp(),
    ),
  );
}

注入位置的选择

• 全局状态（如用户信息、主题）：放在 MaterialApp 的上级，所有页面均可访问。
• 页面局部状态：只在某个路由的 build 方法中使用 Provider，当页面退出时，状态会被自动释放。

在 UI 中响应状态变化

获取数据并自动跟随变化有三种常用方式，根据场景选择即可。

方式一：context.watch<T>() —— 最简单推荐

在 Widget 的 build 方法里直接调用 context.watch<CounterModel>()，该 Widget 会自动成为监听者。

class CounterDisplay extends StatelessWidget {
  const CounterDisplay({super.key});

  @override
  Widget build(BuildContext context) {
    // 数据变化时，此 Text 会重建
    final count = context.watch<CounterModel>().count;
    return Text(
      '$count',
      style: Theme.of(context).textTheme.headlineLarge,
    );
  }
}

方式二：context.read<T>() —— 不监听，仅获取

当你只需调用方法（如点击按钮）而不关心数据变化时，使用 context.read。它不会产生监听，避免不必要的重建。

class IncrementButton extends StatelessWidget {
  const IncrementButton({super.key});

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: () {
        // 仅执行方法，不需要重建该按钮本身
        context.read<CounterModel>().increment();
      },
      child: const Icon(Icons.add),
    );
  }
}

方式三：Consumer<T> —— 局部重建利器

Consumer 让你在较大的 Widget 中只重建某个子部分，避免整体刷新。

Consumer<CounterModel>(
  builder: (context, counter, child) {
    return Text('${counter.count}');
  },
)

child 参数是可选的，用于缓存不依赖状态变化的部局，性能更优。

多状态管理：使用 MultiProvider

真实的应用常常需要多个状态模型。MultiProvider 避免了嵌套地狱，让代码更清晰。

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => CounterModel()),
        ChangeNotifierProvider(create: (_) => UserModel()),   // 假设已定义
        Provider(create: (_) => ApiService()),                // 普通依赖，非可监听
      ],
      child: const MyApp(),
    ),
  );
}

除了 ChangeNotifierProvider，Provider 包还提供了多种变体：

通知机制的底层原理

当你在 CounterModel 里调用 notifyListeners 时，发生了什么？

1. ChangeNotifierProvider 内部持有你的模型，并为其添加了一个监听器。
2. 该监听器调用 Provider 相关的 InheritedWidget 的更新方法。
3. 所有使用 context.watch 或 Consumer 的 Widget 被标记为“脏”，在下一帧重建。

这意味着：只有显示数据的 Widget 才会重建，而按钮等静态部分保持不变。这是 Provider 性能优秀的主要原因。

避免常见陷阱

1. 在 create 中访问 context

create 方法不应尝试读取 Provider 树上的其他对象，因为此时注入尚未完成。如需引用其他 Provider，请使用 ProxyProvider。

2. 忘记 dispose

在页面退出时，如果你自己管理资源（如流订阅），应重写模型的 dispose 方法：

@override
void dispose() {
  _streamSubscription.cancel();
  super.dispose();
}

使用 ChangeNotifierProvider 时，只要模型本身被移除，dispose 会由 Provider 自动调用。

3. 在 build 中调用修改状态的方法

这会导致无限循环重建。永远不要把 read(...).increment() 这样的调用直接放在 build 的同步执行路径中，只应放在用户交互回调里。

实战结构：将逻辑移出 UI

最佳实践是保持页面代码干净，将所有业务逻辑封装在模型中。例如一个购物车页面：

class CartModel extends ChangeNotifier {
  final List<Item> _items = [];
  List<Item> get items => List.unmodifiable(_items);
  double get totalPrice => _items.fold(0, (sum, item) => sum + item.price);

  void add(Item item) {
    _items.add(item);
    notifyListeners();
  }

  void remove(int index) {
    _items.removeAt(index);
    notifyListeners();
  }
}

页面上只需这样使用：

// 显示总价
Text('\$${context.watch<CartModel>().totalPrice.toStringAsFixed(2)}')

// 添加按钮
onPressed: () => context.read<CartModel>().add(newItem)

这种分离让代码一目了然，并且模型可以脱离 Flutter 进行纯单元测试。

下一步

Provider 是一个轻量但强大的状态管理工具箱。掌握依赖注入与通知机制后，你可以逐步探索以下更高级的主题：

• ProxyProvider：组合多个 Provider，实现数据联动。
• Select：更细粒度的重建控制，仅当某个特定属性变化时才重建。
• 结合 Riverpod：Provider 的增强版，更适合复杂项目。

现在，你可以动手创建一个新 Flutter 项目，用 Provider 重构平常使用 setState 的代码，感受声明式状态管理的便利。