組件內容填充方式

用于決定在組件的寬高動畫過程中，如何將動畫最終的組件內容繪制在組件上。

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

屬性

RenderFit枚舉說明

說明：

• 示意圖中，藍色區域表示內容，橙黃色區域表示節點大小。
• 不同的內容填充方式在寬高動畫過程中效果不一致，開發者需要選擇合適的內容填充方式以實現需要的動畫效果。

示例

// 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) // 設置LEFT的renderFit，動畫過程中，動畫的終態內容與組件保持左對齊
        .margin(20)

      Text("Hello")
        .width(this.width1)
        .height(this.height1)
        .textAlign(TextAlign.Center)
        .borderWidth(1)
        .renderFit(RenderFit.CENTER) // 設置CENTER的renderFit，動畫過程中，動畫的終態內容與組件保持中心對齊
        .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)
  }
}