1# 组件内容填充方式 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9用于决定在组件的宽高动画过程中，如何将动画最终的组件内容绘制在组件上。 10 11> **说明：** 12> 13> 从API version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## renderFit 16 17renderFit(fitMode: RenderFit): T 18 19设置宽高动画过程中的组件内容填充方式。 20 21**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 22 23**系统能力：** SystemCapability.ArkUI.ArkUI.Full 24 25**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 26 27**参数：** 28 29| 参数名 | 类型 | 必填 | 说明 | 30| ------- | ------------------------------- | ---- | ------------------------------------------------------------ | 31| fitMode | [RenderFit](ts-appendix-enums.md#renderfit10) | 是 | 设置宽高动画过程中的组件内容填充方式。<br/>当不设置renderFit属性时，取默认值RenderFit.TOP_LEFT。 | 32 33**返回值：** 34 35| 类型 | 说明 | 36| -------- | -------- | 37| T | 返回当前组件。 | 38 39## renderFit<sup>18+</sup> 40 41renderFit(fitMode: Optional\<RenderFit>): T 42 43设置宽高动画过程中的组件内容填充方式。与[renderFit](#renderfit)相比，fitMode参数新增了对undefined类型的支持。 44 45**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 46 47**系统能力：** SystemCapability.ArkUI.ArkUI.Full 48 49**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 50 51**参数：** 52 53| 参数名 | 类型 | 必填 | 说明 | 54| ------- | ------------------------------------------ | ---- | ------------------------------------------------------------ | 55| fitMode | Optional\<[RenderFit](ts-appendix-enums.md#renderfit10)> | 是 | 设置宽高动画过程中的组件内容填充方式。<br/>当fitMode的值为undefined时，取默认值。恢复为内容填充方式为RenderFit.TOP_LEFT的效果。 | 56 57**返回值：** 58 59| 类型 | 说明 | 60| -------- | -------- | 61| T | 返回当前组件。 | 62 63> **说明：** 64> 65> 对于TEXTURE和SURFACE类型的[XComponent](./ts-basic-components-xcomponent.md)组件，当不设置renderFit属性时，取默认值为RenderFit.RESIZE_FILL。 66> 67> 对于SURFACE类型的[XComponent](./ts-basic-components-xcomponent.md)组件，背景色设置为不透明的纯黑色，在API version 18之前，其renderFit通用属性仅支持设置为RenderFit.RESIZE_FILL；在API version 18及之后，支持所有的RenderFit枚举值。 68> 69> 对于使用[ArkUI NDK接口](../../../ui/ndk-access-the-arkts-page.md)创建的XComponent组件，不支持使用属性获取函数[getAttribute](../capi-arkui-nativemodule-arkui-nativenodeapi-1.md#getattribute)获取其renderFit属性值。 70 71## 示例 72 73该示例主要演示通过renderFit设置宽高动画过程中的组件内容不同填充方式。 74 75```ts 76// xxx.ets 77@Entry 78@Component 79struct RenderFitExample { 80 @State width1: number = 100; 81 @State height1: number = 30; 82 flag: boolean = true; 83 84 build() { 85 Column() { 86 Text("Hello") 87 .width(this.width1) 88 .height(this.height1) 89 .borderWidth(1) 90 .textAlign(TextAlign.Start) 91 .renderFit(RenderFit.LEFT)// 设置LEFT的renderFit，动画过程中，动画的终态内容与组件保持左对齐 92 .margin(20) 93 94 Text("Hello") 95 .width(this.width1) 96 .height(this.height1) 97 .textAlign(TextAlign.Center) 98 .borderWidth(1) 99 .renderFit(RenderFit.CENTER)// 设置CENTER的renderFit，动画过程中，动画的终态内容与组件保持中心对齐 100 .margin(20) 101 102 Button("animate") 103 .onClick(() => { 104 this.getUIContext()?.animateTo({ curve: Curve.Ease }, () => { 105 if (this.flag) { 106 this.width1 = 150; 107 this.height1 = 50; 108 } else { 109 this.width1 = 100; 110 this.height1 = 30; 111 } 112 this.flag = !this.flag; 113 }) 114 }) 115 }.width("100%").height("100%").alignItems(HorizontalAlign.Center) 116 } 117} 118``` 119 120 121
