HarmonyOS @ObservedV2装饰器和@Track装饰器配合List组件,点击ListItem添加选中效果怎么做?

HarmonyOS
2025-01-09 14:14:08
9129浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
Excelsior_abit

ListItem添加选中效果可以参考demo:

@Entry
@Component
struct ListItemExample {
  @State arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  @State select: number[] = []

  build() {
    Column({ space: 10 }) {
      List({ space: 20 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text(''+ item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .backgroundColor(this.select.includes(item) ?'#ffa0a0':'#ffffff')
              .onClick(() => {
                this.select = [item]
              })
          }
        }, (item: number) => item.toString())
      }
      .listDirection(Axis.Vertical)
      .scrollBar(BarState.Off)
      .friction(0.6)
    }
  }
}
  • 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.
分享
微博
QQ
微信
回复
2025-01-09 17:44:53
相关问题
@Track装饰有什么作用?
1518浏览 • 1回复 待解决
装饰 @Styles @Extend
1346浏览 • 1回复 待解决
HarmonyOS 怎么自定义装饰
738浏览 • 1回复 待解决
HarmonyOS 关于组件装饰的问题
921浏览 • 1回复 待解决
HarmonyOS 装饰问题class
804浏览 • 1回复 待解决
HarmonyOS @Concurrent装饰报错
871浏览 • 1回复 待解决
HarmonyOS @Observed装饰问题咨询
882浏览 • 1回复 待解决
HarmonyOS 装饰数据变化监听
581浏览 • 1回复 待解决