鸿蒙开发中富文本（RichText/Span）的参数详解

本文同步发表于我的微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

以下是鸿蒙开发中富文本（RichText/Span）的全面详解，涵盖核心API、使用场景及代码示例：

一、富文本实现方式对比

组件	包名	特点
Span	@ohos.arkui.base	轻量级行内富文本，支持嵌套样式和事件（推荐基础使用）
RichText	@ohos.arkui.web	支持HTML标签解析，适合复杂富文本（需导入web模块）

二、Span核心用法详解

1. 基础样式组合

Text() {
  Span('红色粗体')
    .fontColor(Color.Red)
    .fontWeight(FontWeight.Bold)
  Span('+')
  Span('蓝色斜体')
    .fontColor(Color.Blue)
    .fontStyle(FontStyle.Italic)
}

 2. 事件绑定

Text() {
  Span('可点击文本')
    .onClick(() => {
      console.log('Span被点击')
    })
    .backgroundColor('#F0F0F0')
    .padding(5)
}

3. 嵌套样式

Text() {
  Span('嵌套')
    .fontSize(20)
    .textCase(TextCase.UpperCase)
  Span('样式')
    .decoration({
      type: TextDecorationType.Underline,
      color: Color.Green
    })
}

三、RichText高级功能

1. HTML标签解析

// 需导入web模块
import web_webview from '@ohos.web.webview'

RichText(`<b>加粗</b> <i>斜体</i>
<a href="https://example.com">超链接</a>
<font color="red">红色文本</font>`)
  .onStartIntercept((event: { url: string }) => {
    // 拦截链接点击
    console.log('点击链接:', event.url)
    return true // 阻止默认跳转
  })

2. 混合布局

Row() {
  RichText('<b>标题</b>')
  Image($r('app.media.icon'))
}

四、动态富文本生成

1. 数据驱动示例

@State items: Array<{text: string, color: Color}> = [
  {text: '动态', color: Color.Red},
  {text: '富文本', color: Color.Blue}
]

Text() {
  ForEach(this.items, item => {
    Span(item.text)
      .fontColor(item.color)
  })
}

2. 模板字符串

function createRichText(name: string, score: number) {
  return Text() {
    Span(`玩家${name}得分：`)
    Span(score.toString())
      .fontColor(score > 60 ? Color.Green : Color.Red)
  }
}

五、样式继承与覆盖

样式属性	继承规则	示例
fontColor	✅ 子Span继承	Text().fontColor(..)影响所有子Span
fontSize	✅ 可被局部覆盖	父设置20vp，子设置16vp则生效16vp
textAlign	❌ 仅作用于Text容器	需在Text组件设置

六、性能优化方案

1. 复杂内容分块渲染

LazyForEach(this.richData, (item) => {
  RichTextChunk(item.html) // 自定义分块组件
}, (item) => item.id)

    2. 避免频繁重建

// 错误示范
@State text: string = '内容'
Text().content(this.text + Date.now()) // 每次刷新重建

// 正确做法
Text().content(this.text)

七、完整示例：商品详情页

@Entry
@Component
struct GoodsDetail {
  @State price: number = 99.9
  @State tags: string[] = ['限时', '折扣']

  build() {
    Column() {
      // 价格富文本
      Text() {
        Span('¥')
          .fontColor('#FF0000')
          .fontSize(16)
        Span(this.price.toFixed(2))
          .fontColor('#FF0000')
          .fontSize(24)
        Span(' 原价:')
        Span('¥129')
          .decoration({type: TextDecorationType.LineThrough})
      }

      // 标签动态生成
      Text() {
        ForEach(this.tags, tag => {
          Span(`[${tag}]`)
            .margin({ right: 5 })
            .backgroundColor('#FFF0F0')
            .borderRadius(4)
        })
      }
    }
  }
}

关键注意事项

1. Span限制：

   • 不支持跨行样式（如首行缩进）
   • 不能直接设置背景图

2. RichText安全：

   • 禁用危险标签：<script> <iframe>
   • 启用过滤：.domStorageAccess(false)

3. 版本兼容：

   • RichText的HTML5支持度依赖系统WebView版本
   • API 10+新增@ohos.arkui.richtext增强模块