OpenHarmony ListView怎样联动

在 OpenHarmony（ArkUI） 里，所谓 ListView 联动，通常有以下几种常见场景，我分别说明做法（以 ArkTS + List 组件 为例）：

一、左侧分类 + 右侧内容联动（最常见）

场景

• 左边 List 是分类（如：水果、蔬菜）
• 右边 List 是内容
• 点击左边，右边滚动到对应位置
• 右边滑动，左边高亮对应分类

核心思路

1. 使用 scroller 控制滚动
2. 用 index 记录当前选中项
3. 点击左侧 → 右侧 scrollToIndex
4. 右侧滚动 → 更新左侧选中

示例代码（简化版）

@Entry
@Component
struct LinkListExample {
  private leftScroller: Scroller = new Scroller()
  private rightScroller: Scroller = new Scroller()

  @State leftIndex: number = 0
  @State rightIndex: number = 0

  private categories: string[] = ['水果', '蔬菜', '肉类']
  private data: string[][] = [
    ['苹果', '香蕉', '橘子'],
    ['白菜', '萝卜', '西红柿'],
    ['猪肉', '牛肉', '鸡肉']
  ]

  build() {
    Row() {
      // 左侧列表
      List({ scroller: this.leftScroller }) {
        ForEach(this.categories, (item, index) => {
          ListItem() {
            Text(item)
              .fontColor(this.leftIndex === index ? '#f00' : '#000')
              .onClick(() => {
                this.leftIndex = index
                this.rightScroller.scrollToIndex(index)
              })
          }
        })
      }
      .width('30%')

      // 右侧列表
      List({ scroller: this.rightScroller }) {
        ForEach(this.data, (group, index) => {
          ListItemGroup() {
            ForEach(group, (item) => {
              ListItem() {
                Text(item)
              }
            })
          }
          .onAppear(() => {
            this.leftIndex = index
          })
        })
      }
      .width('70%')
    }
  }
}

✅ 关键点

• scrollToIndex() 实现点击联动
• onAppear() 实现滑动联动

二、两个 List 双向滚动联动

场景

• 上方横向 List
• 下方纵向 List
• 互相影响

思路

• 使用 @State 保存当前 index
• 一个 List 滚动结束 → 更新另一个

this.topScroller.scrollToIndex(this.currentIndex)

三、ListView 与 ScrollView 联动

• List 负责内容
• ScrollView 负责指示器
• 通过 onScroll 监听偏移量

.onScroll((offset) => {
  this.indicatorY = offset / total * maxY
})

四、常见坑点提醒 ⚠️

1. 一定要用 Scroller

   private scroller: Scroller = new Scroller()
   

2. scrollToIndex 默认是平滑滚动

   scrollToIndex(index, true)
   

3. ListItemGroup 才能正确联动分组
4. 联动状态建议用 @State 或 @Link

五、如果你用的是旧版（ListContainer）

OpenHarmony API 8 之前

• 使用 ListContainer
• 通过 setSelectedIndex()
• 手动计算 scrollTo

六、我可以继续帮你

你可以告诉我：

• ✅ OpenHarmony 版本（API 9 / 10 / 11？）
• ✅ 是 ArkTS 还是 JS
• ✅ 具体联动形式（点击？滑动？双向？）

我可以给你 可直接跑的完整 Demo。