HarmonyOS 鸿蒙Next 在使用borderimage的前提下，如何设置圆角

HarmonyOS 鸿蒙Next 在使用borderimage的前提下，如何设置圆角

在使用borderimage的前提下，如何设置圆角 Row设置了borderimage，但是需要圆角，目前没找到对应api可以显示圆角的，borderRadius设置后无效，目前只能通过UI覆盖来实现渐变的圆角效果，有对应的API嘛？

2 回复

您试试下面的方法，看看能否实现您的需求 // xxx.ets

@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Column({ space: 5 }) {
          Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
          Row(){
            Text('This is gradient color.')
              .textAlign(TextAlign.Center)
              .width('96%')
              .height('80%')
              .borderRadius(30)
              .linearGradient({

                direction: GradientDirection.Left, // 渐变方向
                repeating: true, // 渐变颜色是否重复
                colors: [[0xDCDCDC, 0.0],  [0xFFFFFF, 1.0]] // 数组末尾元素占比小于1时满足重复着色效果

              })

          }
          .width('90%')
          .height(60)
          .borderRadius(30)
          .linearGradient({
            angle: 90,
            colors: [[0x87CEEB, 0.0], [0x2E8B57, 1.0]]
          })
          .justifyContent(FlexAlign.Center)

        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

BorderImageOption没有属性去设置圆角

参考文档

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-border-image-V5#borderimageoption对象说明

更多关于HarmonyOS 鸿蒙Next 在使用borderimage的前提下，如何设置圆角的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，若在使用borderimage的前提下需要设置圆角，可以通过组合使用border-image属性和CSS的border-radius属性来实现。border-image用于定义边框的图像，而border-radius则用于设置元素的圆角。

示例代码如下：

.element {
    /* 定义边框图像 */
    border-image: url('path/to/your/image.png') 30 30 round;
    /* 设置边框宽度 */
    border-width: 10px;
    /* 设置圆角半径 */
    border-radius: 20px;
}

其中：

  • url('path/to/your/image.png')：边框图像的路径。
  • 30 30：边框图像的分割线，用于定义边框图像的边界。
  • round：边框图像的平铺方式，round表示图像会缩放以适应边框区域。
  • border-width: 10px：边框的宽度。
  • border-radius: 20px：设置圆角的半径，数值越大，圆角越明显。

请注意，border-image和border-radius的属性值需根据实际设计需求进行调整。

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

回到顶部