中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
直播间的弹幕列表顶部需要渐变遮罩效果
微信扫码分享
使用overlay通过属性linearGradient同时使用blendMode让当前浮层与下方list混合实现渐变遮罩效果。
效果图如下:
参考代码:
@Entry @Component struct Index { 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 }) } }
使用overlay通过属性linearGradient同时使用blendMode让当前浮层与下方list混合实现渐变遮罩效果。
效果图如下:
参考代码: