第十节HarmonyOS 使用资源引用类型

Resource是资源引用类型,用于设置组件属性的值。推荐大家优先使用Resource类型,将资源文件(字符串、图片、音频等)统一存放于resources目录下,便于开发者统一维护。同时系统可以根据当前配置加载合适的资源,例如,开发者可以根据屏幕尺寸呈现不同的布局效果,或根据语言设置提供不同的字符串。

例如下面的这段代码,直接在代码中写入了字符串和数字这样的硬编码。

复制代码
Button('登录', { type: ButtonType.Capsule, stateEffect: true })
  .width(300)
  .height(40)
  .fontSize(16)
  .fontWeight(FontWeight.Medium)
  .backgroundColor('#007DFF')

我们可以将这些硬编码写到entry/src/main/resources下的资源文件中。

在string.json中定义Button显示的文本。

复制代码
{
  "string": [
    {
      "name": "login_text",
      "value": "登录"
    }
  ]
} 

在float.json中定义Button的宽高和字体大小。

复制代码
{
  "float": [
    {
      "name": "button_width",
      "value": "300vp"
    },
    {
      "name": "button_height",
      "value": "40vp"
    },
    {
      "name": "login_fontSize",
      "value": "18fp"
    }
  ]
}

在color.json中定义Button的背景颜色。

复制代码
{
  "color": [
    {
      "name": "button_color",
      "value": "#1890ff"
    }
  ]
}

然后在Button组件通过"$r('app.type.name')"的形式引用应用资源。app代表应用内resources目录中定义的资源;type代表资源类型(或资源的存放位置),可以取"color"、"float"、"string"、"plural"、"media";name代表资源命名,由开发者定义资源时确定。

复制代码
Button($r('app.string.login_text'), { type: ButtonType.Capsule })
  .width($r('app.float.button_width'))
  .height($r('app.float.button_height'))
  .fontSize($r('app.float.login_fontSize'))
  .backgroundColor($r('app.color.button_color'))
相关推荐
Archilect15 分钟前
HarmonyOS ArkTS 倒计时组件实战:性能优化篇 - 从100ms刷新到流畅体验
harmonyos
Archilect21 分钟前
HarmonyOS ArkTS 倒计时组件实战:高级特性篇 - 时间区间样式切换的动态配置系统
harmonyos
梧桐ty41 分钟前
鸿蒙+Flutter混合工程化:构建、依赖管理与持续集成实战
flutter·华为·harmonyos
少一倍的优雅4 小时前
hi3863(WS63) 智能小车 (一) 简单介绍
单片机·嵌入式硬件·harmonyos·hi3863
卡奥斯开源社区官方4 小时前
鸿蒙智行 L3 内测启幕:从技术架构到商用落地的全链路技术拆
华为·架构·harmonyos
搬砖的kk5 小时前
Flutter UUID 鸿蒙平台适配实践 - 全版本测试与验证
flutter·华为·harmonyos
梧桐ty6 小时前
硬件交互联动:基于鸿蒙的Flutter物联网应用开发实战
flutter·华为·harmonyos
鸿蒙小白龙6 小时前
鸿蒙UniProton操作系统编译开发指导
harmonyos·鸿蒙系统·openharmony·uniproton
萌虎不虎6 小时前
【鸿蒙根据图片路径读取图片的base64数据】
华为·harmonyos
梧桐ty8 小时前
鸿蒙生态下的跨平台框架选型指南:Flutter vs React Native vs uni-app
flutter·华为·harmonyos