HarmonyOS List嵌套 水平滑动Scroll 如何实现每个listItem都同时水平滑动？

Question

需要实现一个列表： 首列固定， 后边的其他列可以左右滑动，如何实现这些ListItem 同时左右滑动？

Answer 1

请参考示例如下：

import { LightWeightMap } from '@kit.ArkTS'

const LeftItemWidth = 100
const RightItemWidth = 100

@Component
struct ItemComponent {
  private title: string = ''
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  private scroller: Scroller = new Scroller()
  private static instance: ItemComponent;

  public static getContext(): ItemComponent {
    if (!ItemComponent.instance) {
      ItemComponent.instance = new ItemComponent();
    }
    return ItemComponent.instance;
  }

  @Builder
  RightSingleLineList() {
    List({ scroller: this.scroller }) {
      ForEach(this.arr, (item: string, index: number) => {
        ListItem() {
          Text('' + index)
            .height(100)
            .width(RightItemWidth)
            .fontSize(16)
            .textAlign(TextAlign.Start)
            .borderRadius(0)
            .padding(10)
            .backgroundColor(0xFFFFFF)
        }
      }, (item: string) => item)
    }
    .height('100%')
    .width('100%')
    .layoutWeight(1)
    .listDirection(Axis.Horizontal)
    .scrollBar(BarState.Off)
    .friction(0.6)
    .nestedScroll({
      scrollForward: NestedScrollMode.PARENT_FIRST,
      scrollBackward: NestedScrollMode.PARENT_FIRST
    })
    .divider({ strokeWidth: 0.5, color: 0xeeeeee }) // 每行之间的分界线
    .edgeEffect(EdgeEffect.None) // 边缘效果设置为Spring
    .onScroll((scrollOffset: number, scrollState: ScrollState) => {
      console.log('list scroll' + this.scroller.currentOffset().yOffset.toString())
    })
    .onScrollStop(() => {
    })
  }

  build() {
    Column() {
      this.RightSingleLineList()
      Line().width("100%").height(0.5).backgroundColor(0xeeeeee)
    }.height(100)
  }
}


@Entry
@Component
struct ListExample {
  private scrollerMap: LightWeightMap<Object, Scroller> = new LightWeightMap();
  private leftGroupArr: string[] = ['基本信息', '车身', '发动机']
  private topRightArr: string[] =
    ['车型1', '车型2', '车型3', '车型4', '车型5', '车型6', '车型7', '车型8', '车型9', '车型10']
  @State arr: string[] =
    ['车长', '车高', '内饰', '轮毂', '系统', '电机', '马力', '音响', '悬架', '座椅通风', '自动泊车', '后备箱容积',
      '座椅记忆']
  @State scrollOffset: number = 0
  fullScroller: Scroller = new Scroller()
  hScroller: Scroller = new Scroller()
  tempScroller: Scroller = new Scroller()
  topRightScroller: Scroller = new Scroller()
  @State rightHeaderOffset: number = 0

  build() {
    Column() {
      this.contentBuilder()
    }
  }

  @Builder
  leftStickyHeader(title: string) {
    Column() {
      Text(title)
        .height('100%')
        .textAlign(TextAlign.Start)
        .padding(10)
        .width('100%')
        .fontSize(15)
        .fontWeight(FontWeight.Bolder)
    }.height(60).width('100%').backgroundColor(0xEEEEEE)
  }

  @Builder
  rightStickyHeader(index: number) {
    Column() {
      Text(index == 0 ? "官方配置>" : '●标配 ○选配 —无').height('100%')
        .position({ x: 100 + this.rightHeaderOffset, y: 0 })
        .textAlign(TextAlign.End)
        .width(150)
    }.height(60).width('100%').backgroundColor(0xEEEEEE)
  }

  // 顶部固定
  @Builder
  topFixed() {
    Row() {
      Column() {
        Text('共11款车').fontSize(15)
        Toggle({ type: ToggleType.Switch, isOn: false }).height(30).width(50)
        Text('只看差异').fontSize(15).fontWeight(FontWeight.Bolder)
      }
      .width(LeftItemWidth)
      .height(100)
      .backgroundColor(Color.White)
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Start)
      .padding(10)

      // 分割线
      Line().height(100).width(0.5).backgroundColor(0xeeeeee)
      // 对比列表
      List({ scroller: this.topRightScroller }) {
        ForEach(this.topRightArr, (item: string, index: number) => {
          ListItem() {
            Text(item)
              .height(100)
              .width(RightItemWidth)
              .fontSize(16)
              .textAlign(TextAlign.Start)
              .borderRadius(0)
              .padding(10)
              .backgroundColor(0xFFFFFF)
          }
        }, (item: string) => item)
      }.listDirection(Axis.Horizontal)
      .divider({ strokeWidth: 0.5, color: 0xeeeeee })
      .scrollBar(BarState.Off)
    }.height(100).width('100%').backgroundColor(Color.Pink)

  }

  @Builder
  leftList() {
    List({ scroller: this.tempScroller }) {
      ForEach(this.leftGroupArr, (item: string, index: number) => {
        ListItemGroup({ header: this.leftStickyHeader(item) }) {
          ForEach(this.arr, (item: string, index: number) => {
            ListItem() {
              Column() {
                Text(item)
                  .width(LeftItemWidth)
                  .height('100%')
                  .fontSize(16)
                  .textAlign(TextAlign.Start)
                  .backgroundColor(0xFFFFFF)
                  .padding(10)
                  .layoutWeight(1)
                Line().width("100%").height(0.5).backgroundColor(0xeeeeee)
              }
            }
            .height(100)
          }, (item: string) => item)
        }
      })
    }
    .sticky(StickyStyle.Header)
    .listDirection(Axis.Vertical) // 排列方向
    .scrollBar(BarState.Off)
    .friction(0.6)
    .divider({ strokeWidth: 0, color: 0xdddddd })
    .edgeEffect(EdgeEffect.None) // 边缘效果设置为Spring
    .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.PARENT_FIRST })
    .width(LeftItemWidth)
    .visibility(Visibility.Visible)
    .onScrollFrameBegin((offset: number, state: ScrollState) => {
      this.fullScroller.scrollTo({
        xOffset: 0,
        yOffset: this.tempScroller.currentOffset().yOffset + offset,
        animation: false
      })
      return { offsetRemain: offset }
    })
  }

  @Builder
  rightScroll() {
    Scroll(this.hScroller) {
      List({ initialIndex: 0, scroller: this.fullScroller }) {
        ForEach(this.leftGroupArr, (item: string, index: number) => {
          ListItemGroup({ header: this.rightStickyHeader(index) }) {
            ForEach(this.arr, (item: string, index: number) => {
              ItemComponent({ title: this.arr[index] })
            }, (item: string) => item)
          }
        })
      }
      .sticky(StickyStyle.Header)
      .listDirection(Axis.Vertical)
      .scrollBar(BarState.Off)
      .friction(0.6)
      .edgeEffect(EdgeEffect.None)
      .width('100%')
      .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.PARENT_FIRST })
      .onScrollFrameBegin((offset: number, state: ScrollState) => {
        this.tempScroller.scrollTo({
          xOffset: 0,
          yOffset: this.fullScroller.currentOffset().yOffset + offset,
          animation: false
        })
        return { offsetRemain: offset }
      })
    }
    .position({ x: LeftItemWidth, y: 0 })
    .onScroll((scrollOffset: number, scrollState: ScrollState) => {
      console.log('tag' + scrollOffset)
      this.rightHeaderOffset = this.hScroller.currentOffset().xOffset
      this.topRightScroller.scrollTo({ xOffset: this.hScroller.currentOffset().xOffset, yOffset: 0 })
    })
    .edgeEffect(EdgeEffect.None) // 边缘效果设置为Spring
    .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.PARENT_FIRST })
    .width(RightItemWidth * 10 + 9 * 0.5)
    .scrollable(ScrollDirection.Horizontal)
    .backgroundColor(0xDCDCDC)
    .padding({ top: 0 })

  }

  @Builder
  contentBuilder() {
    Column() {
      this.topFixed()
      Row() {
        this.leftList()
        this.rightScroll()
        Line().height('100%').width(0.5).backgroundColor('#EEEEEE').position({ x: LeftItemWidth })
      }.justifyContent(FlexAlign.Start)
      .alignItems(VerticalAlign.Top)
    }.height('100%').justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start)
  }
}

目前左右listItem必须设置相同的高度值，才能保证左右的listItem对齐。如果两个listItem的高度值不设置，根据内容自适应时，两个listItem就无法对齐。所以高度值不固定时无法很好实现左右listItem对齐的效果。