如何实现渐变的圆角边框

如何实现渐变的圆角边框

HarmonyOS
2024-01-30 22:46:29
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
justtouch

通过设置容器的渐变色然后设置组件的渐变色即可。

代码示例

@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%') 
  } 
}

参考链接

颜色渐变

分享
微博
QQ
微信
回复
2024-02-01 11:07:08
相关问题
类似边框颜色线性渐变
571浏览 • 1回复 待解决
如何设置边框颜色为渐变色?
377浏览 • 1回复 待解决
DataPanel如何实现颜色渐变
351浏览 • 1回复 待解决
HarmonyOS 如何实现阴影边框效果?
406浏览 • 1回复 待解决
如何实现组件边缘颜色渐变
1862浏览 • 1回复 待解决
组件如何实现渐变色?
1971浏览 • 1回复 待解决
HarmonyOS 如何实现滚动渐变效果?
188浏览 • 1回复 待解决
如何实现顶部渐变遮罩效果
394浏览 • 1回复 待解决
ArkUI(ets)怎么实现边框
3418浏览 • 1回复 待解决
HarmonyOS 渐变遮罩效果如何实现
99浏览 • 1回复 待解决
实现一个虚线边框组件。
402浏览 • 1回复 待解决
鸿蒙 如何实现一个渐变圆形图片;
12396浏览 • 2回复 已解决
如何在list组件中实现两端渐变
292浏览 • 1回复 待解决
Progress进度条如何实现渐变色?
510浏览 • 1回复 待解决
lottile动画如何圆角
833浏览 • 0回复 待解决