HarmonyOS7应用《拼棋派对》实战:深浅主题、控件对比度与统一样式

按钮颜色鲜艳,不代表上面的字一定看得清。双人区域中蓝、红、绿有明确含义,但文字、边框、选中态和背景需要一起检查。《拼棋派对》保留了既有深色玩法配色,同时处理系统主题变化和部分棋盘的深浅显示。

本篇以当前1.0.19的样式函数为依据,讨论怎样检查真实背景上的对比度。图示包含此前主题适配证据,不把历史截图当作本轮所有页面都已完成深浅主题验收。

本文目录

系统主题与产品配色的边界

EntryAbility从Configuration读取colorMode,并将isDarkMode写到AppStorage。配置更新时继续同步;系统栏内容色也按主题设置。页面可以据此调整需要切换的局部样式。

但主页面的pageBg、panelBg、textPrimary当前返回固定深色主题色。不能看到isDarkMode字段就宣称所有面板会自动变成浅色。系统主题感知与每个组件采用主题色,是两件独立的事。

typescript 复制代码
private pageBg(): string { return '#05070B'; }
private panelBg(): string { return '#F00D1624'; }
private textPrimary(): string { return '#F4F8FF'; }
private textMuted(): string { return '#CBD6E8'; }

固定深色游戏区本身可以是设计选择,前提是页面内部颜色成套使用。若只把文字切到深色而保留深色面板,系统浅色模式下反而会难读。主题切换应以实际背景为依据。

明确文字、面板和状态色

项目用辅助函数集中定义面板、次级文字、边框和选中颜色,页面Builder再调用。这比各个Text依赖系统默认字体色更可控。按钮也应同时设置背景与文字,而不是只指定鲜艳背景。

绿色#92F536主要操作按钮采用深色文字#081018;蓝色和红色用于双方身份时,同样要检查字与底的组合。绿色边框和绿色填充不是同一对比条件,不能共用一个"绿色通过"的结论。

元素 应检查的组合
普通正文、按钮标签 文字与实际合成背景
选中边框 边框与外侧、内侧背景
空棋格与可走点 标记与棋盘背景
禁用按钮 文字、边界和背景的可读性
成绩与错误提示 数值、图标、颜色及语义

样式集中也有边界:单个函数正确,不保证每个调用点都放在合适的背景上。应结合具体页面检查。

计算实际背景上的对比度

普通文字至少4.5:1,大号文字、图标、边框和关键状态至少3:1。相对亮度需要先将sRGB转换为线性值,再按通道权重相加,最后比较较亮与较暗值。

typescript 复制代码
const ratio = (Math.max(luminanceA, luminanceB) + 0.05) /
  (Math.min(luminanceA, luminanceB) + 0.05);

这是计算公式,不是直接把十六进制RGB平均。项目的历史检查脚本对多组实色组合计算过比值,但半透明面板和图片背景仍要另外处理。

panelBg中的#F0是透明度。它会与后面的画面合成,不能把面板RGB当作永远不变的最终颜色。自定义图片有亮区和暗区,最差位置才决定文字是否可读。必要时增加足够不透明的文字承载面板,而不是靠描边勉强辨认。

禁用态和自定义背景

成语已经消除的格子、诗词排除的选项、不可撤销按钮都属于状态设计。禁用不等于消失,也不等于把文字变得与背景接近。可以保留明确标签,同时用不响应点击、边界和辅助提示表达限制。

错误不能只用红色,成功不能只用绿色。找茬增加命中符号与文字说明,诗词有具体反馈,棋类有轮次和将军提示。这些信息帮助用户理解发生了什么,也让截图和测试可以核对状态。

PC默认和最大化窗口的正文、标签、控件文字不得低于项目10fp下限。手机和平板还需检查截断、重叠与触摸区域。为了适配短窗口把所有字无限缩小,会用一个问题掩盖另一个问题。

效果与检查方法

下面展示此前平板象棋在系统浅色环境的初始状态,以及后续适配阶段的选中状态,观察文字、棋盘和选中标记的配色。两张图属于不同取证轮次,不是一次实时主题切换;系统浅色时,游戏区仍可采用固定深色配色。

实际检查可以先固定一个页面状态,再切主题,避免不同题目或不同选中态干扰比较。然后补禁用、选中、错误和完成状态,最后检查自定义背景最亮与最暗区域。

本轮没有重新切换全部页面主题,也没有为所有图片背景计算最差比值。当前文章给出源码分析与历史方法,不把少数配色检查扩展成全应用对比度合规结论。

把颜色集中只是起点。让每个状态在真实背景上可读,才能同时服务桌面窗口、手机触摸和文章演示。下一篇继续检查状态保存,避免漂亮页面重启后丢失成绩。

源码入口:EntryAbility.ets 的主题同步,Index.ets 的 textPrimary、textMuted、selectedControlBg 与 selectedControlText。参考HarmonyOS官方文档。

相关推荐
OH_TPC1 小时前
HarmonyOS APP开发---"动效君"UI动效素材库App,需要用到这个库
harmonyos
行者-全栈开发2 小时前
【鸿蒙心迹】三方库移植(一)——NAPI 把 C/C++ 库桥接到 ArkTS 的完整链路(HarmonyOS 7.x)
harmonyos·arkts·交叉编译·c/c++·napi·三方库移植
2601_949480062 小时前
开源鸿蒙平台 CMP 三方库「reveal」适配全流程
华为·开源·harmonyos
2401_zq136y032 小时前
开源鸿蒙平台 CMP 三方库「KToast」适配全流程
华为·开源·harmonyos
AI2中文网3 小时前
App Inventor 2 构建纯血鸿蒙 HarmonyOS NEXT App:证书、签名、真机安装到上架全流程
华为·harmonyos
贾伟康3 小时前
【共创稿事节】@State与@Prop的单向流
harmonyos·arkts·状态管理·state·prop
大雷神3 小时前
HarmonyOS7应用《拼棋派对》实战:模拟器回归验证与签名打包
harmonyos·arkui·harmonyos 7.0·玩转 arkts
贾伟康4 小时前
【共创稿事节】@Link双向绑定的适用边界
性能优化·实战·harmonyos·arkts·arkui
熊猫钓鱼>_>4 小时前
上架审核常见驳回与隐私合规清单:过审前先自查这 8 条【鸿蒙心迹】
开发语言·前端·华为·华为云·harmonyos·openharmony·ai制作