Flutter for OpenHarmony:Flutter 三方库 riverbloc — 融合 Bloc 与 Riverpod 的架构实践(适配鸿蒙 HarmonyOS Next ohos)

Flutter for OpenHarmony:Flutter 三方库 riverbloc — 融合 Bloc 与 Riverpod 的架构实践(适配鸿蒙 HarmonyOS Next ohos)

欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.ZEEKLOG.net

在这里插入图片描述

前言

在鸿蒙(OpenHarmony)中大型项目中,开发者常在 Bloc 的严谨性与 Riverpod 的灵活性之间权衡。riverbloc 作为桥接库,允许将 Bloc 作为 Provider 管理,兼具了事件溯源与全局依赖注入的优势,是构建可维护业务中枢的理想选择。

一、核心价值

1.1 基础概念

riverbloc 引入了 BlocProvider 系列函数,使 Bloc 融入 Riverpod 的依赖树。

State 输出

ref.watch

ref.read.add(Event)

Riverpod ProviderContainer

riverbloc 桥接层

触发业务逻辑

Riverpod 监听者

鸿蒙 UI 页面

1.2 进阶概念

  • State Sync (状态同步):Riverpod 会自动监听 Bloc 的状态流,并将最新状态同步给订阅的 Widget,无需显式的 BlocBuilder
  • Scoped Injection:利用 Riverpod 轻松在鸿蒙应用的不同层级注入特定的 Bloc 实例。

二、核心 API / 组件详解

2.1 创建 Bloc 并定义 Provider

在鸿蒙工程中,先写好经典的 Cubit:

import'package:riverbloc/riverbloc.dart';// 1. 定义基础的 CubitclassCounterCubitextendsCubit<int>{CounterCubit():super(0);voidincrement()=>emit(state +1);}// 2. ✅ 重点:将其包装为 Riverpod Providerfinal counterProvider =BlocProvider((ref)=>CounterCubit());
在这里插入图片描述

2.2 在 UI 中通过 Provider 操作 Bloc

voidonAction(WidgetRef ref){// 💡 获取 Bloc 实例执行逻辑 ref.read(counterProvider.notifier).increment();}
在这里插入图片描述

三、场景示例

3.1 场景一:鸿蒙级应用的“多模块复合”状态

当一张复杂的订单页面需要同时引用“用户信息 Bloc”和“商品明细 Bloc”动态计算总价时。

final totalPriceProvider =Provider((ref){// 💡 技巧:利用 Riverpod 的 ref.watch 聚合多个 Bloc 的状态final userOrder = ref.watch(orderBlocProvider);final discount = ref.watch(couponBlocProvider);return userOrder.total - discount.value;});
在这里插入图片描述

四、OpenHarmony 平台适配挑战

4.1 内存自动释放与单例膨胀

Bloc 往往包含大量的业务缓冲区。如果在一个鸿蒙长生命周期的应用中无节制使用。

适配策略建议

  1. Auto-Disposeriverbloc 支持 BlocProvider.autoDispose。当鸿蒙页面销毁后,Bloc 实例也会自动执行 close(),防止内存泄露。
  2. Provider Scope 隔离:在鸿蒙的分屏(Multi-Window)或特定 Tab 页面下,利用 ProviderScope 的覆盖能力为不同的小窗口提供独立的业务 Bloc。

五、综合实战示例代码

这是一个包含了“自动增量”逻辑的鸿蒙业务计算器:

import'package:flutter/material.dart';import'package:flutter_riverpod/flutter_riverpod.dart';import'package:riverbloc/riverbloc.dart';// 1. 定义业务逻辑classThemeCubitextendsCubit<Color>{ThemeCubit():super(Colors.blue);voidtoggle()=>emit(state ==Colors.blue ?Colors.orange :Colors.blue);}// 2. 注入 Providerfinal themeBlocProvider =BlocProvider((ref)=>ThemeCubit());classHarmonyAppextendsConsumerWidget{constHarmonyApp({super.key});@overrideWidgetbuild(BuildContext context,WidgetRef ref){// 💡 监听状态变化:直接像 Riverpod 一样使用 watchfinal currentColor = ref.watch(themeBlocProvider);returnScaffold( appBar:AppBar(backgroundColor: currentColor, title:constText('Riverbloc 鸿蒙架构实战')), body:Center( child:ElevatedButton( onPressed:()=> ref.read(themeBlocProvider.notifier).toggle(), child:constText('点击切换 Bloc 状态(Riverpod 观察)'),),),);}}
在这里插入图片描述

六、总结

riverbloc 满足了鸿蒙开发者对“严谨性”和“灵活性”的双重追求。它让复杂的 BLoC 设计模式能在 Riverpod 及其便捷的 DI 环境中重获新生。

核心建议

  1. 涉及核心财务、交易等需要严密审计的逻辑,用 Bloc 编写并用 riverbloc 注入。
  2. 每一个 Bloc 业务块都尽量开启 autoDispose

Read more

【面试分享】前端 React 50个基础高频面试题,助你轻松拿 offer!

【面试分享】前端 React 50个基础高频面试题,助你轻松拿 offer!

目录 前端基础高频面试题之-- React 篇 1、什么是React? 2、React有什么特点? 3、列出React的一些主要优点。 4、React有哪些限制? 5、什么是JSX? 6、为什么浏览器无法读取JSX? 7、React中的组件是什么? 8、怎样解释 React 中 render() 的目的。 9、什么是 Props? 10、React中的状态是什么?它是如何使用的? 11、 React 中的箭头函数是什么?使用箭头函数的好处? 12、什么是高阶组件(HOC)? 13、你能用HOC做什么? 14、什么是纯组件? 16、什么是React 路由? 17、为什么 useState 返回的是数组而不是对象? 18、如何实现

By Ne0inhk
Trae IDE评测体验:通过 MCP Server - Figma AI Bridge 一键将 Figma 转为前端代码

Trae IDE评测体验:通过 MCP Server - Figma AI Bridge 一键将 Figma 转为前端代码

Trae IDE评测体验:通过 MCP Server - Figma AI Bridge 一键将 Figma 转为前端代码 在现代前端开发中,从设计稿到可用页面的交付往往需要大量重复劳动:切图、手写样式、布局调整……而借助 MCP Server - Figma AI Bridge,我们可以将 Figma 设计稿自动转换成整洁的 HTML/CSS/JS 代码,并立即生成可预览的网页。一键化、傻瓜式操作,让设计交付效率跃升。 先下载 Trae IDE,让我们一起开始吧! [立即免费获取 Trae]:https://trae.ai 演示环境 本文测试使用的系统环境如下: * Trae IDE 版本:0.

By Ne0inhk
用Coze打造你的专属AI应用:从智能体到Web部署指南

用Coze打造你的专属AI应用:从智能体到Web部署指南

文章目录 * 一、Coze简介 * 1.1 什么是Coze? * 1.2 核心概念 * 二、Coze产品生态 * 三、智能体开发基础 * 四、Coze资源 * 4.1 插件 * 4.2 扣子知识库 * 4.3 数据库资源 * 五、工作流开发与发布 * 六、应用开发与发布 * 七、Coze的API与SDK * 八、实战案例 一、Coze简介 1.1 什么是Coze? Coze 是字节跳动开发的 AI Agent 平台,作为一款人工智能开发工具,它可以帮助开发者通过低代码甚至零代码的方式快速构建应用程序。此外还提供了相关的API和SDK,可以集成到我们自己开发的项目业务中。 1.2 核心概念 * 智能体:

By Ne0inhk
从零开始:在本地搭建一个带知识库的 AI 助手(Ollama + Open WebUI)

从零开始:在本地搭建一个带知识库的 AI 助手(Ollama + Open WebUI)

一文讲清楚:要选哪些工具、需要什么环境、整体架构长什么样,以及一步步实现到能用的程度。 一、为什么要在本地搭一个 AI 助手? 过去一年,大模型从“新奇玩意儿”迅速变成“日常生产力工具”。但如果你只用网页版 ChatGPT / 文心一言 / 通义千问,会碰到几个很现实的问题: * 数据隐私:公司内部文档、个人笔记、聊天记录,你敢全部塞到线上吗? * 网络依赖:在飞机上、高铁里,或者公司内网严格管控时,在线 AI 直接“失联”。 * 额度与费用:免费额度有限,稍微重度一点就要付费,而且你也不知道自己的数据会不会被拿去训练。 本地部署一套 “AI + 知识库” 的好处就非常直观: 1. 数据完全不出本地,满足隐私合规要求。 2. 断网也能用,随时随地调取你的“第二大脑”。 3. 可定制:可以给团队搭一个“

By Ne0inhk