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

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

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

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

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

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

它们覆盖:

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

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


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

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

因此它有几个特点:

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

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


二、ScreenTest 的测试模式设计

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

enumTestMode {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:'检测红蓝坏点'} ];

为什么要这些颜色?

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

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


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

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

@StateisFullScreen: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 干扰,让用户专注观察屏幕是否有异常点。


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

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

代码逻辑:

privatetoggleAutoPlay(): void {this.isAutoPlaying = !this.isAutoPlaying;if(this.isAutoPlaying) {this.startAutoPlay(); } }privatestartAutoPlay(): 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; }

状态如下:

@StatetouchPoints: TouchPoint[] = [];@StatetouchCount: number =0;

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

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

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

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

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


八、读取屏幕分辨率

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

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

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

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

如果后续扩展,还可以加入:

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

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

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

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

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

privategetTextColorForBg(): string {constbgColor =this.getCurrentColor();if(bgColor ==='#000000') {return'#FFFFFF'; }return'#000000'; }

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


十、文章小结

CheckMe的屏幕检测模块提供了一套比较完整的显示检测思路:

  • 用枚举组织测试模式
  • 用纯色列表覆盖常见坏点检测
  • 用全屏模式减少 UI 干扰
  • 用自动播放提升检测效率
  • 用触摸点记录检查触控响应
  • 用分辨率展示增强信息可信度

这类功能非常适合 HarmonyOS 工具类应用,因为它充分利用了设备屏幕本身,而不是只展示系统参数。

最后一句总结:屏幕检测的核心不是写多少控件,而是让用户在最少干扰下观察屏幕、触摸屏幕、判断屏幕。🔍


参考资料

  • 华为开发者文档:Display API
  • 华为开发者文档:Touch Event
  • 华为开发者文档:Window Immersive Layout