鸿蒙UI开发——设置组件的内容填充方式

1、场景描述

组件在宽高变化时，如果我们设置了动画效果，但该组件同时又有内容，此时，可能会出现组件有动画效果，但组件包含的内容没有动画的问题。

我们以Text文本组件为例：

如果Text文本组件中有包含文字，此时我们将组件的尺寸变更触发动画时，可能会出现以下效果：

从上述效果中我们可以看到，Text组件的宽高变化是按照动画平滑过渡，但是里面包含的文字发生了跳变，我们希望里面的文字也随着动画发生平滑过渡。效果如下（文章末尾有源码）：

为了达到后者的效果，我们可以通过为组件设置renderFit属性来实现。

2、renderFit

属性接口定义如下：

设置宽高动画过程中的组件内容填充方式。(当不设置renderFit属性时，取默认值RenderFit.TOP_LEFT)

// 设置宽高动画过程中的组件内容填充方式。renderFit(fitMode: RenderFit)

其中RenderFit的值是枚举，介绍如下：

名称	描述	示意图
CENTER	保持动画终态的内容大小，并且内容始终与组件保持中心对齐。
TOP	保持动画终态的内容大小，并且内容始终与组件保持顶部中心对齐。
BOTTOM	保持动画终态的内容大小，并且内容始终与组件保持底部中心对齐。
LEFT	保持动画终态的内容大小，并且内容始终与组件保持左侧对齐。
RIGHT	保持动画终态的内容大小，并且内容始终与组件保持右侧对齐。
TOP_LEFT	保持动画终态的内容大小，并且内容始终与组件保持左上角对齐。
TOP_RIGHT	保持动画终态的内容大小，并且内容始终与组件保持右上角对齐。
BOTTOM_LEFT	保持动画终态的内容大小，并且内容始终与组件保持左下角对齐。
BOTTOM_RIGHT	保持动画终态的内容大小，并且内容始终与组件保持右下角对齐。
RESIZE_FILL	不考虑动画终态内容的宽高比，并且内容始终缩放到组件的大小。
RESIZE_CONTAIN	保持动画终态内容的宽高比进行缩小或放大，使内容完整显示在组件内，且与组件保持中心对齐。
RESIZE_CONTAIN_TOP_LEFT	保持动画终态内容的宽高比进行缩小或放大，使内容完整显示在组件内。当组件宽方向有剩余时，内容与组件保持左侧对齐，当组件高方向有剩余时，内容与组件保持顶部对齐。
RESIZE_CONTAIN_BOTTOM_RIGHT	保持动画终态内容的宽高比进行缩小或放大，使内容完整显示在组件内。当组件宽方向有剩余时，内容与组件保持右侧对齐，当组件高方向有剩余时，内容与组件保持底部对齐。
RESIZE_COVER	保持动画终态内容的宽高比进行缩小或放大，使内容两边都大于或等于组件两边，且与组件保持中心对齐，显示内容的中间部分。
RESIZE_COVER_TOP_LEFT	保持动画终态内容的宽高比进行缩小或放大，使内容的两边都恰好大于或等于组件两边。当内容宽方向有剩余时，内容与组件保持左侧对齐，显示内容的左侧部分。当内容高方向有剩余时，内容与组件保持顶部对齐，显示内容的顶侧部分。
RESIZE_COVER_BOTTOM_RIGHT	保持动画终态内容的宽高比进行缩小或放大，使内容的两边都恰好大于或等于组件两边。当内容宽方向有剩余时，内容与组件保持右侧对齐，显示内容的右侧部分。当内容高方向有剩余时，内容与组件保持底部对齐，显示内容的底侧部分。

3、Demo

第一章节中的动画实例如下（文字与外部的容器保持相对关系，有平滑的动画效果）：

具体实现代码如下（25行、34行、39行）：​​​​​​​

@Entry@Componentstruct RenderFitExample {  @State w: number = 250; // w为宽，h为高  @State h: number = 100;  @State text: string = '鸿蒙自习室';  flag: boolean = false;  toggleSize = () => {    const widthOffset = 50, heightOffset = 40;    const i = this.flag  ? 1 : -1;    this.flag = !this.flag;    this.w += widthOffset * i;    this.h += heightOffset * i;  }  build() {    Column() {      Text(this.text)        .width(this.w)        .height(this.h)        .borderWidth(1)        .textAlign(TextAlign.Start)        .backgroundColor(Color.Pink)        .renderFit(RenderFit.LEFT) // 设置LEFT的renderFit，动画过程中，动画的终态内容与组件保持左对齐        .margin(20)      Text(this.text)        .width(this.w)        .height(this.h)        .textAlign(TextAlign.Center)        .backgroundColor(Color.Orange)        .borderWidth(1)        .renderFit(RenderFit.CENTER) // 设置CENTER的renderFit，动画过程中，动画的终态内容与组件保持中心对齐        .margin(20)      Button("animate")        .onClick(() => {          animateTo({ curve: Curve.Ease }, this.toggleSize)        })    }.width("100%").height("100%").alignItems(HorizontalAlign.Center)  }}