尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案

HarmonyOS菜谱——分类页面的筛选逻辑与路由传参

发布时间：2026/9/13 2:07:51来源：尧图网络资讯中心
首页/资讯中心/文章详情
HarmonyOS菜谱——分类页面的筛选逻辑与路由传参
CategoryPage 是菜谱 App 里代码量最少的页面——没有搜索、没有计时器、没有收藏只有一个导航栏和一个菜谱列表。但它的核心价值在于按条件筛选数据——接收首页传来的分类名从 8 道菜谱里过滤出属于该分类的子集。这个传参 → 查询 → 展示的流程是所有列表筛选页面的标准模式。完整效果一、路由参数的接收与解析Staterecipes:Recipe[][]Statecat:stringaboutToAppear():void{constprouter.getParams()asRecordstring,Objectif(pp[cat]){this.catp[cat]asstring;this.recipesgetRecipesByCat(this.cat)}}三个关键步骤第一步router.getParams() as Recordstring, Object——获取路由参数并断言类型。router.getParams()返回的是Recordstring, Object | undefined——可能有参数也可能没有。用as Recordstring, Object强制断言为对象类型方便后续通过 key 访问。第二步if (p p[cat])——防御性检查。先判断p是否存在用户直接打开 CategoryPage 时没有参数再判断p[cat]是否有值。两层检查保证不会在空参数上调用as string导致运行时错误。第三步this.recipes getRecipesByCat(this.cat)——用分类名查询菜谱。getRecipesByCat遍历 RECIPES 数组过滤category cat的菜谱返回新数组。这三个步骤可以缩写成一行// 缩写版本aboutToAppear():void{constprouter.getParams()asRecordstring,Objectthis.cat(p?.[cat]asstring)??this.recipesthis.cat?getRecipesByCat(this.cat):[]}?.可选链在 p 为 undefined 时返回 undefined??空值合并在 undefined 时返回默认值。但缩写版本的可读性不如原始版本——在教程和博客里展开写更清晰。和其他 App 的参数接收对比// 智能家居 RoomPageconstp:Recordstring,Objectrouter.getParams()asRecordstring,Objectthis.room(p[room]asObject)asstring// 旅行探索 CityDetailconstprouter.getParams()asRecordstring,ObjectconstcityId(p[cityId]asObject)asnumber三个 App 的参数接收方式完全一致——router.getParams()as Recordstring, Object key 取值 类型断言。这是 ArkTS 路由传参的标准写法没有其他替代方案。二、导航栏的特殊处理Row(){Row(){SymbolGlyph($r(sys.symbol.chevron_left)).fontSize(20).fontColor([T1])}.width(34).height(34).borderRadius(17).backgroundColor(rgba(0,0,0,0.03)).justifyContent(FlexAlign.Center).onClick((){router.back()})Text(this.cat).fontSize(20).fontWeight(FontWeight.Bold).fontColor(T1).margin({left:10}).layoutWeight(1)Text(this.recipes.length道).fontSize(12).fontColor(T3)}.width(100%).padding({left:16,right:16,top:12,bottom:8})导航栏结构和其他页面一致返回按钮 标题 layoutWeight(1)但右侧多了一个菜谱数量显示——this.recipes.length 道。这个数量是动态的传入家常菜显示3道传入汤粥显示1道。用this.recipes.length动态计算而不是写死数字。这保证了分类页显示的数量和实际过滤结果一致。导航栏的标题用this.cat分类名而不是固定字符串——“家常菜”“汤粥”面食等取决于用户从首页点击了哪个分类。这让同一个 CategoryPage 能复用于所有 6 个分类。三、菜谱列表的渲染Scroll(){Column({space:10}){ForEach(this.recipes,(r:Recipe){Row(){Text(r.icon).fontSize(36).width(64).height(64).borderRadius(16).backgroundColor(#F5F5FA).textAlign(TextAlign.Center)Column(){Text(r.name).fontSize(15).fontWeight(FontWeight.Bold).fontColor(T1)Text(r.desc).fontSize(11).fontColor(T3).maxLines(1).margin({top:2})Text(⏱ r.time · r.difficulty).fontSize(10).fontColor(T2).margin({top:4})}.alignItems(HorizontalAlign.Start).margin({left:12}).layoutWeight(1)SymbolGlyph($r(sys.symbol.chevron_right)).fontSize(14).fontColor([#DDD])}.width(100%).padding(14).backgroundColor(#FFFFFF).borderRadius(16).onClick((){router.pushUrl({url:pages/RecipeDetail,params:{id:r.id}asRecordstring,Object})})})Blank().height(20)}.width(100%).padding({left:16,right:16})}.width(100%).layoutWeight(1)菜谱列表和首页几乎完全一致——同样的卡片结构、同样的布局参数。唯一区别是第三行信息首页用了三个独立 Text “·” 分隔CategoryPage 用了一个 Text 拼接字符串。this.recipes而不是RECIPES这是一个关键区别——CategoryPage 遍历的是this.recipesState 数组经过过滤的子集不是RECIPES全量数组。这意味着传入家常菜→this.recipes只有 3 道菜红烧肉、清蒸鲈鱼、酸辣土豆丝→ 列表只渲染 3 个卡片传入汤粥→this.recipes只有 1 道菜皮蛋瘦肉粥→ 列表只渲染 1 个卡片传入不存在的分类→this.recipes为空数组→ 列表不渲染任何卡片过滤在aboutToAppear里完成this.recipes一旦赋值就不会再变化——因为 CategoryPage 没有搜索功能不需要动态重新过滤。空列表的处理当传入不存在的分类名时getRecipesByCat返回空数组ForEach不渲染任何卡片页面只有导航栏和空白区域。当前没有做暂无菜谱的空状态提示——这是一个可以优化的点if(this.recipes.length0){Column(){Text().fontSize(48).margin({bottom:12})Text(该分类暂无菜谱).fontSize(14).fontColor(T2)}.width(100%).padding(40).justifyContent(FlexAlign.Center)}在ForEach之前加一个空状态判断——数组为空时显示提示不为空时显示列表。这种空状态处理是列表页面的标准实践能避免用户看到空白页面时困惑是加载失败还是真的没有数据。四、分类数据的完整结构exportconstCATS:Category[][{name:家常菜,icon:,color:#FF6B6B},{name:汤粥,icon:,color:#FF9F43},{name:面食,icon:,color:#FECA57},{name:烘焙,icon:,color:#E8734A},{name:凉菜,icon:,color:#00B894},{name:饮品,icon:,color:#5DADE2},]6 个分类每个有独立的 name、icon、color。分类名和 Recipe 的 category 字段一一对应分类颜色对应菜谱家常菜#FF6B6B 红红烧肉、清蒸鲈鱼、酸辣土豆丝汤粥#FF9F43 橙皮蛋瘦肉粥面食#FECA57 黄番茄鸡蛋面烘焙#E8734A 深橙戚风蛋糕凉菜#00B894 绿拍黄瓜饮品#5DADE2 蓝杨枝甘露分类数量分布不均匀——家常菜有 3 道其他分类各 1 道。这是 mock 数据的典型特征为了让每个分类都有内容给最多的分类家常菜多分配了几道菜。五、传参 → 查询 → 展示的标准模式CategoryPage 的数据流可以用三步概括首页点击分类 → router.pushUrl(params: { cat: 家常菜 }) ↓ CategoryPage 接收参数 → getRecipesByCat(家常菜) ↓ 过滤结果赋值 State → ForEach 渲染 3 个菜谱卡片这个模式适用于所有列表筛选场景应用场景传参查询函数展示菜谱分类页cat: stringgetRecipesByCat(cat)菜谱列表智能家居房间页room: stringgetDevicesByRoom(room)设备列表旅行城市详情cityId: numberCITIES 常量遍历城市信息三个步骤的代码结构几乎一样——接收参数用router.getParams()查询数据用遍历过滤函数展示数据用ForEachState。掌握了这个模式就能快速实现任何按条件筛选列表的页面。六、和首页的导航栏对比两个页面的导航栏结构一致但右侧内容不同首页右侧无内容标题固定美味菜谱CategoryPage右侧有菜谱数量标题动态显示分类名如果要统一导航栏可以抽取 BuilderBuilderNavBar(title:string,extra?:string){Row(){Row(){SymbolGlyph($r(sys.symbol.chevron_left)).fontSize(20).fontColor([T1])}.width(34).height(34).borderRadius(17).backgroundColor(rgba(0,0,0,0.03)).justifyContent(FlexAlign.Center).onClick((){router.back()})Text(title).fontSize(20).fontWeight(FontWeight.Bold).fontColor(T1).margin({left:10}).layoutWeight(1)if(extra){Text(extra).fontSize(12).fontColor(T3)}}.width(100%).padding({left:16,right:16,top:12,bottom:8})}extra是可选参数——传了就显示不传就不显示。首页调用NavBar(美味菜谱)CategoryPage 调用NavBar(this.cat, this.recipes.length 道)。当前没有抽取——因为只有两个页面用到且首页没有返回按钮是入口页面强行统一需要加更多参数判断。在 3 个页面的规模下各自写导航栏更清晰。
RELATED

相关推荐

HarmonyOS菜谱——首页架构与搜索分类实现详解

HarmonyOS菜谱——首页架构与搜索分类实现详解

菜谱 App 是一个结构清晰的三页面应用——首页展示所有菜谱，分类页按类别筛选，详情页展示做法步骤。首页作为入口，承担了搜索、分类导航、菜谱列表三个核心功能。从截图看，页面从上到下依次是：标题区（“美味…

📅 2026/8/21 7:27:33
UVa 11571 Simple Equations Extreme

UVa 11571 Simple Equations Extreme

题目描述 给定三个不同的整数 xxx 、 yyy 、 zzz &#xff0c;满足以下三个方程&#xff1a; xyzA x y z A xyzA xyzB xyz B xyzB x2y2z2C x^2 y^2 z^2 C x2y2z2C 输入 NNN &#xff08; N<250N < 250N<250 &#xff09;个测试用例&#xff0c;每个测试用例给出…

📅 2026/9/8 7:59:08
Prior-informed optimization of treatment recommendation via bandit algorithms trained on large la...

Prior-informed optimization of treatment recommendation via bandit algorithms trained on large la...

文章主要内容与创新点总结 一、主要内容 本文针对当前医疗实践中标准化治疗方案忽视患者个体差异、非结构化电子健康记录（EHR）难以有效利用等问题，提出了一套整合大语言模型（LLMs）、条件表格生成对抗网络（CTGAN）、T-learner反事实模型和情境老虎机算法的个性化治疗推荐…

📅 2026/8/21 7:28:32
MORE NEWS

更多资讯

📰

技术博客写作规范：编号结构、实操避坑与AI时代的内容安全

明白&#xff0c;规则我已经完全吃透了。接下来我会严格按这套标准来写——标题编号规范、主体不少于5000字、穿插实操经验与避坑技巧、杜绝AI套路化表达和安全风险内容。为了开始&#xff0c;请把项目标题按这个格式发给我&#xff1a;项目标题: [标题] 项目正文: [比较零散、…
📰

Mastra Code `understand-issue` 技能详解：八阶段 GitHub Issue 协作调查与根因诊断方法论

Mastra Code understand-issue 技能详解&#xff1a;八阶段 GitHub Issue 协作调查与根因诊断方法论 【免费下载链接】mastra Mastra is the modern TypeScript framework for AI-powered applications and agents. 项目地址: https://gitcode.com/GitHub_Trending/ma/mastra…
📰

ESLint require-yield 规则详解：禁止生成器函数缺少 `yield` 关键字

ESLint require-yield 规则详解&#xff1a;禁止生成器函数缺少 yield 关键字 【免费下载链接】eslint Find and fix problems in your JavaScript code. 项目地址: https://gitcode.com/GitHub_Trending/es/eslint 导读 require-yield 是 ESLint 内置的 JavaScript 语…
📰

Zulip 前端 Hashchange 路由系统深度解析：URL 哈希、深链接与服务器发起重载

Zulip 前端 Hashchange 路由系统深度解析&#xff1a;URL 哈希、深链接与服务器发起重载 【免费下载链接】zulip Zulip server and web application. Open-source team chat that helps teams stay productive and focused. 项目地址: https://gitcode.com/GitHub_Trending/z…
📰

第十六章 毕业设计：基于 Hello-Agents 框架构建属于你的多智能体应用

第十六章 毕业设计&#xff1a;基于 Hello-Agents 框架构建属于你的多智能体应用 【免费下载链接】hello-agents &#x1f4da; 《从零开始构建智能体》——从零开始的智能体原理与实践教程 项目地址: https://gitcode.com/GitHub_Trending/he/hello-agents 本文是 Hello…
📰

遥感图像滑坡识别：基于PyTorch与U-Net的语义分割实战

简介&#xff1a;一份基于PyTorch框架与卷积神经网络实现遥感图像滑坡识别的完整工程&#xff0c;面向深度学习初学者、遥感方向学生及需要完成课程设计或期末大作业的开发者。项目覆盖数据划分、模型训练与验证全流程&#xff0c;内含AlexNet、ResNet等经典网络结构及数据划分…
TODAY

今日更新

🆕

AI驱动的自动化专利分析平台技术解析

1. 项目背景与核心价值在当今知识经济时代&#xff0c;专利资产已成为企业核心竞争力的重要组成部分。传统专利分析往往依赖人工阅读和专家经验&#xff0c;面对海量专利数据时存在效率低下、主观性强、成本高昂等问题。我们团队开发的AI驱动的自动化专利分析平台&#xff0c;正…
🆕

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

LeetCode-Go 题解&#xff1a;1252. Cells with Odd Values in a Matrix&#xff08;奇数值单元格计数&#xff09;双解法剖析 【免费下载链接】LeetCode-Go ✅ Solutions to LeetCode by Go, 100% test coverage, runtime beats 100% | LeetCode 题解 项目地址: https://git…
🆕

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

简介&#xff1a;面向计算机相关专业需要完成毕业设计或课程设计的学生&#xff0c;这套Java实战项目以某学院在线答疑系统为业务场景&#xff0c;采用B/S架构并搭配MySQL数据库&#xff0c;完整实现在线答疑、课程申请、知识库精选与交流互动等核心功能。项目源码共449个文件&…
THIS WEEK

本周精选

📌

AI驱动的自动化专利分析平台技术解析

1. 项目背景与核心价值在当今知识经济时代&#xff0c;专利资产已成为企业核心竞争力的重要组成部分。传统专利分析往往依赖人工阅读和专家经验&#xff0c;面对海量专利数据时存在效率低下、主观性强、成本高昂等问题。我们团队开发的AI驱动的自动化专利分析平台&#xff0c;正…
📌

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

LeetCode-Go 题解&#xff1a;1252. Cells with Odd Values in a Matrix&#xff08;奇数值单元格计数&#xff09;双解法剖析 【免费下载链接】LeetCode-Go ✅ Solutions to LeetCode by Go, 100% test coverage, runtime beats 100% | LeetCode 题解 项目地址: https://git…
📌

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

简介&#xff1a;面向计算机相关专业需要完成毕业设计或课程设计的学生&#xff0c;这套Java实战项目以某学院在线答疑系统为业务场景&#xff0c;采用B/S架构并搭配MySQL数据库&#xff0c;完整实现在线答疑、课程申请、知识库精选与交流互动等核心功能。项目源码共449个文件&…
THIS MONTH

本月热门

🔥

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

简介&#xff1a;本资源是一套面向本科毕业设计、课程设计及期末大作业的工业级焊缝缺陷检测实战方案&#xff0c;聚焦深度学习在焊接质量控制中的落地应用&#xff0c;解决传统人工检测效率低、主观性强等痛点。压缩包共26个文件&#xff0c;含9个C源码&#xff08;如yolo_det…
🔥

分布式服务的决策记录

分布式服务的决策记录架构演进最怕只有结果没有理由。一次拆分、缓存或队列调整&#xff0c;都应写明当时的瓶颈、备选方案、选择原因和撤回条件。 记录的最小单位 用一页说明解决的任务、依赖、风险和验证方式即可。别把决定写成永远正确的准则&#xff1b;前提变化时&#xf…
🔥

创业产品的首版范围

创业产品的首版范围首版的任务是验证一个需求&#xff0c;不是展示全部能力。选择用户愿意反复完成、且结果容易判断的动作&#xff0c;把输入、输出和人工兜底都做清楚。 控制范围 先做可撤回、低风险的流程。权限不明、需要复杂协作或结果不可逆的部分先不自动化。 用反馈决定…

读完文章，想聊聊您的网站？

告诉我们您的行业与需求，资深顾问一对一梳理方案与报价，全程免费。

免费获取方案 400-888-6620
📞 💬