一、设计目标本应用是 HarmonyOS官方资源方案的演示器——前 11 个应用都用运行时文案表STRINGS Map做多语言而本应用展示另一条正统路线资源限定符目录 $r() 引用。UI 设计要回答三个问题资源目录结构怎么展示才不枯燥base/zh_CN/en_US/ja_JP/ko_KR 的树形关系是这套方案的心脏用户必须先看懂它静态引用与动态读取的区别怎么可视化$r(app.string.xxx)跟随系统语言自动匹配零代码resourceManager.getStringSync按参数显式取——两种方式的差异要在 UI 上看得见语言匹配规则怎么演示选择某个语言时资源表给出匹配结果选择未覆盖语言时展示 base 兜底——降级路径本身就是教学内容。因此本页 UI 的核心原则是把资源匹配变成一个可交互的实验台——用户拨动语言开关看资源如何被选中、如何兜底而不是只看静态文档。二、页面信息架构组件树ResourceQualifierPageEntry 根组件 └─ Scroll整页滚动背景 #F8FAFC └─ Column宽 100% ├─ Row标题栏多语言资源 副标题 ️ 图标 ├─ Flex界面语言徽章组简中/繁中/EN/日/韩选中靛蓝高亮 ├─ Text Column资源目录结构卡树形文本monospace 靛蓝浅靛底 #EEF2FF │ └─ resources/ ├─ base ← 默认 ├─ zh_CN ├─ en_US ├─ ja_JP └─ ko_KR ├─ Text Column$r() 静态引用卡白色 │ └─ 5 行key左灰宽 110 当前语言资源值右 ├─ Text Column语言匹配模拟器卡浅靛底 │ ├─ Flex 徽章zh_CN / en_US / ja_JP / ko_KR / base │ └─ 匹配结果5 行 key 值加粗靛蓝 └─ Text底部提示真实设备 $r() 自动切换本页用动态读取模拟与前面应用的区别本页没有独立的内容区四个区块全部围绕资源如何被取用展开——这是教学型演示 App 的典型结构概念目录→ 机制静态→ 实验模拟器→ 结论提示。三、色彩与字号规范本页主题色为靛蓝色系Indigo——开发工具/官方文档的气质与 09 橙、10 紫、11 深蓝区分元素色值字号字重页面标题#1F293722Bold副标题#9CA3AF12Normal区块标题#1F293714Bold目录树文本#4F46E511Normalmonospace资源 key#6B7280 / #9CA3AF12Normal资源值静态卡#1F293713Normal资源值模拟器#4F46E514Bold选中徽章文字 #FFFFFF / 底 #4F46E511Normal未选中徽章文字 #374151 / 底 #E5E7EB11Normal浅靛卡片背景#EEF2FF——色彩语义延续系列靛蓝 选中/强调、灰 未选中。两个紫色系10 紫 #9333EA 与 12 靛蓝 #4F46E5色相相邻但一暖一冷同屏不混淆跨应用一眼可辨。四、资源目录结构卡把文件系统画成 UIColumn({space:2}){ForEach(DIR_TREE,(line:string,idx:number){Text(line).fontSize(11).fontColor(#4F46E5).width(100%).fontFamily(monospace)},(line:string,idx:number)${idx}-${line})}.width(94%).padding(14).backgroundColor(#EEF2FF).borderRadius(14).margin({top:8})展示内容resources/ ├─ base/element/string.json ← 默认所有语言兜底 ├─ zh_CN/element/string.json ← 简体中文 ├─ en_US/element/string.json ← 美式英语 ├─ ja_JP/element/string.json ← 日语 └─ ko_KR/element/string.json ← 韩语设计要点monospace 等宽字体 树形字符├─/└─是 ASCII 艺术等宽字体保证对齐一眼看出目录层级base 加← 默认注释直接点破base 是兜底这个最容易被误解的概念靛蓝文字 on 浅靛底整卡像一张代码截图与普通内容卡片形成视觉类型区分——用户一看就知道这里是结构说明真实工程对应entry/src/main/resources/下就是这样的目录本卡是它的抽象镜像。五、$r() 静态引用卡自动匹配的演示ForEach(RES_TABLE,(e:ResEntry){Row(){Text(e.key).fontSize(12).fontColor(#6B7280).width(110)Text(this.resFor(this.currentLocale,e.key)).fontSize(13).fontColor(#1F2937).layoutWeight(1)}.width(100%)},(e:ResEntry)e.key)左侧固定宽 110 显示资源 keyapp_name/greeting/btn_ok/btn_cancel/status_loading右侧显示当前界面语言下的资源值key 与值分离模拟的是$r(app.string.app_name)的语义——代码里写 key运行时系统按语言解析切换界面语言整卡 5 行值即时变化——演示$r() 在真实设备上随系统语言自动切换的效果静态卡用普通字重区别于模拟器的加粗因为它是系统自动行为的展示不是用户可控实验。六、语言匹配模拟器用户可控的实验台这是本页交互核心——用户可以指定系统语言并观察匹配结果Flex({wrap:FlexWrap.Wrap,justifyContent:FlexAlign.Start}){ForEach([zh_CN,en_US,ja_JP,ko_KR,base]asstring[],(code:string){Text(this.langLabel(code)).fontSize(11).padding({left:8,right:8,top:5,bottom:5}).borderRadius(12).backgroundColor(this.simLangcode?#4F46E5:#E5E7EB).fontColor(this.simLangcode?Color.White:#374151).onClick((){this.simLangcode;})},(code:string)code)}.width(100%).margin({top:6})Text(${this.T(K.matchResult)}:).fontSize(12).fontColor(#6B7280).width(100%).margin({top:10})ForEach(RES_TABLE,(e:ResEntry){Row(){Text(${e.key}).fontSize(12).fontColor(#9CA3AF).width(110)Text(this.resFor(this.simLang,e.key)).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#4F46E5).layoutWeight(1)}.width(100%).margin({top:4})},(e:ResEntry)sim-${e.key})设计决策5 个徽章含 base把兜底目录做成一个可选项——用户选base时看到所有 key 回退到默认值兜底机制变成主动实验而不是被动意外模拟语言与界面语言独立simLang是独立状态界面语言切英文、模拟器仍可模拟日文系统——两个开关互相不污染教学场景下能同时演示系统语言 zh_CN 界面语言 en_US的组合匹配结果行 key 值app_name 资源演示用等号连接加粗靛蓝——结果区永远是全卡视觉终点ForEach key 加sim-前缀与静态卡的 key 区分两个 ForEach 渲染同一 RES_TABLE 也不冲突。七、底部提示把模拟与真实的边界讲清楚Text(this.T(K.hint)).fontSize(11).fontColor(#9CA3AF).width(90%).margin({top:12,bottom:16}).textAlign(TextAlign.Center)提示文案“真实设备上 $r() 会随系统语言自动切换本页用动态读取模拟效果。”——教学型 App 的诚实条款模拟器不会真去改系统语言它只是复现了资源匹配的算法。这个提示防止用户误以为改模拟器改了系统是演示工具应有的严谨。八、排版验证清单多语言下自查检查项方法验证结果树形对齐monospace 等宽字体├─└─ 字符不歪key 列对齐固定宽 1105 行 key 左缘一致静态卡随界面语言resFor(currentLocale, key)切英文整卡变英文模拟器独立于界面语言simLang独立状态界面中文 模拟日文互不干扰base 兜底resFor(base, key)所有 key 回退默认值长文案不溢出值layoutWeight(1)日文こんにちは、おかえりなさい完整显示窄屏不溢出徽章 FlexWrap5 个语言徽章自动折行九、可访问性多语言 UI 加分项模拟器选中态三重编码靛蓝底 白字 徽章文案本身语言码不单靠颜色对比度正文 #1F2937 ≈ 15:1、靛蓝 #4F46E5 on 白 ≈ 6.3:1、浅靛底 #EEF2FF 上靛蓝文字 ≈ 5.5:1均满足 WCAG AA树形文本可朗读├─ base/element/string.json ← 默认的完整路径文本朗读器按行读出不依赖图形key 列固定宽度屏幕朗读器按行读取时结构稳定不会因换行错乱提示文字居中且字号 11作为脚注存在不干扰主内容层级。十、小结本页 UI 把资源限定符从文档概念变成了可操作实验目录树卡建立心智模型、静态引用卡演示自动行为、模拟器卡提供可控实验、底部提示划清模拟边界。四个区块层层递进用户 30 秒内理解base 兜底 语言限定符匹配的完整机制。这套概念 → 演示 → 实验 → 结论的四段式布局是任何教学型演示 App 的通用模板也为第 14 应用系统语言跟随的策略 模拟器结构埋下了伏笔。下一篇文章深入技术实现讲解 $r() 与 resourceManager 两种取资源的完整链路与匹配优先级算法。