富文本組件

子組件

不包含子組件。

接口

RichText(content:string)

參數(shù):

事件

屬性

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

支持標(biāo)簽

示例

示例效果請(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下劃線</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/>' +
  '<div style="width: 500px;height: 500px;border: 1px solid;margin: 0auto;">' +
  '<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>';

  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(400)
        .backgroundColor(0XBDDB69)
      RichText('layoutWeight(1)')
        .onStart(() => {
          console.info('RichText onStart');
        })
        .onComplete(() => {
          console.info('RichText onComplete');
        })
        .size({ width: '100%', height: 110 })
        .backgroundColor(0X92D6CC)
        .layoutWeight(1)
      RichText('layoutWeight(2)')
        .onStart(() => {
          console.info('RichText onStart');
        })
        .onComplete(() => {
          console.info('RichText onComplete');
        })
        .size({ width: '100%', height: 110 })
        .backgroundColor(0X92C48D)
        .layoutWeight(2)
    }
  }
}

使用場(chǎng)景說(shuō)明

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)象。