HarmonyOS 渐变遮罩效果如何实现?

HarmonyOS 渐变遮罩效果如何实现?

HarmonyOS
2024-10-16 10:09:12
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

参考这个demo:

// xxx.ets  
@Entry  
@Component  
struct page240527110725022 {  
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]  
  @Builder  
  overlayBuilder() {  
    Stack()  
      .height("100%")  
      .width("100%")  
      .linearGradient({  
        direction: GradientDirection.Bottom, // 渐变方向  
        colors: [["#00FFFFFF", 0.0], ["#FFFFFFFF", 0.3]] // 数组末尾元素占比小于1时满足重复着色效果  
      })  
      .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)  
      .hitTestBehavior(HitTestMode.None)  
  }  
  build() {  
    Column() {  
      List({ space: 20, initialIndex: 0 }) {  
        ForEach(this.arr, (item: number) => {  
          ListItem() {  
            Text('' + item)  
              .width('100%')  
              .height(100)  
              .fontSize(16)  
              .textAlign(TextAlign.Center)  
              .borderRadius(10)  
              .backgroundColor(0xFFFFFF)  
          }  
          .onClick(() => {  
            console.log('is click')  
          })  
        }, (item: string) => item)  
      }.width('90%')  
      .scrollBar(BarState.Off)  
      .overlay(this.overlayBuilder())  
      .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)  
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })  
  }  
}
分享
微博
QQ
微信
回复
2024-10-16 16:52:56
相关问题
如何实现顶部渐变遮罩效果
1405浏览 • 1回复 待解决
渐变动画效果如何实现
537浏览 • 0回复 待解决
HarmonyOS如何实现透明渐变遮罩效果
1359浏览 • 1回复 待解决
图片模糊效果如何实现
1785浏览 • 1回复 待解决
文字动画效果如何实现
3870浏览 • 0回复 待解决
HarmonyOS 下拉图片放大效果如何实现
1181浏览 • 1回复 待解决
HarmonyOS 如何实现滚动渐变效果
1302浏览 • 1回复 待解决
HarmonyOS 如何实现半透明的遮罩效果
2612浏览 • 1回复 待解决
HarmonyOS 客户端拖拽效果如何实现
1375浏览 • 1回复 待解决
HarmonyOS 如何实现文字渐变效果
1276浏览 • 1回复 待解决
HarmonyOS 如何实现透明度的渐变效果
890浏览 • 1回复 待解决
不同组件不同样式的效果如何实现
1417浏览 • 1回复 待解决
引导遮罩效果实现的最佳方案
2578浏览 • 1回复 待解决
HarmonyOS grid拖拽效果如何添加动画
1196浏览 • 1回复 待解决
HarmonyOS 环形渐变如何实现
687浏览 • 1回复 待解决