基于List和Scroller实现双向滚动列表

介绍

本示例基于List组件和Scroller控制器，实现了纵向和横向双向滚动的列表，包含车型配置表和股票信息表两种场景。同时将双向滚动列表功能抽取为独立的HAR模块（tableview），开发者可直接引用，无需自行处理多列表滚动同步逻辑。

效果预览

首页	汽车表格场景	股票表格场景

使用说明

点击首页"汽车表格场景"按钮，跳转到汽车表格场景页面，列表可以横向和纵向滑动。
点击首页"股票表格场景"按钮，跳转到股票表格场景，列表可以横向和纵向滑动。

目录结构

├──entry                                       // 应用入口模块
│  ├──src/main/ets 
│  │  ├──entryability
│  │  │  └──EntryAbility.ets                   // 程序入口类
│  │  ├──entrybackupability
│  │  │  └──EntryBackupAbility.ets             // 数据备份恢复类
│  │  ├──pages
│  │  │  └──Index.ets                          // 应用入口页
│  │  ├──view
│  │  │  ├──CarSpecTableView.ets               // 车型配置表页面
│  │  │  └──StockInfoTableView.ets             // 股票信息表页面
│  │  └──viewmodel
│  │     ├──CarSpecTableViewModel.ets          // 车型配置表ViewModel
│  │     └──StockInfoTableViewModel.ets        // 股票信息表ViewModel
│  └──src/main/resources                       // 应用静态资源目录
└──tableview                                   // 双向滚动表格HAR模块
   ├──src/main/ets
   │  ├──common
   │  │  ├──BuilderNodePool.ets                // BuilderNode对象池与整行预创建
   │  │  ├──DataSource.ets                     // LazyForEach数据源
   │  │  ├──Logger.ets                         // 日志工具
   │  │  └──RowPrebuildCallback.ets            // 帧空闲时整行预创建调度
   │  ├──components
   │  │  ├──DualScrollTable.ets                // 双向滚动表格主组件
   │  │  ├──LeftListItem.ets                   // 左侧列表项组件
   │  │  ├──TopListItem.ets                    // 顶部列表项组件
   │  │  └──RightSubList.ets                   // 右侧子列表组件
   │  ├──model
   │  │  └──TableDataModel.ets                 // 数据模型
   │  ├──viewmodel
   │  │  └──BaseTableViewModel.ets             // ViewModel抽象基类
   │  └──constant 
   │     └──CommonConstants.ets                // 通用常量
   ├──src/main/resources                       // HAR资源目录
   └──Index.ets                                // HAR导出入口

具体实现

横向滚动同步：顶部List与右侧外层Scroll在各自的onScrollFrameBegin()回调中，通过Scroller.scrollTo()互相同步xOffset，确保列对齐。
纵向滚动同步：左侧List与右侧内层List在各自的onScrollFrameBegin()回调中，通过Scroller.scrollTo()互相同步yOffset，确保行对齐。
列表渲染使用LazyForEach循环渲染和组件复用@ReusableV2以提升滚动性能。