HarmonyOS 鸿蒙Next Progress 如何设置左边圆角。右边不需要圆角

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

HarmonyOS 鸿蒙Next Progress 如何设置左边圆角。右边不需要圆角 Progress 如何设置左边圆角。右边不需要圆角

Harmonyos Next教程
3 回复

参考以下代码：

@Entry
@Component
struct ProgressExample {
  build() {
    Column({ space: 15 }) {
      Text('Linear Progress')
        .fontSize(9)
        .fontColor(0xCCCCCC)
        .width('90%')
      Progress({
        value: 20,
        total: 100,
        type: ProgressType.Linear
      })
        .width(200)
        .backgroundColor('#B3E54C')
        .style({ strokeRadius: 0, strokeWidth: 100, })
        .color('#917AF9')
        .borderColor('#00000000')
        .borderRadius({
          topLeft: 20,
          topRight: 0,
          bottomLeft: 20,
          bottomRight: 0
        })
        .clip(true)
      }
      .width('100%')
      .margin({ top: 30 })
    }
  }
}

更多关于HarmonyOS 鸿蒙Next Progress 如何设置左边圆角。右边不需要圆角的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


BorderRadiuses这里有设置topLeft和bottomLeft吧，是不生效？

在HarmonyOS（鸿蒙）系统中，如果你正在开发一个UI界面并希望设置某个组件的左边为圆角而右边保持直角，你可以通过以下方式实现（这里假设你使用的是ArkUI框架进行开发）：

  1. 使用Shape组件： 在ArkUI中，你可以使用Shape组件来定义自定义的形状。通过Shape的Radius属性，你可以指定圆角的半径，并通过Corners属性来定义哪些角落需要应用圆角。

    示例代码：

    Shape({
    radius: 20, // 圆角半径
    corners: [
        { radius: 20, position: ShapeCorner.TopLeft },
        { radius: 20, position: ShapeCorner.TopRight }, // 如果右边不需要圆角，则不设置或设置为0
        { radius: 20, position: ShapeCorner.BottomLeft },
        { radius: 0, position: ShapeCorner.BottomRight } // 右边直角
    ]
})

    注意：上述代码是一个示例，你需要根据实际情况将其嵌入到你的组件样式中。

  2. 应用到目标组件： 将上述Shape组件的样式应用到你的目标UI组件上，如Container、Image等。

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

回到顶部