ArkUI 富文本显示：别把所有富文本都写成编辑器

今天我们先不急着写编辑器。富文本只是“带样式的内容”，展示和编辑是两件事。

这个 Demo 放了四种选择：Text + Span、StyledString、RichText(HTML) 和 RichEditor。我们先把边界看清楚，后面写代码会少走很多弯路。

少量样式：Text + Span

如果只是几个重点词、一个标签、一枚小符号，用 Text + Span 最省心：

Text() {
  Span('适合少量局部样式：')
  Span('重点词、标签、小图标。')
}

这种写法直观，也最容易维护。别为了“富文本”三个字，一上来就把页面写成编辑器。

内容要带样式流转：StyledString

如果内容和样式要作为一个对象传递，比如编辑器生成一段内容，另一个地方只负责展示，StyledString 会更合适。

这篇 Demo 只做选型说明，具体写法放在上一篇 StyledString 里。

服务端给 HTML：RichText

如果服务端已经给了 HTML，RichText 可以直接展示：

RichText(this.htmlContent)
  .width('100%')
  .height(150)

这一步很简单，但也要记住它的边界：RichText 适合展示 HTML，不适合让用户在里面编辑内容。

真要编辑：RichEditor

用户需要输入、选择、复制、粘贴、编辑图文内容时，再考虑 RichEditor。它能力更强，复杂度也更高。

你现在项目里的“富文本”是哪一种？只是展示几段加粗文案，还是用户真的要编辑图文？这个问题先答清楚，组件基本就选对了一半。

完整代码

@Entry
@Component
struct ArkUIRichTextDisplayDemo {
  private htmlContent: string = '<h3 style="color:#0f172a">一段来自服务端的 HTML</h3><p>如果内容已经是 HTML，<strong>RichText</strong> 会比手写一堆 Span 更省事。</p><p style="color:#2563eb">它适合展示，不适合编辑。</p>';

  @Builder
  sectionTitle(title: string) {
    Text(title)
      .width('100%')
      .fontSize(15)
      .fontWeight(700)
      .fontColor('#334155')
  }

  build() {
    Scroll() {
      Column({ space: 18 }) {
        Text('ArkUI 富文本显示')
          .width('100%')
          .fontSize(24)
          .fontWeight(700)
          .fontColor('#0F172A')

        Text('别把所有富文本都写成编辑器')
          .width('100%')
          .fontSize(22)
          .fontWeight(700)
          .fontColor('#111827')

        Text('富文本展示有好几条路。先选对组件，再写代码，页面会轻很多。')
          .width('100%')
          .fontSize(14)
          .fontColor('#64748B')
          .lineHeight(22)

        Column({ space: 12 }) {
          this.sectionTitle('Text + Span')

          Text() {
            Span('适合少量局部样式：')
              .fontSize(15)
              .fontColor('#334155')
            Span('重点词、标签、小图标。')
              .fontSize(15)
              .fontWeight(700)
              .fontColor('#2563EB')
          }
          .width('100%')
          .lineHeight(24)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F8FAFC')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('StyledString')

          Text('适合把内容和样式作为一个数据对象管理，后续还能迁移给支持 StyledString 的组件。')
            .width('100%')
            .fontSize(15)
            .fontColor('#334155')
            .lineHeight(24)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#EFF6FF')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('RichText 显示 HTML')

          RichText(this.htmlContent)
            .width('100%')
            .height(150)

          Text('RichText 适合大量 HTML 内容展示，但不是编辑器。')
            .width('100%')
            .fontSize(13)
            .fontColor('#64748B')
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F0FDFA')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('RichEditor')

          Text('RichEditor 适合用户真的要输入、选择、复制、粘贴和编辑图文内容时再上。')
            .width('100%')
            .fontSize(15)
            .fontColor('#475569')
            .lineHeight(24)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#FFF7ED')
        .borderRadius(8)
      }
      .width('100%')
      .padding(20)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}