Flutter 状态管理的最佳组合：Riverpod + Hooks

Android女王

已于 2024-03-26 14:49:50 修改

阅读量1.2k

点赞数 10

文章标签： flutter

于 2024-03-25 21:11:44 首次发布

本文链接：https://blog.csdn.net/m0_56255097/article/details/137025920

版权

1. Flutter Hooks 的简单性

每个 Flutter 开发人员都是从使用 StatefulWidget 开始的，而我们必须通过它的基础。但想象一下，你必须创建一个大型项目，“StatefulWidget”的重用变得痛苦。这就是 flutter hooks 的由来，flutter hooks 通过创建 hooks 帮助 flutter 开发人员重用代码，然后，我们可以快速推进项目，这里有一些示例。

在这里插入图片描述

这个类，我们都为“StatefulWidget”创建，但大多数时候，我们从不使用它，通过 flutter hooks，一个小部件的所有状态都在一个类中处理，其性能与“StatefulWidget”相同。

在这里插入图片描述

在许多控制器的 StatefulWidget 中，例如 AnimationController 或 TextEditingController, 我们需要处理所有生命周期方法：initialization, dispose, didUpdateWidget, 甚至在 State 类中添加 TickerProviderStateMixin，以及在每个需要使用这些控制器的 StatefulWidget 中添加该 mixin。

在 flutter hooks 中，我们只需要创建一个处理控制器生命周期的钩子，然后我们将在每个 HookWidget 中重用相同的钩子。

StatefulWidget 中的动画控制器

在这里插入图片描述

HookWidget 中的动画控制器

在这里插入图片描述

现在，我们知道使用 flutter hooks 进行编码是多么容易，以及它对于特别大的项目有何用处。我不会在创建少于 10 个小部件的应用程序中使用它，但在需要创建更多小部件的应用程序中，我不会错过使用 flutter hooks。

2. Hooks Riverpod

状态管理的简单重要性是在所有应用程序或多个小部件之间共享一个或多个变量，并且每个变量更改都必须触发正在侦听该变量的小部件中的重建。

如果您尝试仅创建一个全局变量并更改它，则不会触发小部件中的重建。为了解决这个问题，Riverpod 提供了创建一个全局提供程序的可能性，该提供程序主要携带变量，但该提供程序可以携带stream, future, ChangeNotifier,…

可以在应用程序的每个小部件中轻松访问提供者，我们只需将MyApp()小部件包装到ProviderScrope中。

在这里插入图片描述

在新版本的 hooks_riverpod 中，有一个名为 HookConsumerWidget 的新小部件，我们必须在项目小部件中扩展它。 HookConsumerWidget 在构建中附带了其他参数，即 WidgetRef（注意 ref 很短），ref 使我们能够读取和观察提供者。

读取provider：一次性读取值，值变化时不触发重建。
监视provider：每次更改都会触发小部件或正在侦听 provider 的小部件部分的重建。
在应用程序中观看相同的 firebase stream

正如我们可以在所有应用程序中查看 provider 一样，我们也可以更改 provider 。

在这里插入图片描述

设置flutter_hooks和hooks_riverpod就是这么简单。还有复杂的概念和多种方法来完成同一件事，但应用程序中的大多数状态管理，您可能只会使用这些概念。

3. 一个示例

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

void main() {
  runApp(
    /// [MyApp] is wrapped in a [ProviderScope].
    /// This widget is where the state of most of our providers will be stored.
    /// This replaces `MultiProvider` if you've used `provider` before.
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

/// A provider that creates and listen to a [StateNotifier].
///
/// Providers are declared as global variables.
/// This does not hinder testability, as the state of a provider is instead
/// stored inside a [ProviderScope].
final counterProvider = StateNotifierProvider<Counter, int>((_) => Counter());

/// A simple [StateNotifier] that implements a counter.
///
/// It doesn't have to be a [StateNotifier], and could be anything else such as:
/// - [ChangeNotifier], with [ChangeNotifierProvider]
/// - [Stream], with [StreamProvider]
/// ...
class Counter extends StateNotifier<int> {
  Counter() : super(0);

  void increment() => state++;
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends HookConsumerWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Riverpod counter example'),
      ),
      body: Center(
        // HookConsumer is a builder widget that allows you to read providers and utilise hooks.
        child: HookConsumer(
          builder: (context, ref, _) {
            final count = ref.watch(counterProvider);

            return Text(
              '$count',
              style: Theme.of(context).textTheme.headlineMedium,
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => ref.read(counterProvider.notifier).increment(),
        child: const Icon(Icons.add),
      ),
    );
  }
}

Flutter该怎么学

学习 Flutter时，要深入进去搞懂它的原理、设计思路和通用理念，并与过往的开发经验相结合，建立起属于自己的知识体系抽象层次，而不是仅停留在应用层 API 的使用上，才能摆脱经验与平台的强绑定。

为了能够方便大家快速学习Flutter, 这里整理了Flutter学习路线图以及《Flutter Dart 语言编程入门到精通》&《Flutter实战：第二版》帮助大家配置相关环境，学习Flutter 的基本语法以及最后的项目实际利用。扫描下方二维码即可免费领取！！！

学习路线：
在这里插入图片描述

Dart语言是Flutter的开发语言，所以我们需要掌握Dart语言的基础知识

《Flutter Dart 语言编程入门到精通》

第一章 Dart语言基础

环境准备
基础语法

第二章 Dart 异步编程

Dart的事件循环
调度任务
延时任务
Future详解
async和await
lsolate

第三章异步之 Stream 详解

什么是Stream
单订阅流
广播流
Stream Transformer
总结

第四章 Dart标准输入输出流

文件操作

第五章 Dart 网络编程

TCP服务端
TCP客户端
UDP服务端
UDP客户端
HTTP服务器与请求
WebSocket

第六章 Flutter 爬虫与服务端

Dart爬虫开发
Dart服务端
创建Flutter项目演示
总结

第七章 Dart 的服务端开发

注册登录实现

第八章 Dart 调用C语言混合编程

环境准备
测试Dart ffi接口
总结

第九章 LuaDardo中Dart与Lua的相互调用

Lua C API
创建运行时
Dart调Lua
Lua调Dart

掌握了Dart语言之后，咱们就可以通过实战来掌握Flutter的知识点，扫描下方二维码即可免费领取学习资料！！！

《Flutter实战：第二版》

第一章：起步

1.1 移动开发技术简介
1.2 初始Flutter
1.3 搭建Flutter开发环境
1.4 Dart语言简介

第二章：第一个Flutter应用

2.1 计数器应用实例
2.2 Widget简介
2.3 状态管理
2.4路由管理
2.5包管理
2.6 资源管理
2.7 调试Flutter应用
2.8 Flutter异常捕获

在这里插入图片描述

第三章：基础组件

3.1 文本及样式
3.2 按钮
3.3 图片及ICON
3.4 单选开关和复选框
3.5 输入框及表单
3.6 进度指示器

第四章：布局类组件

4.1 布局类组件简介
4.2 布局原理与约束（constraints）
4.3 线性布局（Row和Column）
4.4 弹性布局（Flex）
…

在这里插入图片描述

第五章：容器类组件

5.1 填充（Padding）
5.2 装饰容器（DecoratedBox）
5.3 变换（Transform）
5.4 容器组件（Container）
5.5 剪裁（Clip）
5.6 空间适配（FittedBox）
5.7 页面骨架（Scaffold）

第六章：可滚动组件

6.1 可滚动组件简介
6.2 SingleChildScrollView
6.3 ListView
6.4 滚动监听及控制
…

在这里插入图片描述

第七章：功能型组件

7.1 导航返回拦截（WillPopScope）
7.2 数据共享（InheritedWidget）
7.3 跨组件状态共享
7.4 颜色和主题
7.5 按需rebuild（ValueListenableBuilder）
7.6 异步UI更新（FutureBuilder、StreamBuilder）
7.7 对话框详解

第八章：事件处理与通知

8.1 原始指针事件处理
8.2 手势识别
8.3 Flutter事件机制
8.4 手势原理与手势冲突
8.5 事件总线
8.6 通知 Notification

在这里插入图片描述

第九章：动画

9.1 Flutter动画简介
9.2 动画基本结构及状态监听
9.3 自定义路由切换动画
9.4 Hero动画
9.5 交织动画
9.6 动画切换组件（AnimatedSwitcher）
9.7 动画过渡组件

第十章：自定义组件

10.1 自定义组件方法简介
10.2 组合现有组件
10.3 组合实例：TurnBox
10.4 CustomPaint 与 Canvas
10.5 自绘实例：圆形背景渐变进度条
10.6 自绘组件：CustomCheckbox
10.7 自绘组件: DoneWidget
10.8 水印实例: 文本绘制与离屏渲染

第十一章：文件操作与网络请求

11.1 文件操作
11.2 通过HttpClient发起HTTP请求
11.3 Http请求库-dio
11.4 实例：Http分块下载
…

第十二章：Flutter扩展

12.1 包和插件
12.2 Flutter Web

第十三章：国际化

13.1 让App支持多语言
13.2 实现Localizations
13.3 使用Intl包
13.4 国际化常见问题

在这里插入图片描述

第十四章：Flutter核心原理

14.1 Flutter UI 框架（Framework）
14.2 Element、BuildContext和RenderObject
14.3 Flutter启动流程和渲染管线
14.4 布局（Layout）过程
14.5 绘制（一）绘制原理及Layer
…

第十五章：一个完整的Flutter应用

15.1 Github客户端示例
15.2 Flutter APP代码结构
15.3 Model类定义
15.4 全局变量及共享状态
15.5 网络请求封装
15.6 APP入口及主页
15.7 登录页
15.8 多语言和多主题

由于内容过多，截图展示的目录及部分内容，完整文档领取方式扫描下方二维码即可免费获取！

Android女王

关注

10
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
Flutter 状态管理的最佳组合：Riverpod + Hooks

10.1 自定义组件方法简介10.2 组合现有组件10.3 组合实例：TurnBox10.4 CustomPaint 与 Canvas10.5 自绘实例：圆形背景渐变进度条10.6 自绘组件：CustomCheckbox10.7 自绘组件: DoneWidget10.8 水印实例: 文本绘制与离屏渲染。
复制链接

扫一扫