【鸿蒙】如何实现富文本的显示？（RichText? or Text/Span ?）

近来同事问我鸿蒙如何实现富文本的展示，刚接触鸿蒙半年的我，对此确实还没有深入的了解和实践。同时我在网上查阅了很多文献资料，然而，我发现大部分的资料都是关于鸿蒙的基础知识和常见功能的介绍，对于富文本展示这样的具体需求，并没有太多的详细解答。所以通过学习和资源整合，我决定写一篇关于实现简单的富文本展示的文献资料供大家参考。

下面我分别通过两种方式来实现富文本的展示：

一、通过富文本组件RichText实现：

富文本组件RichText是解析并显示HTML格式文本的组件。使用时我们需要注意以下几点：

要有一定的html知识，掌握一般的标签使用。
在界面调试时需要用模拟器或者真机调试，不能使用Previewer调试。
需要设置高度，不然会充满屏幕。

代码实现如下：

xml 复制代码

// 声明htlm描述字符串
@State data: string = '<p style="font-size: 30px;display: inline-block;">胡</p>' +
'<p style="font-size: 34px;color: Blue;display: inline-block;">汉三，</p>' +
'<p style="font-size: 34px;color: Orange;display: inline-block;">安徽省人。</p>'

然后在build()函数内声明RichText组件，并设置相关内容和属性即可：

scss 复制代码

RichText(this.data)
  .onStart(() => {
    // 该方法在加载html元素时触发
    console.info('RichText onStart');
  })
  .onComplete(() => {
    // 该方法在加载html元素结束时触发
    console.info('RichText onComplete');
  })
  .margin({ left: 20, right: 20 })
  .height(100)

二、通过文本组件Text组件并结合其子组件Span实现：

Span组件是Text组件的子组件，并且只能在Text组件中使用。需要注意的是，Text组件的子组件也只能使用Span组件，除此之外Text内不能使用其他组件。
Text组件如果添加了Span子组件，那么即便在Text中添加字符串内容也是无法显示的。

scss 复制代码

// 由于Text添加了Span组件，所以Text的内容文字不会展示，只有Span组件内的文字会展示
Text('内容文字不会展示，只有Span组件内的文字会展示') {
  Span('胡')
    .fontSize(30)
    .fontColor(Color.Black)

  Span('汉三，')
    .fontSize(34)
    .fontColor(Color.Blue)

  Span('安徽省人。')
    .fontSize(34)
    .fontColor(Color.Orange)

}
.margin({ left: 20, right: 20 })

三、上面两种方式运行模拟器后的显示结果如下（该页面的整体代码我会放到最后，码友可以直接拷贝后调试）：

四、总结：

RichText组件实现起来比较繁琐，不易上手，并且内容展示上也存在部分问题，同时也无法用Previewer调试。所以建议采用Text/Span使用。

五、整体代码如下：

less 复制代码

@Entry
@Component
struct FuWeben {
  // 声明htlm描述字符串
  @State data: string = '<p style="font-size: 30px;display: inline-block;">胡</p>' +
  '<p style="font-size: 34px;color: Blue;display: inline-block;">汉三，</p>' +
  '<p style="font-size: 34px;color: Orange;display: inline-block;">安徽省人。</p>';

  build() {
    Column({ space: 20 }) {
      Row() {
        RichText(this.data)
          .onStart(() => {
            // 该方法在加载html元素时触发
            console.info('RichText onStart');
          })
          .onComplete(() => {
            // 该方法在加载html元素结束时触发
            console.info('RichText onComplete');
          })
          .margin({ left: 20, right: 20 })
          .height(100)
      }
      .width('100%')

      Row() {
        // 由于Text添加了Span组件，所以Text的内容文字不会展示，只有Span组件内的文字会展示
        Text('内容文字不会展示，只有Span组件内的文字会展示') {
          Span('胡')
            .fontSize(30)
            .fontColor(Color.Black)

          Span('汉三，')
            .fontSize(34)
            .fontColor(Color.Blue)

          Span('安徽省人。')
            .fontSize(34)
            .fontColor(Color.Orange)

        }
        .margin({ left: 20, right: 20 })
      }
      .margin({ top: 60 })
      .width('100%')
    }
    .width('100%')
    .height('100%')
  }
}