引言

一、技术背景

1.1 鸿蒙UI开发的核心框架

• 组件化：所有UI元素（如文本、按钮、图片）均为组件（如 Text、Button），通过组合与属性配置构建界面。
• 数据驱动：通过状态变量（如 @State）管理动态数据，UI自动响应数据变化（无需手动刷新）。
• 资源管理：将文本、图片等静态资源（如多语言文案）与代码分离，通过引用（如 $string）实现动态加载与国际化支持。

1.2 文本展示与资源引用的关键需求

• 基础文本展示：静态文本（如应用名称）或动态文本（如用户昵称）的渲染。
• 资源引用：将文本文案（如“确定”按钮文字）抽取到资源文件（如 string.json），便于统一管理与多语言适配。
• 动态绑定：将文本与动态数据（如后端返回的状态信息）绑定，实现实时更新（如“加载中...”→“加载完成”）。

二、应用使用场景

三、不同场景下的代码实现

3.1 场景1：基础静态文本展示（$string资源引用）

需求描述

代码实现（ArkTS，声明式UI）

步骤1：定义文本资源（string.json）

{
  "string": [
    {
      "name": "app_title", // 资源唯一标识符
      "value": "欢迎使用鸿蒙App" // 实际展示的文本内容
    }
  ]
}

步骤2：在页面中引用资源并展示文本

// Index.ets（首页逻辑）
@Entry
@Component
struct Index {
  build() {
    Column() {
      // 通过 $string 引用资源文件中的 app_title
      Text($r('app.string.app_title')) // $r 是资源引用快捷方式（等价于 $string）
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 50, bottom: 20 })

      // 补充：直接硬编码对比（不推荐）
      Text('这是硬编码文本（不推荐）')
        .fontSize(16)
        .margin({ top: 10 })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

关键点解释

• 资源引用语法：$r('app.string.app_title')是鸿蒙提供的资源引用快捷方式（app表示当前模块，string表示资源类型，app_title是 string.json中定义的 name字段）。
• 硬编码对比：直接写死文本（如 '欢迎使用鸿蒙App'）会导致多语言适配困难（需修改代码），而资源引用支持统一修改与国际化。
• 样式控制：通过 fontSize、fontWeight等属性调整文本的显示效果（如字号、加粗）。

3.2 场景2：动态文本绑定（@State + 动态插值）

需求描述

代码实现（ArkTS）

// LoginPage.ets（登录页面逻辑）
@Entry
@Component
struct LoginPage {
  @State username: string = ''; // 动态状态变量（用户输入的用户名）

  build() {
    Column() {
      // 标题（静态资源引用）
      Text($r('app.string.login_title'))
        .fontSize(20)
        .margin({ bottom: 30 })

      // 用户名输入框
      TextInput({ placeholder: '请输入用户名' })
        .onChange((value: string) => {
          this.username = value; // 更新 @State 变量
        })
        .margin({ bottom: 20 })

      // 动态文本：绑定用户名（实时更新）
      if (this.username) {
        Text(`欢迎，${this.username}！`) // 动态插值（模板字符串）
          .fontSize(18)
          .fontColor(Color.Blue)
      } else {
        Text('请先输入用户名') // 默认提示
          .fontSize(16)
          .fontColor(Color.Gray)
      }
    }
    .width('90%')
    .padding(20)
    .alignItems(HorizontalAlign.Start)
  }
}

关键点解释

• @State 变量：@State username: string标记该变量为响应式状态，当其值变化时，绑定的UI（如 Text组件）会自动重新渲染。
• 动态插值：通过模板字符串（`欢迎，${this.username}！`）将状态变量嵌入文本内容，实现动态更新。
• 条件渲染：使用 if (this.username)控制是否显示欢迎文案（避免未输入时显示空内容）。

3.3 场景3：多语言适配（多份 string.json 资源文件）

需求描述

资源文件配置

• 中文资源（resources/base/element/string.json）：

  {
    "string": [
      { "name": "welcome_text", "value": "欢迎使用鸿蒙App" }
    ]
  }

• 英文资源（resources/en/element/string.json）：

  {
    "string": [
      { "name": "welcome_text", "value": "Welcome to HarmonyOS App" }
    ]
  }

代码实现（自动适配语言）

// MultiLangPage.ets
@Entry
@Component
struct MultiLangPage {
  build() {
    Column() {
      // 引用 welcome_text 资源（根据设备语言自动加载对应文案）
      Text($r('app.string.welcome_text'))
        .fontSize(22)
        .margin({ top: 50 })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

关键点解释

• 多语言资源目录：鸿蒙会根据设备的系统语言自动选择对应的资源文件（如中文设备加载 values-zh，英文设备加载 values-en）。
• 无需代码修改：开发者只需在对应的 string.json中定义不同语言的文案，运行时系统自动匹配，实现真正的国际化。

四、原理解释与核心特性

4.1 文本资源引用与动态绑定的工作流程

sequenceDiagram
    participant Developer as 开发者（代码/资源文件）
    participant Framework as ArkUI框架
    participant ResourceManager as 资源管理器
    participant Renderer as 渲染引擎

    Developer->>ResourceManager: 定义 string.json（如 "app_title": "欢迎"）
    Developer->>Framework: 使用 $r('app.string.app_title') 引用资源
    Developer->>Framework: 绑定 @State 变量到 Text 组件（如 Text(`欢迎，${username}`)）

    Framework->>ResourceManager: 运行时根据设备语言加载对应 string.json
    ResourceManager-->>Framework: 返回文案内容（如 "欢迎使用鸿蒙App"）
    Framework->>Renderer: 将文案与样式传递给渲染引擎
    Renderer-->>UI: 显示最终文本（支持动态更新）

    loop 动态数据变化（如 username 更新）
        Developer->>Framework: 修改 @State 变量（username = "张三"）
        Framework->>Renderer: 触发 Text 组件重新渲染
        Renderer-->>UI: 更新显示为 "欢迎，张三！"
    end

• 资源分离：文本文案（如 string.json）与代码逻辑分离，通过 $r或 $string引用，提升可维护性。
• 动态响应：@State变量标记动态数据，ArkUI 框架通过数据绑定机制自动监听变量变化，并触发关联UI组件的重新渲染。
• 多语言适配：资源管理器根据设备系统语言自动选择对应的 string.json文件，无需开发者手动切换文案。

4.2 核心特性

五、环境准备

5.1 开发工具与项目配置

• 鸿蒙开发工具：安装 DevEco Studio（OpenHarmony SDK 3.2+），创建新项目（选择“Empty Ability”模板）。
• 资源目录：在 resources/base/element/下创建 string.json（默认语言），在 resources/en/element/或 resources/zh/element/下创建对应语言的 string.json。
• 依赖配置：无需额外依赖，ArkUI 框架已内置文本资源管理与动态绑定支持。

5.2 测试步骤（以动态文本绑定为例）

测试1：静态资源引用验证

1. 步骤1：运行应用，检查首页标题是否显示为 string.json中定义的“欢迎使用鸿蒙App”（而非代码硬编码）。
2. 步骤2：修改 string.json中的 value为“Hello HarmonyOS”，重新运行应用，确认标题自动更新。
3. 验证点：资源引用是否生效？修改资源文件后是否无需改动代码即可更新文案？

测试2：动态绑定与多语言适配

1. 步骤1：在登录页面输入用户名（如“张三”），观察是否实时显示“欢迎，张三！”。
2. 步骤2：切换设备系统语言为英文（若配置了英文 string.json），检查首页标题是否自动显示为英文文案（如“Welcome to HarmonyOS App”）。
3. 验证点：动态数据变化时UI是否自动更新？多语言切换是否无缝生效？

六、疑难解答

6.1 常见问题

6.2 调试技巧

• 日志输出：通过 console.log($r('app.string.app_title'))打印资源引用的实际值（需在调试模式下查看）。
• 资源预览：在 DevEco Studio 的 “Resources”​ 面板中直接查看 string.json的内容，确认文案定义是否正确。
• 动态绑定检查：使用 “Live Preview”​ 功能实时预览输入框变化后的文本更新效果。

七、未来展望与技术趋势

1. 智能文案生成：结合AI工具（如大语言模型）自动生成多语言文案（如根据中文原文翻译为英文/日文），减少人工翻译成本。
2. 动态资源加载：支持运行时从服务器下载最新的 string.json文件（如热更新文案），无需重新发布应用。
3. 富文本扩展：在基础文本基础上，支持混合样式（如部分文字加粗、变色），通过 SpannableString类型实现更复杂的文案排版。
4. 无障碍适配：通过资源文件为文本添加无障碍标签（如屏幕阅读器的描述文案），提升残障用户的使用体验。

八、总结

• 资源引用（$string）​ 通过分离文案与代码，提升了多语言适配能力与维护效率；
• 动态绑定（@State + 模板字符串）​ 实现了文本的实时更新，增强了交互的灵活性；
• 声明式UI框架​ 通过简洁的语法（如 Text($r(...))）降低了开发门槛，使开发者能够快速构建高质量的文本展示功能。