前言

在 App 里展示文章内容、公告通知、帮助文档，经常需要用到富文本——标题要大、正文要小、链接要蓝色、列表要有圆点。如果全靠 ArkUI 的 Text 组件一个一个拼样式，代码量爆炸。

RichText 组件提供了一条捷径——直接传入 HTML 字符串，框架自动解析渲染。支持标题、段落、列表、加粗等常见 HTML 标签。这篇文章就来玩玩这个组件。

效果展示

用 RichText 可以渲染这样的内容：

• 带颜色的标题
• 有样式的正文段落
• 有序/无序列表
• 加粗、斜体等内联样式

通过切换按钮，可以在三段不同的 HTML 内容之间切换预览。

实现原理

RichText 的工作原理是：接收一个 HTML 字符串 → 内部解析 DOM 结构 → 映射到 ArkUI 的组件树 → 渲染到界面。

支持的 HTML 标签包括：div、p、h1~h6、ul、ol、li、b、strong、i、em、span、a、img 等常见标签。

注意：RichText 对 CSS 的支持是有限的，主要支持内联 style，不支持外部 CSS 和 class 选择器。

代码详解

HTML 内容准备

准备三段不同的 HTML 内容，存储在数组中：

private htmlContents: string[] = [
  '<div style="padding:8px">' +
  '<h2 style="color:#4D96FF">欢迎使用 ArkUI</h2>' +
  '<p style="font-size:14px;color:#666">ArkUI 是一套构建分布式应用的声明式 UI 开发框架。' +
  '它使用极简的 UI 信息语法、丰富的 UI 组件以及实时界面预览工具，帮助您提升应用开发效率。</p>' +
  '</div>',

  '<div style="padding:8px">' +
  '<h3 style="color:#FF6B6B">功能特性</h3>' +
  '<ul style="font-size:13px;color:#555">' +
  '<li>声明式 UI 语法</li>' +
  '<li>丰富的组件库</li>' +
  '<li>响应式状态管理</li>' +
  '<li>多设备适配</li>' +
  '</ul></div>',

  '<div style="padding:8px">' +
  '<h4 style="color:#6BCB77">版本信息</h4>' +
  '<p style="font-size:12px;color:#888">当前版本: <b>HarmonyOS NEXT</b></p>' +
  '<p style="font-size:12px;color:#888">发布日期: 2025年</p>' +
  '</div>'
]

HTML 中的内联样式（style="...")在 RichText 中是生效的。可以设置颜色、字号、边距等基础样式。

RichText 组件使用

RichText(this.htmlContents[this.selectedHtml])
  .width('100%').height('auto')

就这么简单——传入 HTML 字符串，设置宽高，框架自动渲染。

完整页面代码

@Entry
@Component
struct RichTextPage {
  @State selectedHtml: number = 0
  private htmlContents: string[] = [
    '<div style="padding:8px"><h2 style="color:#4D96FF">欢迎使用 ArkUI</h2><p style="font-size:14px;color:#666">ArkUI 是一套构建分布式应用的声明式 UI 开发框架。它使用极简的 UI 信息语法、丰富的 UI 组件以及实时界面预览工具，帮助您提升应用开发效率。</p></div>',
    '<div style="padding:8px"><h3 style="color:#FF6B6B">功能特性</h3><ul style="font-size:13px;color:#555"><li>声明式 UI 语法</li><li>丰富的组件库</li><li>响应式状态管理</li><li>多设备适配</li></ul></div>',
    '<div style="padding:8px"><h4 style="color:#6BCB77">版本信息</h4><p style="font-size:12px;color:#888">当前版本: <b>HarmonyOS NEXT</b></p><p style="font-size:12px;color:#888">发布日期: 2025年</p></div>'
  ]

  build() {
    Column() {
      Scroll() {
        Column() {
          Text('RichText 富文本')
            .fontSize(18).fontWeight(FontWeight.Bold).margin({ bottom: 8 })

          Column() {
            Text('HTML 富文本渲染')
              .fontSize(14).fontWeight(FontWeight.Medium).margin({ bottom: 8 })

            Row({ space: 6 }) {
              Button('介绍').onClick(() => { this.selectedHtml = 0 })
              Button('特性').onClick(() => { this.selectedHtml = 1 })
              Button('版本').onClick(() => { this.selectedHtml = 2 })
            }
            .width('100%').justifyContent(FlexAlign.SpaceEvenly)
            .margin({ bottom: 12 })

            Column() {
              RichText(this.htmlContents[this.selectedHtml])
                .width('100%').height('auto')
            }
            .width('100%').backgroundColor('#F8F9FA').borderRadius(8).padding(8)
          }
          .width('100%').backgroundColor('#FFFFFF').borderRadius(12).padding(16)

          Column() {
            Text('RichText 说明')
              .fontSize(14).fontWeight(FontWeight.Medium).margin({ bottom: 4 })
            Text('RichText 组件支持 HTML 格式文本的渲染，可以显示包含标题、段落、列表、加粗等样式的富文本内容。适合展示文章、公告、帮助文档等场景。')
              .fontSize(12).fontColor('#666666')
          }
          .width('100%').backgroundColor('#FFFFFF').borderRadius(12)
          .padding(16).margin({ top: 10 })
        }
        .width('100%')
      }
      .layoutWeight(1)
    }
    .width('100%').height('100%').backgroundColor('#F5F6FA').padding(16)
  }
}

性能考量

RichText 渲染 HTML 是有性能开销的——框架需要解析 HTML 字符串、构建内部 DOM 树、再映射到 ArkUI 组件。对于简单的富文本（几段文字加几个标签），性能完全没问题。但如果 HTML 内容非常复杂（大量嵌套、几百个节点），可能需要注意：

• 避免在列表项中使用 RichText（比如 ForEach 里每一条都用 RichText），列表项多了会很卡
• 如果内容是固定的，考虑用 ArkUI 原生组件手动构建，性能更好
• 对于长文章内容，分段渲染比一次性加载整篇更好

扩展玩法

动态拼接 HTML

根据数据动态生成 HTML 字符串：

buildProductHtml(product: Product): string {
  return `<div style="padding:8px">
    <h3 style="color:#333">${product.name}</h3>
    <p style="font-size:14px;color:#FF6B6B">¥${product.price}</p>
    <p style="font-size:12px;color:#888">${product.description}</p>
  </div>`
}

从后端获取 HTML

很多 CMS 系统返回的就是 HTML 字符串，直接用 RichText 渲染，省去了自己解析的麻烦：

@State articleHtml: string = ''

aboutToAppear(): void {
  // 从接口获取 HTML 内容
  fetch('/api/article/123').then(res => {
    this.articleHtml = res.body.html
  })
}

build() {
  RichText(this.articleHtml)
}

写在最后

RichText 是 ArkUI 里一个非常实用的组件。在需要展示 HTML 富文本内容的场景下（文章、公告、帮助文档、用户协议），它提供了最便捷的方案。虽然 CSS 支持有限，但对于常见的富文本排版已经够用了。