RichText

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

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

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

子組件

不包含子組件。

接口

RichText(content:string)

參數(shù):

事件

屬性

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

支持標(biāo)簽

使用場(chǎng)景

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

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

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

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

示例

示例效果請(qǐng)以真機(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下劃線(xiàn)< /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)
    }
  }
}