第九节HarmonyOS 常用基础组件7-RichText_harmonyos richtext 本地html

1、描述

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

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

2、接口

RichText(content:string)

3、参数

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

4、事件

5、属性

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

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

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 })
  }
}