文章目录
-
-
- 页面里为什么少写硬编码
- string.json 管文案
- 多语言也更方便
- float.json 管尺寸
- CommonConstants 管代码常量
- 资源文件和常量类怎么取舍
- 常见坑提醒
- 写在最后
-
组件封装不是只拆 .ets 文件。
如果文案、尺寸、颜色、间距还是到处硬编码，项目照样会难维护。这个示例虽然小，但已经用了资源文件和常量类，值得顺手学掉。
源码地址：ComponentEncapsulation
页面里为什么少写硬编码
你会在项目里看到很多 $r(…)：
Button($r('app.string.factory'))
.width(CommonConstants.ONE_HUNDRED_PERCENT)
Column({ space: CommonConstants.BUTTON_SPACING }) {
// 按钮列表
}
这说明页面不直接写大量字符串和数字，而是通过资源和常量引用。
这样做的好处很明显：后面要改文案、改间距，不用到每个页面翻。
string.json 管文案
resources/base/element/string.json 里维护默认文案：
{
"string": [
{
"name": "factory",
"value": "Component factory class encapsulation"
},
{
"name": "dialog",
"value": "Popup component encapsulation"
},
{
"name": "common_style_extract",
"value": "Common style encapsulation"
}
]
}
页面里用：
Button($r('app.string.factory'))
这比直接写 Button('Component factory class encapsulation') 更好维护。
多语言也更方便
项目里还有 zh_CN/element/string.json 和 en_US/element/string.json。
这意味着同一个 $r('app.string.factory')，可以在不同语言环境下显示不同文案。
如果你把文案写死在页面里，后面做国际化会很痛苦。
float.json 管尺寸
尺寸资源在 float.json：
{
"float": [
{
"name": "padding",
"value": "16vp"
},
{
"name": "border_radius",
"value": "24vp"
},
{
"name": "dialog_width",
"value": "328vp"
}
]
}
弹窗里这样用：
.width($r('app.float.dialog_width'))
.padding($r('app.float.padding_l'))
.borderRadius($r('app.float.border_radius'))
把这些值收进资源文件后，设计规范变化时就不容易漏改。
CommonConstants 管代码常量
项目还有一个常量类：
export class CommonConstants {
static readonly ONE_HUNDRED_PERCENT: string = '100%';
static readonly BUTTON_WIDTH: string = '42%';
static readonly BUTTON_SPACING: number = 12;
static readonly ROW_SPACING: number = 16;
}
像 100%、按钮间距、行间距这种代码里经常用的值，放常量类很合适。
使用时：
Column({ space: CommonConstants.BUTTON_SPACING }) {
Button($r('app.string.common'))
.width(CommonConstants.ONE_HUNDRED_PERCENT)
}
一眼就能看出含义，比到处写 12 和 '100%' 更清楚。
资源文件和常量类怎么取舍
我的习惯是这样：
- 文案放 string.json
- 颜色、圆角、间距这类设计资源放资源文件
- 多处使用的代码常量放 CommonConstants
- 只在一个页面出现一次的临时值，可以直接写
不要为了“看起来规范”把所有数字都抽走。抽象过度也会降低可读性。
常见坑提醒
资源名要有语义。padding_l 比 num1 好太多。
同类资源尽量统一单位。比如尺寸统一用 vp，字号统一用 fp。
常量类不要变成垃圾桶。只放确实复用的值，不要把所有页面私有值都塞进去。
写在最后
组件封装、资源管理、常量管理其实是一套东西。
组件让结构复用，资源让文案和样式可维护，常量让代码少魔法数字。三者一起用，项目才会真正变干净。
