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

【OpenHarmony/HarmonyOs 】CheckMe 屏幕检测工具实践坏点检测、色域检查、触摸测试与全屏沉浸模式本文基于CheckMe项目的屏幕检测模块展开聚焦坏点检测、色域检查、触摸测试和全屏纯色检测适合用于讲解 HarmonyOS 工具类应用中的显示检测体验设计。屏幕是用户每天接触最多的硬件之一。对于设备检测工具来说屏幕检测是一个非常直观、非常实用的模块。CheckMe中提供了两个相关页面ScreenTest.ets综合屏幕检测DeadPixelTest.ets专门的坏点检测它们覆盖坏点检测色域检查触摸测试亮度均匀性全屏纯色检测自动切换颜色这篇文章就从项目代码出发拆解如何在 HarmonyOS 中做一个可用的屏幕检测工具。️一、为什么屏幕检测适合做成独立工具屏幕检测和普通信息展示不一样它需要用户“看”和“触摸”。因此它有几个特点需要大面积纯色需要全屏沉浸需要隐藏无关 UI需要颜色快速切换需要触摸点可视化需要给用户明确的检测说明如果只做一个列表页屏幕检测就没有意义。真正的屏幕检测页面应该像一个测试仪器而不是普通设置页。二、ScreenTest 的测试模式设计ScreenTest.ets中定义了测试模式enumTestMode {DEAD_PIXELdead_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:booleanfalse;构建页面时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 支持状态亮度信息九、屏幕检测的交互注意点做屏幕检测工具时我建议注意这些细节全屏测试时保留退出方式。黑色背景下文字要变白。白色和黄色背景下文字要变黑。自动播放要能随时停止。测试说明不要遮挡关键检测区域。触摸测试要支持清空。页面离开时关闭自动播放状态。项目中根据背景色切换文字颜色privategetTextColorForBg(): string {constbgColor this.getCurrentColor();if(bgColor #000000) {return#FFFFFF; }return#000000; }这种细节会让检测体验更自然。十、文章小结CheckMe的屏幕检测模块提供了一套比较完整的显示检测思路用枚举组织测试模式用纯色列表覆盖常见坏点检测用全屏模式减少 UI 干扰用自动播放提升检测效率用触摸点记录检查触控响应用分辨率展示增强信息可信度这类功能非常适合 HarmonyOS 工具类应用因为它充分利用了设备屏幕本身而不是只展示系统参数。最后一句总结屏幕检测的核心不是写多少控件而是让用户在最少干扰下观察屏幕、触摸屏幕、判断屏幕。参考资料华为开发者文档Display API华为开发者文档Touch Event华为开发者文档Window Immersive Layout