第九节HarmonyOS 常用基础组件7-RichText

1、描述

富文本组件，解析并显示HTML格式文本。

富文本（RichText）是一种特殊的文本格式，它比普通文本更加丰富多彩。富文本可以包含各种字体、颜色、大小、图像、链接、表格、视频等元素，使文本更加生动、有趣。

2、接口

RichText(content:string)

3、参数

content - string - 必填 - 表示HTML格式的字符串。

4、事件

名称	描述
onStart(callback:() => void)	加载网页时触发。
onComplete(callback:() => void)	网页加载完成后触发。

5、属性

暂时只支持通用的四大属性：width、height、size、layoutWeight。由于padding、margin、constraintSize属性使用时与通用属性描述不符，暂不支持。

6、富文本支持解析的标签

名称	描述
<h1> --<h6>	标题从1-6
<p></p>	定义段落
<br/>	插入一个简单的换行
<font/>	规定文本字体样式
<hr/>	定义一条水平线
<image><image/>	定义图片
<div></div>	用于组合块级元素，里面包含其它标签
<i></i>	定义为斜体文本
<u></u>	带有下划线的文本
<style></style>	定义html文档的样式信息
style	属性规定元素的行内样式，写在标签内部，在使用的时候需用引号来进行区分，并以; 间隔样式，style=‘width: 500px;height: 500px;border: 1px soild;margin: 0 auto;‘。
<script></script>	定义客户端脚本

7、富文本使用场景

RichText组件底层复用了Web组件来提供基础能力，包括但不限于HTML页面的解析、渲染等。

但由于Web组件比较消耗资源，所以在一些重复使用RichText组件的场景下，比如在List下循环重复使用RichText时，会出现卡顿、滑动响应慢等现象。

8、实例

import router from '@ohos.router';

@Entry
@Component
struct RichTextPage {
  @State message: string = '富文本组件，解析并显示HTML格式文本。'
  @State richText: string = '<h1 style="text-align: center;">h1标题</h1>' +
    '<h1 style="text-align: center;"><i>h1斜体</i></h1>' +
    '<h1 style="text-align: center;"><u>h1下划线</u></h1>' +
    '<h2 style="text-align: center;">h2标题</h2>' +
    '<h3 style="text-align: center;">h3标题</h3>' +
    '<p style="text-align: center;">p常规</p><hr/>' +
    '<p style="font-size: 35px;text-align: center;font-weight: bold; color: rgb(24,78,228)">字体大小35px,行高45px</p>' +
    '<p style="background-color: #e5e5e5;line-height: 45px;font-size: 35px;text-indent: 2em;"></p>' +
    '<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>' +
    '<div style="width: 500px;height: 500px;border: 1px solid;margin: 0 auto;"/>';

  build() {
    Row() {
      Scroll() {
        Column() {
          Text(this.message)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .width('96%')
          Blank(12)
          RichText(this.richText)
            .width('96%')
            .height(500)

          Blank(12)
          Button("Progress文本文档")
            .fontSize(20)
            .backgroundColor('#007DFF')
            .width('96%')
            .onClick(() => {
              // 处理点击事件逻辑
              router.pushUrl({
                url: "pages/baseComponent/richText/RichTextDesc",
              })
            })

        }
        .width('100%')
      }
    }
    .padding({ top: 12, bottom: 12 })
  }
}