规范引用鸿蒙5资源：颜色、字体与图标

规范引用鸿蒙5资源：颜色、字体与图标
在鸿蒙应用开发中，对颜色、字体、图标等资源的规范性引用对代码可维护性、多主题适配与屏幕兼容性至关重要。以下为规范性引用指南与具体实践：

​​1. 颜色资源 (color)​​
​​定义：​​
在 /resources/base/element/color.json 中统一定义颜色值：

{
“color”: [
{
“name”: “primary_color”,
“value”: “#1A9EFF”
},
{
“name”: “text_primary”,
“value”: “#333333”
},
{
“name”: “background”,
“value”: “#FFFFFF”
}
]
}
​​引用：​​

// ArkTS 代码
Text(‘Hello HarmonyOS’)
.fontColor($r(‘app.color.text_primary’)) // 文本颜色
.backgroundColor($r(‘app.color.background’)) // 背景颜色
<!-- XML 布局 -->
<Text
ohos:text=“Hello HarmonyOS”
ohos:background_element=“$color:background”
ohos:text_color=“$color:text_primary”/>
​​2. 字体资源 (font)​​
​​定义：​​
将字体文件（如 .ttf/.otf）放入 /resources/base/element/font 目录，并在 element/font.json 中声明：

{
“font”: [
{
“name”: “harmony_sans_bold”,
“src”: “HarmonySans_Bold.ttf”
}
]
}
​​引用：​​

// 全局主题设置 (theme.json)
{
“attributes”: [
{
“name”: “font_family”,
“value”: “harmony_sans_bold”
}
]
}

// ArkTS 组件引用
Text(‘Harmony Sans’)
.fontFamily($r(‘app.font.harmony_sans_bold’))
.fontSize(16)
<!-- XML 中引用 -->
<Text
ohos:font_family=“$font:harmony_sans_bold”
ohos:text_size=“16fp”/>
​​3. 图标资源 (icon)​​
​​定义：​​
将 SVG/PNG 图标放入 /resources/base/media 目录。​​关键要求​​：

​​SVG 图标​​：需移除内部 fill 属性，使用 currentColor 填充：
<svg …>
<path fill=“currentColor” … />
</svg>
​​引用：​​

// ArkTS 组件
Image($r(‘app.media.ic_settings’)) // 直接引用
.width(24)
.height(24)
.fillColor($r(‘app.color.primary_color’)) // SVG 动态着色
<!-- XML 中引用 -->
<Image
ohos:image_src=“$media:ic_settings”
ohos:tint=“$color:primary_color”
ohos:width=“24vp”
ohos:height=“24vp”/>
​​资源命名规范建议​​
资源类型 前缀 示例 说明
颜色 color_ color_primary 避免使用具体色值命名
字体 font_ font_sans_bold 清晰描述字重与风格
图标 ic_ ic_settings 功能描述代替尺寸命名
图片 img_ img_login_bg 区分图标与场景图
​​关键注意事项​​
​​禁止硬编码​​：禁止在代码中直接写 #000、“Arial” 或 “icon.png”。
​​图标着色​​：SVG 必须配置 fill=“currentColor” 以支持动态换色。
​​尺寸单位​​：使用 vp 确保多屏适配，图标尺寸推荐 24vp 基础单元。
​​主题兼容​​：在 /resources/base/theme.json 中建立主题-资源映射关系。
​​总结：​​ 规范引用资源能显著提升鸿蒙应用的开发效率与可维护性。通过中央化的资源管理、命名约定与动态引用机制，开发者可轻松实现主题切换、国际化适配与多设备兼容，为应用打下坚实的技术基础。