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

请参考示例如下：

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)
  }
}
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.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.

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