如何实现组件边缘的颜色渐变

如何实现组件边缘的颜色渐变。

如何实现组件边缘的颜色渐变-鸿蒙开发者社区

HarmonyOS
2024-02-20 10:59:34
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
wjmfzsz

可通过通用属性linearGradient来实现组件边缘的颜色渐变效果。

示例代码

// 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%') 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
分享
微博
QQ
微信
回复
2024-02-20 19:58:21
相关问题
DataPanel如何实现颜色渐变
1349浏览 • 1回复 待解决
HarmonyOS Tab颜色渐变宽度渐变
825浏览 • 1回复 待解决
组件如何实现渐变色?
2661浏览 • 1回复 待解决
如何设置边框颜色渐变色?
1217浏览 • 1回复 待解决
类似边框颜色线性渐变
1335浏览 • 1回复 待解决
文字背景颜色渐变显示
2831浏览 • 1回复 待解决
HarmonyOS 如何实现柔滑边缘效果
574浏览 • 1回复 待解决
HarmonyOS Canvas颜色是否支持径向渐变
743浏览 • 1回复 待解决
如何在list组件实现两端渐变
1026浏览 • 1回复 待解决
HarmonyOS 如何实现View边缘模糊效果
1239浏览 • 1回复 待解决
如何实现渐变圆角边框
3289浏览 • 1回复 待解决
HarmonyOS 环形渐变如何实现
484浏览 • 1回复 待解决
如何实现顶部渐变遮罩效果
1124浏览 • 1回复 待解决