富文本組件

子組件

不包含子組件。

接口

RichText(content:string)

參數(shù):

事件

屬性

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

支持標(biāo)簽

示例

示例效果請以真機(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)
    }
  }
}

使用場景說明

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