HarmonyOS 应用中设置组件外轮廓为圆形

在 HarmonyOS 5.0+ 的 ArkTS 开发中，设置组件外轮廓为圆形可通过以下三种方式实现：

一、使用 clipShape 属性（推荐）

通过设置 clipShape(new CircleShape()) 实现圆形裁剪，适用于图片、容器等组件：

Stack() {
  Image($r('app.media.image'))
    .width('100%')
    .height('100%')
}
.clipShape(new CircleShape())  // 将Stack容器裁剪为圆形
.width(200)
.height(200)

特性说明：

• API Version 12+支持在卡片中使用
• 不会影响手势事件响应
• 支持动态调整圆形尺寸

二、通过 borderRadius 属性

当组件为正方形时，设置 borderRadius 为边长的一半即可：

Column()
  .width(150)
  .height(150)
  .backgroundColor(Color.Red)
  .borderRadius(75)  // 圆角半径设为边长一半

适用场景：

• 快速创建基础圆形元素
• 支持单独设置四角圆角（通过 EdgeRadius 对象）

三、使用 Circle 组件（特定场景）

专门用于绘制圆形的组件，支持描边和填充：

Circle({ width: 200, height: 200 })
  .fill(Color.Blue)
  .stroke({ width: 2, color: Color.White })

参数说明：

• fill 设置填充颜色
• stroke 设置描边样式
• 通过 width / height 控制大小

注意事项：

1. 若使用旧版 clip 接口，需注意裁剪区域将无法响应手势事件
2. 当需要外描边效果时，可结合 outline 属性设置圆角外边框
3. API版本差异：clipShape 需 ≥API 12，borderRadius 通用性更好
4. 图片组件推荐配合objectFit属性调整显示比例

三种方式均可实现圆形轮廓，推荐根据具体场景选择：需要动态裁剪时用 clipShape，简单图形用 borderRadius，专用图形绘制用 Circle 组件。

参考： 形状裁剪