Flutter基础（Riverpod）

发布于：2025-07-01 ⋅ 阅读:(50) ⋅ 点赞:(0)
特点 Riverpod（魔法盒子） Bloc（邮递员）
​​怎么用​​ 直接开盒子拿东西 写信 → 等邮递员回信
​​适合场景​​ 小玩具共享（简单数据） 复杂任务（比如买冰淇淋要付钱、找零）
​​要写很多代码吗​​ 很少！盒子声明+拿取就行 要多写“事件”和“状态”类（邮递员很严谨）
​​谁推荐用​​ 想快速做App的开发者 做大项目、怕逻辑乱的团队

❓选哪个好？

  • 想​​快一点、简单点​​：用 Riverpod（魔法盒子超方便！）
  • 做​​超复杂App​​（比如游戏、购物车）：用 Bloc（邮递员不会送错信）

🌟 ​​超简单对比表（小学生版）​

对比项​​ 普通代码 Riverpod（魔法盒子）
​​存状态的地方​​ 藏在页面里（容易丢）📦 放独立盒子（安全！）🔒
​​拿状态​​ 只能本页用（传纸条麻烦）📝 全App随便开盒子（超方便）🗝️
​​改数字后​​ 整个页面闪一下（费电）💥 只变数字（其他部分不动）🎯
​​加新功能​​ 要改一堆代码（容易乱）🌀 新盒子单独写（旧代码不动）✨
​​适合谁用​​ 临时小玩具（比如算1+1）🧸 做大作业（比如班级管理系统）🏫

🧩 ​​1. 普通代码：直接写逻辑（像在草稿本上乱画）​

class NormalCounterPage extends StatefulWidget {
  const NormalCounterPage({super.key});

  @override
  State<NormalCounterPage> createState() => _NormalCounterPageState();
}

class _NormalCounterPageState extends State<NormalCounterPage> {
  int count = 0; // 状态直接写在页面里（像草稿本上写数字）

  void increment() {
    setState(() { // 必须手动通知刷新
      count++; 
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text("计数: $count")),
      floatingActionButton: FloatingActionButton(
        onPressed: increment, // 点按钮 → 数字+1
        child: Icon(Icons.add),
      ),
    );
  }
}
问题 说明
​​状态和UI绑死​​ 状态（count）和页面代码混在一起，搬家难
​​跨页面共享难​​ 其他页面想用这个数字？得一层层传过去（像传纸条）
​​刷新范围太大​​ setState 会让整个页面刷新（浪费电⚡）
​​测试困难​​ 想测试数字会不会变？得把整个页面建起来

🎁 ​​2. Riverpod：用魔法盒子装状态（像存钱罐）​​

// ✅ 第一步：创建“存钱罐”（Provider）
final countProvider = StateProvider((ref) => 0); // 罐子名字叫 countProvider，里面放数字0

// ✅ 第二步：在页面里取钱（读状态）
class RiverpodCounterPage extends ConsumerWidget { // 注意这里是 ConsumerWidget！
  const RiverpodCounterPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 打开存钱罐看余额 👇
    final count = ref.watch(countProvider); // 自动监听变化

    return Scaffold(
      body: Center(child: Text("计数: $count")),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 往罐子里投硬币 👇
          ref.read(countProvider.notifier).state++; // 数字+1
        },
        child: Icon(Icons.add),
      ),
    );
  }
}
优点 说明
​​状态和UI分开​​ 数字存在独立“盒子”里，页面只负责显示
​​全局共享​​ 其他页面直接开盒子拿数字（不用传纸条）
​​精准刷新​​ 只有 Text("计数: $count") 会刷新（省电⚡）
​​测试超简单​​ 不用建页面，直接测试盒子里的逻辑

Riverpod 库核心方法和类的表格总结

1. Provider 类型

方法 / 类 描述 适用场景
Provider 提供不可变数据或纯函数，无状态。 常量、工具类、配置
StateProvider 管理简单可变状态（如布尔值、计数器）。 局部 UI 状态（如复选框、加载状态）
StateNotifierProvider 使用StateNotifier管理复杂状态逻辑（如列表操作、异步状态）。 复杂业务逻辑（如待办事项管理）
FutureProvider 处理异步操作，自动管理加载 / 错误 / 数据状态。 网络请求、数据库查询
StreamProvider 监听数据流（如 WebSocket、Firebase 实时数据）。 实时更新（如聊天消息、传感器数据）
Provider.family 参数化 Provider，根据传入参数返回不同状态。 根据 ID 获取用户数据等场景

2. 状态读取与修改

方法 描述 示例代码
ref.watch 监听 Provider 变化，Widget 重建时自动更新。 final count = ref.watch(counterProvider);
ref.read 一次性读取 Provider 值（不监听变化），常用于事件处理。 ref.read(counterProvider.notifier).state++;
ref.listen 监听 Provider 变化但不重建 Widget，适合触发副作用（如导航、显示 SnackBar）。 ref.listen(authProvider, (prev, curr) { if (curr.isLoggedIn) {...} });
ref.refresh 强制重新计算 Provider（如刷新网络数据）。 ref.refresh(userDataProvider);

两个页面要共享状态案例

🧩 ​​第一步：创建共享的“糖果罐”（Provider）​​

// 在全局创建（任何页面都能用）
final candyProvider = StateProvider<int>((ref) => 5); // 罐子叫 candyProvider，初始放5颗糖

📱 ​​第二步：两个页面共用这个罐子​​

​​页面1：显示糖果数 + 增加糖果​
class Page1 extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final candies = ref.watch(candyProvider); // 盯着罐子里的糖

    return Scaffold(
      body: Center(
        child: Text("页面1: 有 $candies 颗糖🍬", style: TextStyle(fontSize: 24)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => ref.read(candyProvider.notifier).state++, // 点按钮 → 糖+1
        child: Icon(Icons.add),
      ),
    );
  }
}
​​页面2：只显示糖果数（糖变少这里自动刷新）​​
class Page2 extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final candies = ref.watch(candyProvider); // 也盯着同一个罐子

    return Scaffold(
      body: Center(
        child: Text("页面2: 看到 $candies 颗糖🍬", style: TextStyle(fontSize: 24)),
      ),
    );
  }
}

🌐 ​​第三步：主入口（跳转两个页面）​​

void main() {
  runApp(
    ProviderScope( // ✅ 整个App套上这个（像给App装电池）
      child: MaterialApp(
        home: Scaffold(
          body: Center(
            children: [
              ElevatedButton(
                onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => Page1())),
                child: Text("去页面1"),
              ),
              ElevatedButton(
                onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => Page2())),
                child: Text("去页面2"),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

💡 ​​为什么这样好用？​​

场景​​ 普通写法 Riverpod（糖果罐）
​​页面1改数据​​ 页面2看不到变化 😭 页面2自动刷新 → 糖数永远最新 ✅
​​新增页面3​​ 要手动传数据 📦 直接开罐子拿糖（不用传）🗝️
​​关掉所有页面​​ 糖果数据消失 🚫 罐子还在！下次打开还是最新数 🔋

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布