RichText

富文本組件，解析并顯示HTML格式文本。

說明：
開發前請熟悉鴻蒙開發指導文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]點擊或者復制轉到。

• 該組件從API Version 8開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。
• 該組件無法根據內容自適應設置寬高屬性，需要開發者設置顯示布局。

子組件

不包含子組件。

接口

RichText(content:string)

參數:

事件

屬性

只支持[通用屬性]中width，height，size，layoutWeight四個屬性。由于padding，margin，constraintSize屬性使用時與通用屬性描述不符，暫不支持。

支持標簽

使用場景

RichText組件底層復用了Web組件來提供基礎能力，包括但不限于HTML頁面的解析、渲染等。但由于Web組件比較消耗資源，所以在一些重復使用RichText組件的場景下，比如在List下循環重復使用RichText時，會出現卡頓、滑動響應慢等現象。

RichText使用Web提供基礎能力，同樣遵循Web約束條件。常見典型場景如下:

移動設備的視口默認值大小為980px，默認值可以確保大部分網頁在移動設備下可以正常瀏覽。如果RichText組件寬度低于這個值，content內部的HTML則可能會生產一個可以滑動的頁面被RichText組件包裹。如果想替換默認值，可以在content中添加以下標簽：

< meta name="viewport" content="width=device-width" >

示例

示例效果請以真機運行為準，當前IDE預覽器不支持。

// xxx.ets
@Entry
@Component
struct RichTextExample {
  @State data: 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 >';

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.Center }) {
      RichText(this.data)
        .onStart(() = > {
          console.info('RichText onStart');
        })
        .onComplete(() = > {
          console.info('RichText onComplete');
        })
        .width(500)
        .height(500)
        .backgroundColor(0XBDDB69)
      RichText('layoutWeight(1)')
        .onStart(() = > {
          console.info('RichText onStart');
        })
        .onComplete(() = > {
          console.info('RichText onComplete');
        })
        .size({ width: '100%', height: 110 })
        .backgroundColor(0X92D6CC)
      RichText('layoutWeight(2)')
        .onStart(() = > {
          console.info('RichText onStart');
        })
        .onComplete(() = > {
          console.info('RichText onComplete');
        })
        .size({ width: '100%', height: 110 })
        .backgroundColor(0X92C48D)
    }
  }
}