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)
  }
}
Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐