鸿蒙5.0开发常见问题【List组件如何设置两端的渐变效果?】
·
List组件本身不支持设置两端渐变,但是可以结合LinearGradient对象实现效果。参考代码如下:
@Entry
@Component
struct ListExample {
@State arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]
private scroller: Scroller = new Scroller()
build() {
Stack() {
List({ space: 10 }) {
ForEach(this.arr, (item: string) => {
ListItem() {
Text("Hello World")
.width(100)
.height(64)
.fontColor(Color.White)
.backgroundColor(Color.Black)
.textAlign(TextAlign.Center)
}
}, (item: string) => item)
}
.listDirection(Axis.Horizontal)
.scrollBar(BarState.Off)
.padding({ top: 20, bottom: 20 })
.width("80%")
.height("100%")
Stack() {
}
.linearGradient({
angle: 90,
colors: [[0x000000, 0.0], ['rgba(0,0,0,0)', 0.1], ['rgba(0,0,0,0)', 0.9], [0x000000, 1.0]]
})
.width("80%")
.height("100%")
.hitTestBehavior(HitTestMode.None)
}.height(100).width('100%').backgroundColor(Color.Black)
}
}
更多推荐


所有评论(0)