一、功能简介

本篇将讲解如何在 HarmonyOS 中展示富文本内容，包括文字高亮、不同字体样式、超链接跳转，适用于文章阅读页、协议说明、通知展示等场景。

二、页面结构

entry/src/main/ets/pages/RichTextDemo.ets

三、代码演示

@Entry
@Component
struct RichTextDemo {
  build() {
    Column() {
      Text('《用户协议与隐私政策》')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 })

      Text('欢迎使用本产品！请阅读并遵守 ')
        .fontSize(18)
        .fontColor(Color.Black)

      // 富文本组合展示
      Row() {
        Text('《用户协议》')
          .fontColor(Color.Blue)
          .fontSize(18)
          .decoration({ type: TextDecorationType.Underline })
          .onClick(() => {
            router.pushUrl({ url: 'pages/UserProtocol' })  // 假设已注册页面
          })

        Text(' 和 ')
          .fontSize(18)

        Text('《隐私政策》')
          .fontColor(Color.Blue)
          .fontSize(18)
          .decoration({ type: TextDecorationType.Underline })
          .onClick(() => {
            router.pushUrl({ url: 'pages/PrivacyPolicy' })
          })
      }

      Text('以了解详细信息。')
        .fontSize(18)
        .margin({ top: 10 })

      // 模拟正文内容
      Text('我们将严格保护您的信息，除法律规定外，绝不将您的数据泄露给任何第三方。')
        .fontSize(16)
        .fontColor(Color.Gray)
        .margin({ top: 20 })
    }
    .width('100%')
    .padding(20)
  }
}

四、运行效果

页面展示如下：

《用户协议与隐私政策》

欢迎使用本产品！请阅读并遵守 《用户协议》 和 《隐私政策》 以了解详细信息。

我们将严格保护您的信息，除法律规定外，绝不将您的数据泄露给任何第三方。

• 蓝色下划线文字可点击跳转到协议详情页面；
• 不同段落有不同字体和颜色样式。

五、常见易错点与解决方法

六、拓展建议

• 可封装 <RichTextLink text="《协议》" target="pages/xxx" /> 组件；
• 可使用 Markdown 渲染器（后续章节介绍）支持更复杂富文本；
• 可为链接增加点击反馈/弹窗确认等 UX 强化操作。