RichText

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

說明：
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]點(diǎn)擊或者復(fù)制轉(zhuǎn)到。

• 該組件從API Version 8開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。
• 該組件無法根據(jù)內(nèi)容自適應(yīng)設(shè)置寬高屬性，需要開發(fā)者設(shè)置顯示布局。

子組件

不包含子組件。

接口

RichText(content:string)

參數(shù):

事件

屬性

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

支持標(biāo)簽

使用場景

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

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

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

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

示例

示例效果請以真機(jī)運(yùn)行為準(zhǔn)，當(dāng)前IDE預(yù)覽器不支持。

// xxx.ets
@Entry
@Component
struct RichTextExample {
  @State data: string = '< h1 style="text-align: center;" >h1標(biāo)題< /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標(biāo)題< /h2 >' +
    '< h3 style="text-align: center;" >h3標(biāo)題< /h3 >' +
    '< p style="text-align: center;" >p常規(guī)< /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)
    }
  }
}