【OpenHarmony/HarmonyOs 】CheckMe 应用管理与系统设置聚合设计：搜索、分类、排序和设置面板

2502_94757980

38人浏览 · 2026-07-06 23:47:12

2502_94757980 · 2026-07-06 23:47:12 发布

【OpenHarmony/HarmonyOs 】CheckMe 应用管理与系统设置聚合设计：搜索、分类、排序和设置面板

本文基于 CheckMe 项目的应用管理与系统设置模块展开，聚焦信息聚合型工具页的搜索、分类、排序、设置面板和系统入口组织方式。

设备工具类应用不一定只做硬件检测，也可以做系统信息聚合。

CheckMe 中有两个很典型的模块：

AppManager.ets：应用管理页面
SystemSettings.ets：系统设置聚合页面

它们的重点不是直接修改系统，而是把用户关心的信息组织起来：

应用列表
系统应用 / 用户应用分类
搜索
排序
应用详情
设置分类
壁纸信息
通知、声音、显示、网络等配置入口

这篇文章就从这两个模块出发，聊一聊 HarmonyOS 工具类 App 如何做“信息聚合与可视化管理”。🧩

一、为什么要做应用管理和系统设置聚合

设备信息 App 如果只展示硬件参数，会显得比较“冷”。应用管理和系统设置聚合可以补充用户日常使用视角：

当前安装了多少应用
哪些是系统应用
哪些是用户应用
应用版本和大小是多少
系统设置有哪些分类
壁纸、通知、显示、声音配置是否清晰

这些信息不一定都需要修改权限，但聚合展示本身就有价值。

对于 CheckMe 来说，它让项目从“设备状态查看”扩展成“设备管理入口”。

二、AppManager 页面状态设计

应用管理页状态比较完整：

@State isLoading: boolean = true;
@State apps: AppInfo[] = [];
@State filteredApps: AppInfo[] = [];
@State selectedCategory: string = 'all';
@State searchKeyword: string = '';
@State sortBy: string = 'name';
@State sortAscending: boolean = true;
@State statistics: AppStatistics | null = null;
@State selectedApp: AppInfo | null = null;
@State showAppDetail: boolean = false;

这里把原始数据和展示数据分开：

apps：完整应用列表
filteredApps：筛选、搜索、排序后的列表

这是列表页面的基本功。不要每次筛选都破坏原始数据，否则后续重置和组合筛选会很麻烦。

三、加载应用列表

页面初始化时加载应用：

private async loadApps(): Promise<void> {
  try {
    const allApps: AppInfo[] = await this.appInfoService.getAllApps();
    this.apps = allApps;
    this.filteredApps = allApps;

    const stats = await this.appInfoService.getAppStatistics();
    this.statistics = stats;
  } catch (e) {
    console.error('Failed to load apps: ' + JSON.stringify(e));
  }
  this.isLoading = false;
}

这里分成两步：

获取应用列表
获取统计摘要

在真实项目中，AppInfoService 可以替换为 bundleManager 等系统能力；当前项目则以结构化数据演示完整页面链路。

文章中这样写更严谨：不要说“已经读取真实全量应用”，而是说项目已经建立了可替换的服务层结构。

四、应用筛选：系统应用和用户应用

筛选逻辑：

private filterApps(): void {
  let filtered: AppInfo[] = this.apps;

  if (this.selectedCategory === 'system') {
    const temp: AppInfo[] = [];
    for (let i = 0; i < filtered.length; i++) {
      if (filtered[i].isSystemApp) {
        temp.push(filtered[i]);
      }
    }
    filtered = temp;
  } else if (this.selectedCategory === 'user') {
    const temp: AppInfo[] = [];
    for (let i = 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 (let i = 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。

搜索框 UI：

TextInput({ placeholder: '搜索应用...', text: this.searchKeyword })
  .fontSize(14)
  .backgroundColor($r('app.color.canvas_background'))
  .layoutWeight(1)
  .height(40)
  .borderRadius(10)
  .onChange((value: string) => {
    this.onSearchChange(value);
  })

列表工具页中，搜索通常比复杂筛选更重要。

六、排序：按名称、大小、时间扩展

页面维护排序状态：

@State sortBy: string = 'name';
@State sortAscending: boolean = true;

切换排序：

private onSortChange(sortBy: string): void {
  if (this.sortBy === sortBy) {
    this.sortAscending = !this.sortAscending;
  } else {
    this.sortBy = sortBy;
    this.sortAscending = true;
  }
  this.filterApps();
}

这个交互很常见：

第一次点击某个字段：升序
再次点击同一字段：降序
切换字段：重置为升序

这种体验适合应用管理、文件管理、日志列表等工具类页面。

七、系统 Symbol 图标映射

应用列表中根据包名映射图标：

private getAppListSymbol(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：按分类组织设置项

系统设置页的状态：

@State settings: SystemSettingItem[] = [];
@State categories: string[] = [];
@State selectedCategory: string = '';
@State wallpapers: WallpaperInfo[] = [];
@State expandedCategory: string = '';

加载逻辑：

private async loadSettings(): Promise<void> {
  const allSettings: SystemSettingItem[] =
    await this.settingsService.getAllSettings();
  this.settings = allSettings;

  const cats: string[] =
    await this.settingsService.getSettingCategories();
  this.categories = cats;

  if (cats.length > 0) {
    this.selectedCategory = cats[0];
  }

  const wallpapers: WallpaperInfo[] =
    await this.settingsService.getWallpaperInfo();
  this.wallpapers = wallpapers;

  this.isLoading = false;
}

这个页面的设计重点是“分类聚合”：

显示
网络
声音
系统
壁纸
通知

九、设置项模型

系统设置项结构大致包括：

interface SystemSettingItem {
  settingId: string;
  settingName: string;
  settingValue: string;
  settingType: string;
  iconName: string;
  category: string;
  isEditable: boolean;
}

这种结构可以同时表达多种设置类型：

slider：亮度、音量
toggle：WiFi、蓝牙、勿扰
selector：刷新率、语言、时区
navigate：存储、电池、壁纸

页面层可以根据 settingType 决定交互样式。

十、分类图标和颜色

服务层提供分类图标：

public getCategoryIcon(category: string): string {
  const iconMap: Record<string, string> = {
    '显示': '🖥️',
    '网络': '📶',
    '声音': '🔊',
    '系统': '⚙️',
    '壁纸': '🖼️',
    '通知': '🔔'
  };
  return iconMap[category] || '📱';
}

页面层提供分类颜色：

private getCategoryColor(category: string): string {
  if (category === '显示') {
    return '#3B82F6';
  }
  if (category === '网络') {
    return '#06B6D4';
  }
  if (category === '声音') {
    return '#F59E0B';
  }
  if (category === '系统') {
    return '#8B5CF6';
  }
  return '#94A3B8';
}