HarmonyOS 鸿蒙Next Stack如何添加渐变色的边框

我想对 Stack 添加一个渐变色的边框, 与下图相似的, 但是边框从左上到右下是 “#003399"到”#668822", 请问有什么思路没有?

[@Entry](/user/Entry)
[@Component](/user/Component)
struct BorderDemo {
  build() {
    Column() {
      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时满足重复着色效果
            })
          .backgroundColor(Color.White)
      }
      .width('90%')
      .height(60)
      .borderRadius(30)
      .linearGradient({
        angle: 90,
        colors: [['#003399', 0.0], ['#668822', 1.0]]
      })
      .opacity(0.6)
      .justifyContent(FlexAlign.Center)
    }
    .height('100%')
  }
}

参考这种，里层和外层设置两个渐变，然后边框就有个颜色了，就是有点麻烦

songsunli 2楼•19 天前

别用边框了，再加一个Stack当背景，这个内容做前景padding-1就行了

参考：https://developer.huawei.com/consumer/cn/blog/topic/03158286808758018

phonegap100 3楼•19 天前

听起来不像个好 idea.

itying888 4楼•19 天前

在HarmonyOS鸿蒙Next中，为Stack组件添加渐变色的边框，可以通过自定义绘制的方式实现。以下是一个实现思路：

创建自定义组件：首先，创建一个自定义组件，该组件将负责绘制带有渐变色边框的形状。
定义Shape和Gradient：在自定义组件中，使用Path对象来描述所需的边框形状（如矩形边框），并使用LinearGradient或RadialGradient对象来定义渐变效果。
绘制边框：在组件的onDraw方法中，创建Canvas对象，并使用Paint对象设置其Shader为之前定义的渐变Shader。然后，使用Canvas的drawRect（或其他形状绘制方法）结合Paint对象进行绘制，以形成渐变色的边框。
应用自定义组件：将自定义组件作为Stack的子组件添加，以实现Stack具有渐变色边框的效果。

请注意，渐变色的方向和颜色断点等参数可以根据实际需求进行调整。

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