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

暗雨OL
发布于 2025-6-27 21:04
浏览
0收藏

规范引用鸿蒙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 中建立主题-资源映射关系。
​​总结:​​ 规范引用资源能显著提升鸿蒙应用的开发效率与可维护性。通过中央化的资源管理、命名约定与动态引用机制,开发者可轻松实现主题切换、国际化适配与多设备兼容,为应用打下坚实的技术基础。

分类
标签
收藏
回复
举报
回复
    相关推荐