HarmonyOS 鸿蒙Next中List列表怎么实现手指移动到子元素，动态高亮背景

HarmonyOS 鸿蒙Next中List列表怎么实现手指移动到子元素，动态高亮背景

怎么实现，手指点击其中一个元素，更具index变化更新元素背景色，哪个事件可以获取

List(){
  ForEach(this.params, (item:macInfo|extendTools, index: number) => {
    ListItem() {
      Text(item.name)
        .width(CommonConstants.FULL_SIZE)
        .height(CommonConstants.FULL_SIZE)
        .fontSize(CommonConstants.DEFAULT_16)
        .fontColor($r('app.color.promptAction_text'))
        .textAlign(TextAlign.Center)
    }
    .borderWidth({ bottom: 1 })
    .borderStyle(BorderStyle.Solid)
    .borderColor('#CCCCCC')
    .height(CommonConstants.DEFAULT_48)
    .backgroundColor(this.curIndex === index ? Color.Green : $r('app.color.promptAction_bg'))
    .onTouch((event) => {
      Logger.info(`evet = ${index}, ${JSON.stringify(event)}`)
    })

  }, (item:macInfo|extendTools) => item.name)
}

更多关于HarmonyOS 鸿蒙Next中List列表怎么实现手指移动到子元素，动态高亮背景的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

在List组件上添加onTouch事件监听，计算当前触摸位置对应的索引。示例代码如下：

@Entry
@Component
struct ListPage {
  private arr: number[] = []
  private colorArr: string[] = ['#00ff41', '#D2233A', '#ffacb821', '#ff1010d2', '#24f2f4']
  @State currentIndex: number = -1 // 当前选中项索引
  private scroller: Scroller = new Scroller() // 滚动控制器

  aboutToAppear() {
    for (let i = 0; i < 5; i++) {
      this.arr.push(i)
    }
  }

  build() {
    Column() {
      List({ scroller: this.scroller }) {
        ForEach(this.arr, (item: number, index: number) => {
          ListItem() {
            Text(`Item ${index + 1}`)
              .fontSize(20)
              .width('100%')
              .height(80)
              .textAlign(TextAlign.Center)
          }
          .backgroundColor(this.currentIndex === index
            ? this.colorArr[index % this.colorArr.length]
            : Color.White)
          .borderRadius(10)
          .borderColor('#CCCCCC')
          .margin({ top: 8 })
        })
      }
      .onTouch((event: TouchEvent) => {
        // 按下移动时，根据移动距离判断手指处于哪个ListItem
        if (event.type === TouchType.Down || event.type === TouchType.Move) {
          let touchY = event.touches[0].y
          let scrollY = this.scroller.currentOffset().yOffset
          let itemHeight = 80// 需与实际列表项高度一致
          let index = Math.floor((touchY + scrollY) / itemHeight)
          if (index >= 0 && index < this.arr.length) {
            this.currentIndex = index
          }
        } else if (event.type === TouchType.Up) { // 手指抬起时，重置currentIndex
          this.currentIndex = -1
        }
      })
    }
    .padding(12)
  }
}

更多关于HarmonyOS 鸿蒙Next中List列表怎么实现手指移动到子元素，动态高亮背景的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


楼主通过@State装饰器管理当前选中索引，再利用ListItem的onClick或onTouch事件获取交互位置，根据当前索引与循环索引是否匹配来切换背景色！！

[@State](/user/State) curIndex: number = -1;

List() {

  ForEach(this.params, (item: macInfo|extendTools, index: number) => {

    ListItem() {

      Text(item.name)

      // ...原有样式

    }

    .backgroundColor(this.curIndex === index ? 
      $r('app.color.selected_bg') : 
      $r('app.color.normal_bg'))

    .onClick(() => {

      this.curIndex = index; // 点击时更新选中索引

      // 触发后续业务逻辑

    })
  }, (item: macInfo|extendTools) => item.id) // 使用唯一标识

}

【背景知识】

  • List：列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
  • ListItem：用来展示列表具体item，必须配合List来使用。该组件的父组件只能是List或者ListItemGroup。
  • onClick：单击作为常用的手势，可以方便地使用onClick接口实现。尽管被称为事件，它实际上是基本手势类型，等同于将count配置为1的TapGesture，即单击手势。

【解决方案】

给ListItem添加onClick事件，点击时将当前ListItem的index赋值给中间变量currentIndex，用于背景颜色判断。示例代码如下：

@Entry
@Component
struct ListPage {
  private arr: number[] = []
  private colorArr: string[] = ['#00ff41', '#D2233A', '#ffacb821', '#ff1010d2', '#24f2f4']
  @State currentIndex: number = 0

  aboutToAppear() {
    for (let i = 0; i < 5; i++) {
      this.arr.push(i)
    }
  }

  build() {
    List() {
      ForEach(this.arr, (item: number, index: number) => {
        ListItem() {
          Text(`${item}`)
            .width('100%')
            .height('100%')
            .fontSize(16)
            .textAlign(TextAlign.Center)
        }
        .borderWidth({ bottom: 1 })
        .borderStyle(BorderStyle.Solid)
        .borderColor('#CCCCCC')
        .height(48)
        .onClick(() => {
          this.currentIndex = index
        })
        .backgroundColor(this.currentIndex === index ? this.colorArr[this.currentIndex] : '#ffffff')
      }, (item: string) => item)
    }
  }
}

这个是点击，我是想手指在第一个元素按下，然后不离开屏幕，移动到最后一个元素，移动过程中，手指所处的元素变背景色，其它恢复，

楼主你好，麻烦看下四楼最新留言，谢谢，

在HarmonyOS Next中，使用ArkUI的List组件实现手指移动高亮效果，可通过自定义子组件样式结合触摸事件实现。在ListItem子组件中设置Touchable区域，监听onTouch事件，通过状态变量记录当前触摸位置索引。使用条件渲染动态修改被触摸项的backgroundColor样式属性。示例代码片段：

@State activeIndex: number = -1;

List() {
  ForEach(this.data, (item, index) => {
    ListItem() {
      Text(item.name)
        .backgroundColor(this.activeIndex === index ? '#DDDDDD' : '#FFFFFF')
    }
    .onTouch((event) => {
      if (event.type === TouchType.Move) {
        this.activeIndex = index;
      }
    })
  })
}

在HarmonyOS Next中实现List列表项高亮效果，可以通过onTouch事件结合状态管理来实现。根据你提供的代码，建议这样优化：

  1. 使用@State装饰器管理当前选中项索引：
[@State](/user/State) curIndex: number = -1;
  1. 修改ListItem的onTouch事件处理：
.onTouch((event) => {
    if(event.type === TouchType.Down || event.type === TouchType.Move){
        this.curIndex = index;
    } else if(event.type === TouchType.Up || event.type === TouchType.Cancel){
        this.curIndex = -1;
    }
})
  1. 保持现有的backgroundColor判断逻辑：
.backgroundColor(this.curIndex === index ? Color.Green : $r('app.color.promptAction_bg'))

这样实现后，当手指按下或移动时会高亮当前项，抬起或离开时取消高亮。事件类型判断确保只在触摸时显示高亮效果。

回到顶部