Flutter的状态管理工具

一、Provider

1.原理

Provider 本质上是基于 Flutter 的InheritedWidget 实现的，核心思想是数据自上而下传递，形成一个「数据提供者 - 消费者」的树形结构。

2、使用示例

2.1 定义可监听的状态模型（继承 ChangeNotifier） 核心：数据变化时调用 notifyListeners() 通知组件刷新

class LoginStatusModel extends ChangeNotifier {
  bool _isLogin = false;

  bool get isLogin => _isLogin;

  void updateLoginStatus(bool isLogin) {
    _isLogin = isLogin;
    notifyListeners();  // 关键：通知所有订阅的组件刷新
  }
}

2.2 使用 Provider或其子类，包裹 App实例，并将 状态模型实例作为值传递

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => LoginStatusModel(), 
      child: const MyApp()、
    ),
  );
}

2.3 使用状态数据，在需要监听数据变化的Widget中，使用Provider.of、Consumer获取数据：

  @override
  Widget build(BuildContext context) {
    // 使用 Consumer 监听 CounterModel
    return Consumer<LoginStatusModel>(
      builder: (context, loginStatus, child) {
        return Text('${loginStatus.isLogin}');
      },
    );
  }
}

// 也可以使用  Provider.of() 来获取：
Text('${Provider.of<LoginStatusModel>(context, listen: false).isLogin}')

特性	Provider.of<T>(context)	Consumer<T>	context.watch<T>() (推荐)
主要用途	灵活获取，常用于非 build 方法中	在 build 中获取并直接构建子 Widget	在 build 中获取数据用于逻辑判断或属性赋值
是否监听变化	取决于 listen 参数 (默认 true)	是 (自动监听)	是 (自动监听)
代码位置	任意位置 (build 内/外，异步方法中)	只能在 build 方法的 return 树中	只能在 build 方法体内 (return 之前)
是否需要 builder	不需要	需要 (builder 回调)	不需要
典型场景	按钮点击事件、定时器、初始化逻辑	需要根据数据动态生成整个 Widget 时	需要根据数据决定 Widget 的属性 (颜色、文本) 时
性能优化	可设置 listen: false 避免不必要重绘	仅重建 Consumer 及其子节点	重建当前 Widget

A. Provider.of<T>(context)

这是最原始的方法。它的关键在于第二个参数 listen。

• listen: true (默认) ：

  • 行为：监听数据变化。如果数据变了，当前 Widget 会重建。
  • 限制：只能在 build 方法中使用（因为重建需要触发 build）。
  • 缺点：如果在 build 中用默认值，会导致整个父 Widget 重绘，不够精细。

• listen: false (常用) ：

  • 行为：不监听数据变化。只获取当前的实例对象。
  • 场景：在事件回调（如 onPressed）、initState、或者异步方法中调用修改数据的方法（如 increment()）。
  • 优势：不会因为数据变化导致当前 Widget 无谓重绘。

Widget build(BuildContext context) {
  // ✅ 获取数据 (自动监听)
  final counter = context.watch<CounterModel>(); 
  
  // 可以在这里做逻辑处理
  final color = counter.count > 10 ? Colors.red : Colors.green;
  final text = counter.count > 10 ? '太多了!' : '正常';

  return Column(
    children: [
      // 使用处理后的数据
      Text(text, style: TextStyle(color: color)),
      
      // 按钮事件 (必须用 read 或 Provider.of(..., listen: false))
      ElevatedButton(
        onPressed: () => context.read<CounterModel>().increment(),
        child: Text('增加'),
      )
    ],
  );
}

B. Consumer 是一个 Widget。它的作用是将“获取数据”和“构建 UI”合二为一。

• 特点：它提供了一个 builder 函数。只有当数据变化时，只有这个 Consumer 节点及其子节点会重绘，它的父兄弟节点不会重绘。
• 场景：当你需要根据数据直接返回一个新的 Widget 结构时。

// ✅ 场景：只想让这段文字区域刷新，不影响周围的布局

Consumer<CounterModel>(
  builder: (context, counter, child) {
    // counter 就是 CounterModel 实例
    return Text(
      '当前计数: ${counter.count}',
      style: TextStyle(fontSize: 24, color: Colors.blue),
    );
  },
  // child 参数可用于优化：传递不变的子组件，避免每次重绘都重建它
  // child: Icon(Icons.star), 
)

C. context.watch<T>() —— Consumer 的语法糖 (现代推荐)

这是 provider 6.0+ 版本后最推荐的写法。它等价于 Provider.of<T>(context, listen: true)，但写法更简洁。

• 特点：直接在 build 方法体中使用，返回数据对象。
• 场景：当你需要在 build 方法中获取数据，用来计算属性、做条件判断，或者组合多个数据源时。
• 注意：调用 watch 的代码所在的 整个 Widget 的 build 方法 会在数据变化时重跑。如果该 Widget 很大，可能不如 Consumer 精准。

Widget build(BuildContext context) {
  // ✅ 获取数据 (自动监听)
  final counter = context.watch<CounterModel>(); 
  
  // 可以在这里做逻辑处理
  final color = counter.count > 10 ? Colors.red : Colors.green;
  final text = counter.count > 10 ? '太多了!' : '正常';

  return Column(
    children: [
      // 使用处理后的数据
      Text(text, style: TextStyle(color: color)),
      
      // 按钮事件 (必须用 read 或 Provider.of(..., listen: false))
      ElevatedButton(
        onPressed: () => context.read<CounterModel>().increment(),
        child: Text('增加'),
      )
    ],
  );
}

总结使用口诀

• 改数据 (按钮/事件) ➡️ 用 read (或 of(..., listen: false))
• 显数据 (局部刷新) ➡️ 用 Consumer
• 显数据 (简单逻辑) ➡️ 用 watch
• 初始化 (生命周期) ➡️ 用 of(..., listen: false)

二、RiverPod

1.原理

简洁表达：

• 中心化管理：通过 ProviderContainer（ProviderScope）统一管理所有状态，状态封装在 Provider 中，脱离 Widget 上下文；

• 精准订阅分发：基于 Ref 实现 Widget/Provider 对状态的订阅，状态变化时仅通知订阅者，最小化重建；

• 无上下文 + 类型安全：解决了传统 Provider 的核心痛点，同时通过静态类型检查提升开发效率。

Ref (通常通过 WidgetRef 在 UI 中使用) 是整个状态管理系统的核心控制器和上下文对象，是widget和provider,Provider和Provider沟通的唯一桥梁。

2、使用示例

• 必须使用 ProviderScope 包裹整个应用。

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(
    const ProviderScope( // 👈 必须包裹这里
      child: MyApp(),
    ),
  );
}

2.1 简单状态：@riverpod (替代 StateProvider)

// counter_provider.dart 文件，供后续订阅分发使用
import 'package:flutter_riverpod/flutter_riverpod.dart';

// 使用 @riverpod 注解，运行 build_runner 后会自动生成 CounterProvider
@riverpod
class Counter extends _$Counter {
  @override
  int build() {
    // 初始值
    return 0;
  }

  // 定义修改状态的方法
  void increment() {
    state++; // 👈 直接修改 state 属性，自动通知监听者
  }

  void reset() {
    state = 0;
  }
}

2.2 复杂状态：AsyncNotifier (替代 FutureProvider + StateNotifier)

用于处理异步操作（如网络请求）并管理复杂状态。这是 Riverpod 最强大的部分。

import 'package:flutter_riverpod/flutter_riverpod.dart';

// 模拟用户模型
class User {
  final String name;
  final int age;
  User({required this.name, required this.age});
}

// 定义 AsyncNotifier
@riverpod
class CurrentUser extends _$CurrentUser {
  @override
  Future<User> build() async {
    // 模拟网络延迟
    await Future.delayed(const Duration(seconds: 2));
    
    // 模拟可能发生的错误
    // if (someCondition) throw Exception("Failed to load");

    return User(name: "Alice", age: 25);
  }

  // 修改用户信息的方法
  Future<void> updateAge(int newAge) async {
    state = const AsyncValue.loading(); // 手动设置加载状态
    
    try {
      await Future.delayed(const Duration(seconds: 1)); // 模拟 API 调用
      final user = state.value!; // 获取旧数据
      state = AsyncValue.data(User(name: user.name, age: newAge)); // 更新数据
    } catch (e, st) {
      state = AsyncValue.error(e, st); // 处理错误
    }
  }
}

2.3 组合状态：派生数据 (Derived State)

在一个 Provider 中读取另一个 Provider，实现数据联动。

@riverpod
String userNameRef(UserNameRef ref) {
  // 监听 CurrentUser Provider
  final userAsync = ref.watch(currentUserProvider);

  // 处理异步状态
  return userAsync.when(
    data: (user) => user.name,
    loading: () => "加载中...",
    error: (_, __) => "加载失败",
  );
}

A. 使用 ConsumerWidget (推荐)

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

// 继承 ConsumerWidget
class HomePage extends ConsumerWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 1. 监听简单状态 (Counter)
    // ref.watch 会自动订阅，数据变化时重建此 Widget
    final count = ref.watch(counterProvider); 

    // 2. 监听异步状态 (CurrentUser)
    final userAsync = ref.watch(currentUserProvider);

    return Scaffold(
      appBar: AppBar(title: const Text("Riverpod Demo")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示异步用户数据
            userAsync.when(
              data: (user) => Text("你好, ${user.name} (年龄: ${user.age})"),
              loading: () => const CircularProgressIndicator(),
              error: (err, stack) => Text("错误: $err"),
            ),
            
            const SizedBox(height: 20),

            // 显示计数
            Text("计数: $count", style: const TextStyle(fontSize: 24)),
            
            const SizedBox(height: 20),

            // 3. 修改状态 (使用 ref.read 或 ref.notifier)
            ElevatedButton(
              onPressed: () {
                // 方式 A: 直接调用生成的 notifier 方法 (推荐)
                ref.read(counterProvider.notifier).increment();
                
                // 方式 B: 如果是 AsyncNotifier
                // ref.read(currentUserProvider.notifier).updateAge(26);
              },
              child: const Text("增加计数"),
            ),
            
            ElevatedButton(
              onPressed: () {
                // 触发异步更新
                ref.read(currentUserProvider.notifier).updateAge(30);
              },
              child: const Text("更新用户年龄 (异步)"),
            ),
          ],
        ),
      ),
    );
  }
}

B. 在非 Widget 类中使用 (Riverpod 的杀手锏)

由于不依赖 Context，你可以在任何地方（如路由守卫、服务类、甚至 main 函数之后）访问状态。

// 例如：在一个普通的 Dart 类中
class AnalyticsService {
  final Ref ref; // 注入 Ref

  AnalyticsService(this.ref);

  void logCount() {
    // 直接读取当前值，不订阅变化 (类似 listen: false)
    final currentCount = ref.read(counterProvider);
    print("当前计数是: $currentCount");
  }
  
  void subscribeToCount() {
    // 也可以手动监听变化
    ref.listen(counterProvider, (previous, next) {
      print("计数从 $previous 变成了 $next");
    });
  }
}

特性	Provider (旧)	Riverpod (新)
依赖 Context	✅ 强依赖 (BuildContext)	❌ 无依赖 (WidgetRef 或 Ref)
类型安全	⚠️ 运行时检查 (容易崩溃)	✅ 编译时检查 (配合代码生成)
异步支持	🆗 需要 FutureProvider	🚀 原生强大 (AsyncValue, when)
状态组合	😐 较难，容易嵌套地狱	🤩 极简 (ref.watch 其他 Provider)
测试难度	😫 需要 Mock Context	😃 极易 (直接创建 ProviderContainer)
代码量	多 (样板代码)	少 (配合 @riverpod 宏)
学习曲线	低 (但精通难)	中 (概念多，但逻辑清晰)

1. 始终使用代码生成 (@riverpod) ：不要手动编写 Provider(...)，让宏帮你处理类型安全和样板代码。

2. 拆分小 Provider：不要试图用一个 Provider 管理所有状态。将计数器、用户信息、主题设置拆分成不同的 Provider，然后按需组合。

3. 善用 AsyncValue：处理异步数据时，利用 .when() 方法优雅地处理 loading, data, error 三种状态，避免大量的 if/else 判断。

4. 区分 watch 和 read：

   • 在 build 方法中需要重建 UI时用 ref.watch。
   • 在事件回调（如按钮点击）中修改数据时用 ref.read(...).notifier。
   • 在非 build 环境（如服务类）中用 ref.read 或 ref.listen。

以下是自己的理解修正：

1. watch：是订阅者。它监听 Provider 的数据变化，一旦变化，自动触发 UI 刷新（或 Provider 重算）。

2. read：是获取动作。

   • 在事件回调（如按钮点击）中，我们使用 ref.read(provider.notifier) 来获取控制器，然后调用它的方法来修改数据。
   • 修改数据后，Riverpod 会自动通知所有 watch 该数据的地方进行刷新。

3. notifier：是控制器（遥控器）。它持有修改数据的方法（如 increment）。

你的目的	应该用什么？	结果
显示数据 (Text, Image, List)	ref.watch()	数据变，UI 自动刷新 ✅
按钮点击/手势 (修改数据)	ref.read(...).notifier	获取控制器，修改数据 ✅
按钮点击/手势 (读取参数)	ref.read()	获取当前值，用于逻辑判断 ✅
定时器/异步回调	ref.read()	获取最新值，避免闭包旧值 ✅
纯 Dart 类/服务	ref.read()	访问全局状态 ✅
Build 中显示数据	ref.read()	❌ 界面不会更新 (Bug)