【HarmonyOS】鸿蒙 borderRadius 百分比计算

这段代码定义了一个 ArkUI 的页面组件Page32。在这个组件中，主要实现了以下功能：

1. 状态变量：使用@State装饰器定义了一个私有状态变量_viewWidth，用于存储视图（可能是Text组件或其父容器Column）的宽度。这个变量初始化为 0，后续会根据onAreaChange事件的回调来更新。

2. 方法：定义了一个私有方法getPercentOfWidth，它接受一个百分比（percent）作为参数，并返回基于当前视图宽度（_viewWidth）计算出的绝对宽度值。这个方法用于动态计算边框半径（borderRadius）的值，使其能够根据视图的宽度动态调整。

3. UI 构建：

使用Column布局作为页面的主体容器，它占据了整个页面的高度和宽度（100%）。

在Column内部，添加了一个Text组件，显示文本“哈哈”。这个Text组件具有固定的宽度（200）和高度（200），文本居中对齐，背景色为粉色，并且有一个根据视图宽度动态计算的边框半径。

Text组件的onAreaChange事件监听器用于捕获组件大小的变化。当组件的宽度发生变化时，它会更新_viewWidth状态变量的值。这个变化随后会被getPercentOfWidth方法利用，以动态调整borderRadius的值。

4. 动态样式：通过getPercentOfWidth方法和onAreaChange事件的结合，实现了Text组件边框半径的动态调整。这意味着当页面布局或组件大小发生变化时，Text组件的边框半径会相应地根据宽度的百分比进行调整。

@Entry@Componentstruct Page32 {  @State private _viewWidth: number = 0;   private getPercentOfWidth(percent: number): number {    return this._viewWidth / 100 * percent;  }   build() {    Column() {      Text('哈哈')        .width(200)        .height(200)        .textAlign(TextAlign.Center)        .backgroundColor(Color.Pink)        .borderRadius(this.getPercentOfWidth(15))//15%        .onAreaChange((oldValue, newValue) => {          this._viewWidth = newValue.width as number;        })     }    .height('100%')    .width('100%')  }}