HarmonyOS 鸿蒙Next 设置borderRadius为组件宽或高一半成圆，不确定组件宽高时如何设置

发布于 1周前 作者 gougou168 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 设置borderRadius为组件宽或高一半成圆，不确定组件宽高时如何设置 设置borderRadius 为组件宽或高的一半是一个圆 有些时候我们我不知道 或者不确定组件的宽高 这时候怎么设置 我看文档是不支持百分比的

Harmonyos Next教程
2 回复

在组件初始化或组件尺寸发生变化时，会触发onAreaChange事件，这个事件的回调信息中可以获取组件的宽度或者高度，@State修饰的变量可以刷新UI，您将borderRadius 中的 参数用@State修饰的变量 传入，然后组件的onAreaChange事件中更新这个@State修饰的变量达到更新ui的效果，您看下这个思路是否可行

onAreaChange参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-area-change-event-V5#onareachange

更多关于HarmonyOS 鸿蒙Next 设置borderRadius为组件宽或高一半成圆，不确定组件宽高时如何设置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，若要为组件设置borderRadius以使其宽度或高度的一半形成圆形效果，但在不确定组件具体宽高的情况下，可以通过绑定组件的宽高属性动态计算borderRadius。以下是一个实现思路：

  1. 使用布局中的size属性监听组件尺寸变化：通过监听组件的宽高变化，可以动态调整borderRadius。

  2. 在组件的样式中绑定动态计算的borderRadius：利用HarmonyOS的数据绑定机制，将计算后的borderRadius值绑定到组件的样式上。

  3. 编写逻辑代码动态计算：在组件的JavaScript或eTS逻辑代码中，监听尺寸变化事件，计算当前宽高的一半，并将此值设置为borderRadius。

示例代码片段（假设使用eTS）：

@Entry
@Component
struct MyComponent {
  @State radius: number = 0;

  onResize(event: any) {
    const { width, height } = event.size;
    this.radius = Math.min(width, height) / 2;
  }

  build() {
    Row() {
      Column()
        .width('100%')
        .height('100%')
        .onResize(this.onResize)
        .decoration(Decoration(
          Shape.circle(this.radius)
        ))
        // 其他子组件
    }
  }
}

注意，上述示例使用了Shape.circle来简化圆形设置，实际中可能需要更复杂的处理来精确设置四个角的borderRadius。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部