【OpenHarmony/HarmonyOs 】CheckMe 屏幕检测工具实践：坏点检测、色域检查、触摸测试与全屏沉浸模式

2502_94757980

44人浏览 · 2026-07-06 23:45:17

2502_94757980 · 2026-07-06 23:45:17 发布

【OpenHarmony/HarmonyOs 】CheckMe 屏幕检测工具实践：坏点检测、色域检查、触摸测试与全屏沉浸模式

本文基于 CheckMe 项目的屏幕检测模块展开，聚焦坏点检测、色域检查、触摸测试和全屏纯色检测，适合用于讲解 HarmonyOS 工具类应用中的显示检测体验设计。

屏幕是用户每天接触最多的硬件之一。对于设备检测工具来说，屏幕检测是一个非常直观、非常实用的模块。

CheckMe 中提供了两个相关页面：

ScreenTest.ets：综合屏幕检测
DeadPixelTest.ets：专门的坏点检测

它们覆盖：

坏点检测
色域检查
触摸测试
亮度均匀性
全屏纯色检测
自动切换颜色

这篇文章就从项目代码出发，拆解如何在 HarmonyOS 中做一个可用的屏幕检测工具。🖥️

一、为什么屏幕检测适合做成独立工具

屏幕检测和普通信息展示不一样，它需要用户“看”和“触摸”。

因此它有几个特点：

需要大面积纯色
需要全屏沉浸
需要隐藏无关 UI
需要颜色快速切换
需要触摸点可视化
需要给用户明确的检测说明

如果只做一个列表页，屏幕检测就没有意义。真正的屏幕检测页面应该像一个测试仪器，而不是普通设置页。

二、ScreenTest 的测试模式设计

ScreenTest.ets 中定义了测试模式：

enum TestMode {
  DEAD_PIXEL = 'dead_pixel',
  COLOR_GAMUT = 'color_gamut',
  TOUCH_TEST = 'touch_test',
  UNIFORMITY = 'uniformity'
}

这四个模式分别对应：

模式	作用
`DEAD_PIXEL`	用纯色检测亮点、暗点、色点
`COLOR_GAMUT`	检查屏幕色彩表现
`TOUCH_TEST`	记录触摸点，检查触控响应
`UNIFORMITY`	检查亮度均匀性

这种枚举式设计很适合扩展。如果以后要增加“灰阶测试”“刷新率感知测试”“HDR 对比测试”，只需要扩展模式和对应视图即可。

三、坏点检测颜色列表

坏点检测的核心是纯色切换。

项目中定义了 8 种颜色：

private deadPixelColors: ColorItem[] = [
  { name: '纯红', color: '#FF0000', description: '检测红色坏点' },
  { name: '纯绿', color: '#00FF00', description: '检测绿色坏点' },
  { name: '纯蓝', color: '#0000FF', description: '检测蓝色坏点' },
  { name: '纯白', color: '#FFFFFF', description: '检测暗点' },
  { name: '纯黑', color: '#000000', description: '检测亮点' },
  { name: '纯黄', color: '#FFFF00', description: '检测红绿坏点' },
  { name: '纯青', color: '#00FFFF', description: '检测绿蓝坏点' },
  { name: '纯品红', color: '#FF00FF', description: '检测红蓝坏点' }
];

为什么要这些颜色？

红、绿、蓝：检测单色子像素异常
白色：检测暗点
黑色：检测亮点和漏光
黄、青、品红：检测组合通道异常

这比只用黑白两色更全面。

四、全屏模式：屏幕检测必须减少干扰

页面通过状态控制是否全屏：

@State isFullScreen: boolean = false;

构建页面时：

build() {
  Stack({ alignContent: Alignment.Bottom }) {
    Column() {
      if (!this.isFullScreen) {
        this.NavigationBar();
      }
      if (!this.isFullScreen) {
        this.ContentArea();
      } else {
        this.FullScreenTestArea();
      }
    }
    .width('100%')
    .height('100%')
  }
  .width('100%')
  .height('100%')
  .backgroundColor(
    this.isFullScreen
      ? this.getDeadPixelColor()
      : this.getBgSubtleColor()
  )
}

这里的关键是：

非全屏时显示导航和说明
全屏时只显示测试内容
背景直接切换为当前测试颜色

这能最大限度减少 UI 干扰，让用户专注观察屏幕是否有异常点。

五、自动播放：让检测流程更顺滑

屏幕坏点检测中，用户可以手动切换颜色，也可以自动播放。

代码逻辑：

private toggleAutoPlay(): void {
  this.isAutoPlaying = !this.isAutoPlaying;
  if (this.isAutoPlaying) {
    this.startAutoPlay();
  }
}

private startAutoPlay(): void {
  if (!this.isAutoPlaying) return;
  setTimeout(() => {
    if (this.isAutoPlaying) {
      this.nextColor();
      this.startAutoPlay();
    }
  }, 2000);
}

自动播放每 2 秒切换颜色。

这里需要注意：

页面退出时要停止自动播放
切换测试模式时要停止自动播放
不要使用无法清理的循环定时器

项目在页面消失时处理：

aboutToDisappear(): void {
  this.isAutoPlaying = false;
}

六、独立坏点检测页：更专注的体验

除了综合屏幕检测，项目还有 DeadPixelTest.ets。

它同样维护颜色列表：

private deadPixelColors: ColorItem[] = [
  { name: '纯红', nameEn: 'Red', color: '#FF0000', description: '检测红色坏点 / 亮点' },
  { name: '纯绿', nameEn: 'Green', color: '#00FF00', description: '检测绿色坏点 / 暗点' },
  { name: '纯蓝', nameEn: 'Blue', color: '#0000FF', description: '检测蓝色坏点' },
  { name: '纯白', nameEn: 'White', color: '#FFFFFF', description: '检测暗点 / 亮点' },
  { name: '纯黑', nameEn: 'Black', color: '#000000', description: '检测亮点（背光漏光）' }
];

单独页面的好处是：

入口更直接
说明更聚焦
可以做更沉浸的全屏操作
不被其他屏幕测试功能干扰

如果用户只是想买机验屏，这个入口会比综合工具更高效。

七、触摸测试：记录触摸点

综合屏幕检测中有触摸点结构：

interface TouchPoint {
  x: number;
  y: number;
  id: number;
}

状态如下：

@State touchPoints: TouchPoint[] = [];
@State touchCount: number = 0;

触摸测试的关键不是复杂算法，而是让用户看到触摸反馈：

点击哪里，哪里出现点
多次触摸有不同颜色
可以重置测试
可以统计触摸次数

项目中给触摸点准备了循环颜色：

private getTouchPointColor(index: number): string {
  const colors: string[] = [
    '#FF6B6B',
    '#4ECDC4',
    '#45B7D1',
    '#96CEB4',
    '#FFEAA7',
    '#DDA0DD'
  ];
  return colors[index % colors.length];
}

这让触摸轨迹更容易区分。

八、读取屏幕分辨率

屏幕检测页会展示当前屏幕分辨率：

private getScreenResolution(): string {
  try {
    const displaySync = display.getDefaultDisplaySync();
    return `${displaySync.width} x ${displaySync.height}`;
  } catch (_e) {
    return '未知';
  }
}

屏幕检测工具展示分辨率有两个好处：

用户能确认当前设备显示参数
截图或报告时更有参考价值

如果后续扩展，还可以加入：

刷新率
像素密度
屏幕方向
HDR 支持状态
亮度信息

九、屏幕检测的交互注意点

做屏幕检测工具时，我建议注意这些细节：

全屏测试时保留退出方式。
黑色背景下文字要变白。
白色和黄色背景下文字要变黑。
自动播放要能随时停止。
测试说明不要遮挡关键检测区域。
触摸测试要支持清空。
页面离开时关闭自动播放状态。

项目中根据背景色切换文字颜色：

private getTextColorForBg(): string {
  const bgColor = this.getCurrentColor();
  if (bgColor === '#000000') {
    return '#FFFFFF';
  }
  return '#000000';
}

这种细节会让检测体验更自然。