文章目录筛选状态的设计分类列表也用 get 派生分类标签横向滚动选中状态的视觉设计完整代码搜索和分类的组合过滤分类标签里加计数徽章小结分类筛选是 PC 端应用桌面的标配功能。点击某个类别标签网格里只显示该类别的应用。听起来简单实现时有几个细节容易踩坑分类标签数量多了怎么处理、筛选结果怎么和标签状态保持同步、全部类别的逻辑怎么写干净。这篇把这几个问题一起解决。筛选状态的设计只需要一个State变量当前选中的分类名称。StateactiveCategory:string全部不需要再存一个当前显示的应用列表状态。用get派生getfilteredApps():AppItem[]{if(this.activeCategory全部)returnthis.appsreturnthis.apps.filter(aa.categorythis.activeCategory)}activeCategory变了filteredApps自动重新计算ForEach拿到新数组UI 刷新。整个流程只改一处状态。分类列表也用 get 派生分类列表从应用数据里提取不手动维护getcategories():string[]{constcatsnewSet(this.apps.map(aa.category))return[全部,...cats]}Set去重保证每个分类名只出现一次。最前面插入全部。这样好处是新增一个应用时如果它的分类之前没有分类列表会自动出现新分类不需要手动维护两份数据。分类标签横向滚动分类多了放不下的时候不能换行会占掉太多竖向空间用横向滚动Scroll(){Row({space:8}){ForEach(this.categories,(cat:string){Text(cat).fontSize(13).padding({left:16,right:16,top:8,bottom:8}).backgroundColor(this.activeCategorycat?#EFF6FF:Color.Transparent).fontColor(this.activeCategorycat?#3B82F6:#6B7280).borderRadius(20).onClick((){this.activeCategorycat})})}.padding({left:16,right:16})}.scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off)// 隐藏滚动条PC端标签行不需要滚动条.height(48)ScrollDirection.Horizontal设横向滚动scrollBar(BarState.Off)隐藏滚动条——标签行的滚动条一般没必要显示。选中状态的视觉设计选中的标签蓝色文字 浅蓝背景 字重加粗。未选中灰色文字 透明背景。这三个属性都由activeCategory cat这一个条件控制切换干净利落.fontColor(this.activeCategorycat?#3B82F6:#6B7280).backgroundColor(this.activeCategorycat?#EFF6FF:Color.Transparent).fontWeight(this.activeCategorycat?FontWeight.Medium:FontWeight.Normal)完整代码interfaceAppItem{id:numbername:stringcategory:stringversion:stringicon:stringcolor:stringhasUpdate:booleanrating:number}EntryComponentstruct PcAppGridPage{Statecolumns:number5StateactiveCategory:string全部StatecategoryList:string[][全部]StatedisplayApps:AppItem[][]apps:AppItem[][{id:1,name:浏览器,category:工具,version:1.2.1,icon:,color:#3B82F6,hasUpdate:false,rating:4.8},{id:2,name:文件管理,category:系统,version:2.0.0,icon:,color:#10B981,hasUpdate:true,rating:4.6},{id:3,name:备忘录,category:效率,version:3.1.0,icon:,color:#F59E0B,hasUpdate:false,rating:4.7},{id:4,name:日历,category:效率,version:1.8.2,icon:,color:#8B5CF6,hasUpdate:true,rating:4.5},{id:5,name:计算器,category:工具,version:1.0.5,icon:,color:#EF4444,hasUpdate:false,rating:4.9},{id:6,name:相册,category:媒体,version:4.2.1,icon:️,color:#EC4899,hasUpdate:false,rating:4.8},{id:7,name:音乐,category:媒体,version:5.0.1,icon:,color:#6366F1,hasUpdate:true,rating:4.7},{id:8,name:视频,category:媒体,version:3.3.0,icon:,color:#F43F5E,hasUpdate:false,rating:4.6},{id:9,name:设置,category:系统,version:1.5.0,icon:⚙️,color:#6B7280,hasUpdate:false,rating:4.4},{id:10,name:AppGallery,category:系统,version:12.0,icon:,color:#CF1322,hasUpdate:true,rating:4.8},{id:11,name:邮件,category:通讯,version:2.4.0,icon:,color:#0EA5E9,hasUpdate:false,rating:4.3},{id:12,name:地图,category:工具,version:6.1.0,icon:️,color:#22C55E,hasUpdate:false,rating:4.7},{id:13,name:天气,category:工具,version:1.9.0,icon:️,color:#06B6D4,hasUpdate:true,rating:4.6},{id:14,name:代码编辑器,category:效率,version:2.0.0,icon:,color:#1D4ED8,hasUpdate:false,rating:4.9},{id:15,name:终端,category:系统,version:1.1.0,icon:⬛,color:#111827,hasUpdate:false,rating:4.8},]aboutToAppear():void{this.initData()}initData():void{constcats:string[][全部]this.apps.forEach((app:AppItem){if(cats.indexOf(app.category)-1){cats.push(app.category)}})this.categoryListcatsthis.updateDisplayApps()}updateDisplayApps():void{if(this.activeCategory全部){this.displayAppsthis.appsreturn}this.displayAppsthis.apps.filter((app:AppItem)app.categorythis.activeCategory)}getbasisPercent():string{return${(100/this.columns).toFixed(2)}%}BuilderappIcon(app:AppItem){Column({space:8}){Stack({alignContent:Alignment.TopEnd}){// 应用图标Column(){Text(app.icon).fontSize(32)}.width(64).height(64).borderRadius(16).backgroundColor(app.color).justifyContent(FlexAlign.Center).shadow({radius:8,color:${app.color}30,offsetY:4})// 更新角标if(app.hasUpdate){Circle({width:12,height:12}).fill(#EF4444).border({width:2,color:Color.White}).offset({x:4,y:-4})}}Text(app.name).fontSize(11).fontColor(#374151).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis}).width(72).textAlign(TextAlign.Center)}.alignItems(HorizontalAlign.Center).padding({top:12,bottom:12}).onClick((){})}BuildercolumnSelector(){Row({space:4}){Text(列数).fontSize(13).fontColor(#6B7280)ForEach([4,5,6,7],(col:number){Text(${col}).fontSize(13).fontColor(this.columnscol?Color.White:#374151).padding({left:12,right:12,top:6,bottom:6}).backgroundColor(this.columnscol?#3B82F6:#F3F4F6).borderRadius(8).onClick((){this.columnscol})},(col:number)col.toString())}}build(){Column({space:0}){// 顶部工具栏Row({space:16}){Text(应用桌面).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#111827).layoutWeight(1)this.columnSelector()}.padding({left:24,right:24,top:20,bottom:16}).backgroundColor(Color.White).width(100%)// 分类筛选Scroll(){Row({space:4}){ForEach(this.categoryList,(cat:string){Text(cat).fontSize(13).fontColor(this.activeCategorycat?#3B82F6:#6B7280).fontWeight(this.activeCategorycat?FontWeight.Medium:FontWeight.Normal).padding({left:16,right:16,top:8,bottom:8}).backgroundColor(this.activeCategorycat?#EFF6FF:Color.Transparent).borderRadius(20).onClick((){this.activeCategorycatthis.updateDisplayApps()})},(cat:string)cat)}.padding({left:24,right:24})}.scrollable(ScrollDirection.Horizontal).width(100%).height(44).backgroundColor(Color.White)Divider().strokeWidth(1).color(#F3F4F6)// 应用网格Scroll(){Flex({wrap:FlexWrap.Wrap,alignContent:FlexAlign.Start}){ForEach(this.displayApps,(app:AppItem){Column(){this.appIcon(app)}.flexBasis(this.basisPercent).alignItems(HorizontalAlign.Center)},(app:AppItem)app.id.toString())}.width(100%).padding({left:12,right:12,top:16,bottom:24})}.layoutWeight(1).backgroundColor(#F9FAFB)}.width(100%).height(100%).constraintSize({minWidth:640})}}搜索和分类的组合过滤两个过滤条件叠加时先按分类过滤再按搜索词过滤getfilteredApps():AppItem[]{letresultthis.activeCategory全部?this.apps:this.apps.filter(aa.categorythis.activeCategory)if(this.searchText.trim()){resultresult.filter(aa.name.includes(this.searchText.trim()))}returnresult}两个StateactiveCategory和searchText任意一个变化filteredApps就会重新计算UI 自动更新。分类标签里加计数徽章分类标签里加上该分类应用数量比如效率 3用户在点之前就知道里面有几个constcountthis.apps.filter(aa.categorycat).length这个数量是实时计算的如果应用列表变了数量自动跟着变。不需要在数据里预先存每个分类有多少个。小结分类筛选的核心设计原则只存一个筛选状态其他的派生。不要同时存当前分类和当前显示的应用列表两个状态这样只会给自己制造同步问题。让get访问器帮你做派生简单清晰。
HarmonyOS PC实战系列之应用桌面的分类筛选——get 派生属性与横向滚动标签行
发布时间：2026/6/14 12:22:26
文章目录筛选状态的设计分类列表也用 get 派生分类标签横向滚动选中状态的视觉设计完整代码搜索和分类的组合过滤分类标签里加计数徽章小结分类筛选是 PC 端应用桌面的标配功能。点击某个类别标签网格里只显示该类别的应用。听起来简单实现时有几个细节容易踩坑分类标签数量多了怎么处理、筛选结果怎么和标签状态保持同步、全部类别的逻辑怎么写干净。这篇把这几个问题一起解决。筛选状态的设计只需要一个State变量当前选中的分类名称。StateactiveCategory:string全部不需要再存一个当前显示的应用列表状态。用get派生getfilteredApps():AppItem[]{if(this.activeCategory全部)returnthis.appsreturnthis.apps.filter(aa.categorythis.activeCategory)}activeCategory变了filteredApps自动重新计算ForEach拿到新数组UI 刷新。整个流程只改一处状态。分类列表也用 get 派生分类列表从应用数据里提取不手动维护getcategories():string[]{constcatsnewSet(this.apps.map(aa.category))return[全部,...cats]}Set去重保证每个分类名只出现一次。最前面插入全部。这样好处是新增一个应用时如果它的分类之前没有分类列表会自动出现新分类不需要手动维护两份数据。分类标签横向滚动分类多了放不下的时候不能换行会占掉太多竖向空间用横向滚动Scroll(){Row({space:8}){ForEach(this.categories,(cat:string){Text(cat).fontSize(13).padding({left:16,right:16,top:8,bottom:8}).backgroundColor(this.activeCategorycat?#EFF6FF:Color.Transparent).fontColor(this.activeCategorycat?#3B82F6:#6B7280).borderRadius(20).onClick((){this.activeCategorycat})})}.padding({left:16,right:16})}.scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off)// 隐藏滚动条PC端标签行不需要滚动条.height(48)ScrollDirection.Horizontal设横向滚动scrollBar(BarState.Off)隐藏滚动条——标签行的滚动条一般没必要显示。选中状态的视觉设计选中的标签蓝色文字 浅蓝背景 字重加粗。未选中灰色文字 透明背景。这三个属性都由activeCategory cat这一个条件控制切换干净利落.fontColor(this.activeCategorycat?#3B82F6:#6B7280).backgroundColor(this.activeCategorycat?#EFF6FF:Color.Transparent).fontWeight(this.activeCategorycat?FontWeight.Medium:FontWeight.Normal)完整代码interfaceAppItem{id:numbername:stringcategory:stringversion:stringicon:stringcolor:stringhasUpdate:booleanrating:number}EntryComponentstruct PcAppGridPage{Statecolumns:number5StateactiveCategory:string全部StatecategoryList:string[][全部]StatedisplayApps:AppItem[][]apps:AppItem[][{id:1,name:浏览器,category:工具,version:1.2.1,icon:,color:#3B82F6,hasUpdate:false,rating:4.8},{id:2,name:文件管理,category:系统,version:2.0.0,icon:,color:#10B981,hasUpdate:true,rating:4.6},{id:3,name:备忘录,category:效率,version:3.1.0,icon:,color:#F59E0B,hasUpdate:false,rating:4.7},{id:4,name:日历,category:效率,version:1.8.2,icon:,color:#8B5CF6,hasUpdate:true,rating:4.5},{id:5,name:计算器,category:工具,version:1.0.5,icon:,color:#EF4444,hasUpdate:false,rating:4.9},{id:6,name:相册,category:媒体,version:4.2.1,icon:️,color:#EC4899,hasUpdate:false,rating:4.8},{id:7,name:音乐,category:媒体,version:5.0.1,icon:,color:#6366F1,hasUpdate:true,rating:4.7},{id:8,name:视频,category:媒体,version:3.3.0,icon:,color:#F43F5E,hasUpdate:false,rating:4.6},{id:9,name:设置,category:系统,version:1.5.0,icon:⚙️,color:#6B7280,hasUpdate:false,rating:4.4},{id:10,name:AppGallery,category:系统,version:12.0,icon:,color:#CF1322,hasUpdate:true,rating:4.8},{id:11,name:邮件,category:通讯,version:2.4.0,icon:,color:#0EA5E9,hasUpdate:false,rating:4.3},{id:12,name:地图,category:工具,version:6.1.0,icon:️,color:#22C55E,hasUpdate:false,rating:4.7},{id:13,name:天气,category:工具,version:1.9.0,icon:️,color:#06B6D4,hasUpdate:true,rating:4.6},{id:14,name:代码编辑器,category:效率,version:2.0.0,icon:,color:#1D4ED8,hasUpdate:false,rating:4.9},{id:15,name:终端,category:系统,version:1.1.0,icon:⬛,color:#111827,hasUpdate:false,rating:4.8},]aboutToAppear():void{this.initData()}initData():void{constcats:string[][全部]this.apps.forEach((app:AppItem){if(cats.indexOf(app.category)-1){cats.push(app.category)}})this.categoryListcatsthis.updateDisplayApps()}updateDisplayApps():void{if(this.activeCategory全部){this.displayAppsthis.appsreturn}this.displayAppsthis.apps.filter((app:AppItem)app.categorythis.activeCategory)}getbasisPercent():string{return${(100/this.columns).toFixed(2)}%}BuilderappIcon(app:AppItem){Column({space:8}){Stack({alignContent:Alignment.TopEnd}){// 应用图标Column(){Text(app.icon).fontSize(32)}.width(64).height(64).borderRadius(16).backgroundColor(app.color).justifyContent(FlexAlign.Center).shadow({radius:8,color:${app.color}30,offsetY:4})// 更新角标if(app.hasUpdate){Circle({width:12,height:12}).fill(#EF4444).border({width:2,color:Color.White}).offset({x:4,y:-4})}}Text(app.name).fontSize(11).fontColor(#374151).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis}).width(72).textAlign(TextAlign.Center)}.alignItems(HorizontalAlign.Center).padding({top:12,bottom:12}).onClick((){})}BuildercolumnSelector(){Row({space:4}){Text(列数).fontSize(13).fontColor(#6B7280)ForEach([4,5,6,7],(col:number){Text(${col}).fontSize(13).fontColor(this.columnscol?Color.White:#374151).padding({left:12,right:12,top:6,bottom:6}).backgroundColor(this.columnscol?#3B82F6:#F3F4F6).borderRadius(8).onClick((){this.columnscol})},(col:number)col.toString())}}build(){Column({space:0}){// 顶部工具栏Row({space:16}){Text(应用桌面).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#111827).layoutWeight(1)this.columnSelector()}.padding({left:24,right:24,top:20,bottom:16}).backgroundColor(Color.White).width(100%)// 分类筛选Scroll(){Row({space:4}){ForEach(this.categoryList,(cat:string){Text(cat).fontSize(13).fontColor(this.activeCategorycat?#3B82F6:#6B7280).fontWeight(this.activeCategorycat?FontWeight.Medium:FontWeight.Normal).padding({left:16,right:16,top:8,bottom:8}).backgroundColor(this.activeCategorycat?#EFF6FF:Color.Transparent).borderRadius(20).onClick((){this.activeCategorycatthis.updateDisplayApps()})},(cat:string)cat)}.padding({left:24,right:24})}.scrollable(ScrollDirection.Horizontal).width(100%).height(44).backgroundColor(Color.White)Divider().strokeWidth(1).color(#F3F4F6)// 应用网格Scroll(){Flex({wrap:FlexWrap.Wrap,alignContent:FlexAlign.Start}){ForEach(this.displayApps,(app:AppItem){Column(){this.appIcon(app)}.flexBasis(this.basisPercent).alignItems(HorizontalAlign.Center)},(app:AppItem)app.id.toString())}.width(100%).padding({left:12,right:12,top:16,bottom:24})}.layoutWeight(1).backgroundColor(#F9FAFB)}.width(100%).height(100%).constraintSize({minWidth:640})}}搜索和分类的组合过滤两个过滤条件叠加时先按分类过滤再按搜索词过滤getfilteredApps():AppItem[]{letresultthis.activeCategory全部?this.apps:this.apps.filter(aa.categorythis.activeCategory)if(this.searchText.trim()){resultresult.filter(aa.name.includes(this.searchText.trim()))}returnresult}两个StateactiveCategory和searchText任意一个变化filteredApps就会重新计算UI 自动更新。分类标签里加计数徽章分类标签里加上该分类应用数量比如效率 3用户在点之前就知道里面有几个constcountthis.apps.filter(aa.categorycat).length这个数量是实时计算的如果应用列表变了数量自动跟着变。不需要在数据里预先存每个分类有多少个。小结分类筛选的核心设计原则只存一个筛选状态其他的派生。不要同时存当前分类和当前显示的应用列表两个状态这样只会给自己制造同步问题。让get访问器帮你做派生简单清晰。
相关文章
深入解析MPC7450 MPX总线：地址、数据与仲裁机制详解
1. MPC7450 MPX总线：高性能系统的通信基石在嵌入式系统和高性能计算领域，处理器与外部世界的通信效率直接决定了整个系统的性能上限。MPC7450，作为PowerPC架构中一颗经典的RISC微处理器，其强大的计算能力必须通过一个同样高效、可…
仿生蝴蝶型机器人设计23(设计源文件+万字报告+讲解)（支持资料、图片参考_相关定制）_文章底部可以扫码
仿生蝴蝶型机器人设计23(设计源文件万字报告讲解)（支持资料、图片参考_相关定制）_文章底部可以扫码 仿生蝴蝶型机器人设计有限元仿真说明书
抖音无水印下载完整教程：三步轻松保存高清视频的终极指南
抖音无水印下载完整教程：三步轻松保存高清视频的终极指南 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback su…
MPC8309 DMA控制器：直接与链式模式实战及性能调优
1. MPC8309 DMA控制器：嵌入式数据传输的引擎核心在嵌入式系统开发，尤其是网络通信处理器领域，数据搬运的效率直接决定了整个系统的性能上限。CPU如果被频繁的、大批量的数据拷贝任务所拖累，那么处理核心业务逻辑的能力就会大打折扣…
MPC8272ADS开发板接口设计与可编程逻辑控制深度解析
1. MPC8272ADS开发板接口与可编程逻辑设计概述在嵌入式系统开发领域，尤其是基于PowerPC架构的高性能通信处理器平台，硬件接口的稳定性和可编程逻辑的灵活性是决定项目成败的关键。MPC8272ADS开发板作为一款经典的评估平台，其设计精髓在于通过…
MPC823 SCC模块深度解析：从硬件状态机到缓冲区描述符的嵌入式通信实践
1. MPC823通信处理器模块SCCs：从硬件状态机到软件驱动的深度解析在嵌入式通信处理器的世界里，MPC823的通信处理器模块（CPM）是一个经典且强大的存在，尤其它的串行通信控制器（SCC）模块，…
MPC8272 SCC UART控制器：从零拷贝DMA到多站通信的实战指南
1. 项目概述：深入MPC8272的SCC UART控制器在嵌入式系统开发，尤其是工业控制、网络设备和通信网关领域，串行通信是连接设备与世界的“毛细血管”。UART（通用异步收发传输器）作为最经典、最普遍的串行通信接口࿰…
别再混淆了！一文讲透华为设备上IPsec over GRE和GRE over IPsec的区别与选型
华为设备IPsec与GRE嵌套技术：从原理到选型的深度解析在跨地域企业组网中，工程师们常常面临一个经典选择题：当需要同时实现流量加密和隧道封装时，究竟该选择IPsec over GRE还是GRE over IPsec？这两种看似相似的技术方案…
MPC8260 ADS开发板硬件设计深度解析：连接器、BOM与调试实战
1. 项目概述：从一份手册到一套硬件设计指南在嵌入式硬件开发领域，尤其是面对像Freescale（现NXP）MPC8260这类高度集成的通信处理器时，开发板（Application Development System， ADS）不…
音乐文件解锁实战指南：3个场景解决你的播放困境
音乐文件解锁实战指南：3个场景解决你的播放困境 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库： 1. https://github.com/unlock-music/unlock-music ；2. https://git.unlock-music.dev/um/web 项目地址: https://git…
从Landsat到高分系列：手把手教你选择适合自己项目的遥感卫星数据
遥感卫星数据选型实战指南：从参数解析到场景化应用当面对GEE、PIE-Engine等云平台上数十种遥感数据源时，许多研究者常陷入选择困难——Landsat的历史连续性、Sentinel-2的红边波段优势、高分系列的亚米级分辨率各有千秋。本文将打破常规参数罗列式对比&a…
MC68302 AutoBaud技术：硬件级串口波特率自动检测原理与实现
1. 项目概述：MC68302 AutoBaud技术深度解析在嵌入式系统开发，尤其是那些需要与外部设备进行串口通信的场景里，最让人头疼的环节之一就是波特率匹配。想象一下，你设计了一个数据采集终端，需要连接来自不同厂家、不同年代…
音乐文件解锁实战指南：3个场景解决你的播放困境
音乐文件解锁实战指南：3个场景解决你的播放困境 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库： 1. https://github.com/unlock-music/unlock-music ；2. https://git.unlock-music.dev/um/web 项目地址: https://git…
从Landsat到高分系列：手把手教你选择适合自己项目的遥感卫星数据
遥感卫星数据选型实战指南：从参数解析到场景化应用当面对GEE、PIE-Engine等云平台上数十种遥感数据源时，许多研究者常陷入选择困难——Landsat的历史连续性、Sentinel-2的红边波段优势、高分系列的亚米级分辨率各有千秋。本文将打破常规参数罗列式对比&a…
MC68302 AutoBaud技术：硬件级串口波特率自动检测原理与实现
1. 项目概述：MC68302 AutoBaud技术深度解析在嵌入式系统开发，尤其是那些需要与外部设备进行串口通信的场景里，最让人头疼的环节之一就是波特率匹配。想象一下，你设计了一个数据采集终端，需要连接来自不同厂家、不同年代…
Zotero Duplicates Merger：5步彻底清理文献库重复条目
Zotero Duplicates Merger：5步彻底清理文献库重复条目 【免费下载链接】ZoteroDuplicatesMerger A zotero plugin to automatically merge duplicate items 项目地址: https://gitcode.com/gh_mirrors/zo/ZoteroDuplicatesMerger 还在为文献库中堆积如山的重…
利用随机有限集理论对蜂群的ILQR和MPC控制研究附Matlab代码
✅作者简介：热爱科研的Matlab仿真开发者，擅长数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。🍎 往期回顾关注个人主页：Matlab科研工作室🍊个人信条：格物致知,完整Matlab代码及仿真咨询…
为什么你的Gemini邮件CTE低于行业均值2.8倍？：从Prompt架构到发送时序的深度归因
更多请点击： https://intelliparadigm.com 第一章：为什么你的Gemini邮件CTE低于行业均值2.8倍？：从Prompt架构到发送时序的深度归因 Gemini邮件的客户转化效率（CTE）显著偏低，根本原因常被误判为…