組件內(nèi)容填充方式

用于決定在組件的寬高動(dòng)畫過程中，如何將動(dòng)畫最終的組件內(nèi)容繪制在組件上。

說明：
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]點(diǎn)擊或者復(fù)制轉(zhuǎn)到。
從API Version 10開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

屬性

RenderFit枚舉說明

說明：

• 示意圖中，藍(lán)色區(qū)域表示內(nèi)容，橙黃色區(qū)域表示節(jié)點(diǎn)大小。
• 不同的內(nèi)容填充方式在寬高動(dòng)畫過程中效果不一致，開發(fā)者需要選擇合適的內(nèi)容填充方式以實(shí)現(xiàn)需要的動(dòng)畫效果。

示例

// xxx.ets
@Entry
@Component
struct RenderFitExample {
  @State width1: number = 100;
  @State height1: number = 30;
  flag: boolean = true;
  build() {
    Column() {
      Text("Hello")
        .width(this.width1)
        .height(this.height1)
        .borderWidth(1)
        .textAlign(TextAlign.Start)
        .renderFit(RenderFit.LEFT) // 設(shè)置LEFT的renderFit，動(dòng)畫過程中，動(dòng)畫的終態(tài)內(nèi)容與組件保持左對齊
        .margin(20)

      Text("Hello")
        .width(this.width1)
        .height(this.height1)
        .textAlign(TextAlign.Center)
        .borderWidth(1)
        .renderFit(RenderFit.CENTER) // 設(shè)置CENTER的renderFit，動(dòng)畫過程中，動(dòng)畫的終態(tài)內(nèi)容與組件保持中心對齊
        .margin(20)

      Button("animate")
        .onClick(() = > {
          animateTo({ curve: Curve.Ease }, () = > {
            if (this.flag) {
              this.width1 = 150;
              this.height1 = 50;
            } else {
              this.width1 = 100;
              this.height1 = 30;
            }
            this.flag = !this.flag;
          })
        })
    }.width("100%").height("100%").alignItems(HorizontalAlign.Center)
  }
}