【OpenHarmony/HarmonyOs 】CheckMe 应用管理与系统设置聚合设计搜索、分类、排序和设置面板本文基于CheckMe项目的应用管理与系统设置模块展开聚焦信息聚合型工具页的搜索、分类、排序、设置面板和系统入口组织方式。设备工具类应用不一定只做硬件检测也可以做系统信息聚合。CheckMe中有两个很典型的模块AppManager.ets应用管理页面SystemSettings.ets系统设置聚合页面它们的重点不是直接修改系统而是把用户关心的信息组织起来应用列表系统应用 / 用户应用分类搜索排序应用详情设置分类壁纸信息通知、声音、显示、网络等配置入口这篇文章就从这两个模块出发聊一聊 HarmonyOS 工具类 App 如何做“信息聚合与可视化管理”。一、为什么要做应用管理和系统设置聚合设备信息 App 如果只展示硬件参数会显得比较“冷”。应用管理和系统设置聚合可以补充用户日常使用视角当前安装了多少应用哪些是系统应用哪些是用户应用应用版本和大小是多少系统设置有哪些分类壁纸、通知、显示、声音配置是否清晰这些信息不一定都需要修改权限但聚合展示本身就有价值。对于CheckMe来说它让项目从“设备状态查看”扩展成“设备管理入口”。二、AppManager 页面状态设计应用管理页状态比较完整StateisLoading: boolean true;Stateapps: AppInfo[] [];StatefilteredApps: AppInfo[] [];StateselectedCategory: string all;StatesearchKeyword: string ;StatesortBy: string name;StatesortAscending: boolean true;Statestatistics: AppStatistics | null null;StateselectedApp: AppInfo | null null;StateshowAppDetail: boolean false;这里把原始数据和展示数据分开apps完整应用列表filteredApps筛选、搜索、排序后的列表这是列表页面的基本功。不要每次筛选都破坏原始数据否则后续重置和组合筛选会很麻烦。三、加载应用列表页面初始化时加载应用privateasync loadApps(): Promisevoid {try{constallApps: AppInfo[] awaitthis.appInfoService.getAllApps();this.apps allApps;this.filteredApps allApps;conststats awaitthis.appInfoService.getAppStatistics();this.statistics stats; }catch(e) { console.error(Failed to load apps: JSON.stringify(e)); }this.isLoading false; }这里分成两步获取应用列表获取统计摘要在真实项目中AppInfoService可以替换为bundleManager等系统能力当前项目则以结构化数据演示完整页面链路。文章中这样写更严谨不要说“已经读取真实全量应用”而是说项目已经建立了可替换的服务层结构。四、应用筛选系统应用和用户应用筛选逻辑privatefilterApps():void{letfiltered: AppInfo[] this.apps;if(this.selectedCategory system) {consttemp: AppInfo[] [];for(leti 0; i filtered.length; i) {if(filtered[i].isSystemApp) { temp.push(filtered[i]); } } filtered temp; }elseif(this.selectedCategory user) {consttemp: AppInfo[] [];for(leti 0; i filtered.length; i) {if(!filtered[i].isSystemApp) { temp.push(filtered[i]); } } filtered temp; } }分类只有三个全部系统用户简单但实用。设备工具类应用不需要一开始就设计复杂标签先把系统应用和用户应用分开就能满足大多数查看场景。五、搜索按应用名和包名匹配搜索逻辑if(this.searchKeyword ! ) { const keywordLower:string this.searchKeyword.toLowerCase(); const temp: AppInfo[][];for(leti 0; i filtered.length; i) {if(filtered[i].appName.toLowerCase().includes(keywordLower)||filtered[i].bundleName.toLowerCase().includes(keywordLower)) { temp.push(filtered[i]); } } filtered temp; }这里同时支持应用名搜索包名搜索这对开发者很有用。普通用户可能搜“相机”开发者可能搜com.huawei.camera。搜索框 UITextInput({placeholder: 搜索应用...,text:this.searchKeyword}).fontSize(14).backgroundColor($r(app.color.canvas_background)) .layoutWeight(1).height(40) .borderRadius(10).onChange((value:string) { this.onSearchChange(value); })列表工具页中搜索通常比复杂筛选更重要。六、排序按名称、大小、时间扩展页面维护排序状态StatesortBy: string name;StatesortAscending: boolean true;切换排序privateonSortChange(sortBy: string): void {if(this.sortBy sortBy) {this.sortAscending !this.sortAscending; }else{this.sortBy sortBy;this.sortAscending true; }this.filterApps(); }这个交互很常见第一次点击某个字段升序再次点击同一字段降序切换字段重置为升序这种体验适合应用管理、文件管理、日志列表等工具类页面。七、系统 Symbol 图标映射应用列表中根据包名映射图标privategetAppListSymbol(bundle: string) {if(bundle com.huawei.hmos.settings) {return$r(sys.symbol.gearshape_fill); }if(bundle com.huawei.camera) {return$r(sys.symbol.camera_fill); }if(bundle com.huawei.gallery) {return$r(sys.symbol.ohos_photo); }if(bundle com.huawei.music) {return$r(sys.symbol.music_fill); }return$r(sys.symbol.phone_fill); }这比纯文字列表更容易扫读。在 HarmonyOS 应用中合理使用系统 Symbol 能让工具页更接近系统原生风格。八、SystemSettings按分类组织设置项系统设置页的状态Statesettings: SystemSettingItem[] [];Statecategories: string[] [];StateselectedCategory: string ;Statewallpapers: WallpaperInfo[] [];StateexpandedCategory: string ;加载逻辑privateasync loadSettings(): Promisevoid {constallSettings: SystemSettingItem[] awaitthis.settingsService.getAllSettings();this.settings allSettings;constcats: string[] awaitthis.settingsService.getSettingCategories();this.categories cats;if(cats.length 0) {this.selectedCategory cats[0]; }constwallpapers: WallpaperInfo[] awaitthis.settingsService.getWallpaperInfo();this.wallpapers wallpapers;this.isLoading false; }这个页面的设计重点是“分类聚合”显示网络声音系统壁纸通知九、设置项模型系统设置项结构大致包括interfaceSystemSettingItem{ settingId:string; settingName:string; settingValue:string; settingType:string; iconName:string; category:string; isEditable:boolean; }这种结构可以同时表达多种设置类型slider亮度、音量toggleWiFi、蓝牙、勿扰selector刷新率、语言、时区navigate存储、电池、壁纸页面层可以根据settingType决定交互样式。十、分类图标和颜色服务层提供分类图标publicgetCategoryIcon(category:string):string{consticonMap: Recordstring,string {显示:️,网络:,声音:,系统:⚙️,壁纸:️,通知:};returniconMap[category] ||; }页面层提供分类颜色privategetCategoryColor(category: string): string {if(category 显示) {return#3B82F6; }if(category 网络) {return#06B6D4; }if(category 声音) {return#F59E0B; }if(category 系统) {return#8B5CF6; }return#94A3B8; }信息聚合类页面很容易变成枯燥列表用图标和颜色可以提高扫描效率。十一、这个模块的边界聚合展示不越权修改需要强调的是CheckMe当前这部分更偏“信息聚合与页面设计”不是系统设置修改器。它适合做展示设置分类展示配置项展示壁纸信息跳转到相关工具页给用户一个集中入口它不应该随意做静默修改系统设置后台改变网络状态绕过用户授权改通知读取超出权限的数据这样的边界对 HarmonyOS 工具类应用很重要。十二、文章小结CheckMe的应用管理和系统设置聚合模块可以总结成两套通用模式应用管理原始列表和筛选列表分离支持系统/用户分类支持应用名和包名搜索支持排序状态使用系统 Symbol 提升可读性系统设置聚合用分类组织设置项用类型表达交互方式用图标和颜色提高扫描效率用壁纸信息补充系统展示保持“展示和引导”边界不越权修改最后一句总结系统工具类应用的价值不只是拿到更多系统能力而是把分散的信息整理成用户看得懂、找得到、敢点击的入口。参考资料华为开发者文档Bundle Manager华为开发者文档Want华为开发者文档SymbolGlyph