纯血鸿蒙APP实战开发——二级联动

原创

小帅聊鸿蒙

发布于 2024-12-29 20:43:35

4650

文章被收录于专栏：鸿蒙开发笔记鸿蒙开发笔记

介绍

本示例主要介绍了 List组件实现二级联动（Cascading List）的场景。该场景多用于短视频中拍摄风格的选择、照片编辑时的场景的选择。

效果图预览

使用说明：

滑动二级列表侧控件，一级列表随之滚动。
点击一级列表，二级列表随之滚动。

实现思路

构造懒加载数据源类型MyDataSource。
一二级列表分别绑定不同的Scroller对象，一级列表(tagLists)绑定classifyScroller对象，二级列表绑定scroller对象。

@Component
export struct SecondaryLinkExample {
  private classifyScroller: Scroller = new Scroller(); // 一级列表Scroller对象
  private scroller: Scroller = new Scroller(); // 二级列表Scroller对象

  build() {
    ...
    
    Row() {
      // 一级列表
      List({ scroller: this.classifyScroller, initialIndex: 0 }) {
        ...
      }
    }
  }
}

通过循环，构造一二级列表数据。

ForEach(this.tagLists, (item: string, index: number) => {
  ListItem() {
    ...
  }
})

DD一下： `鸿蒙开发各类文档，可关注公众号<程序猿百晓生>获取。`

1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案） 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

点击一级列表后，通过一级列表的索引获取二级列表的索引，调用scrollToIndex方法将一二级列表滚动到指定索引值。

// 根据一级列表索引值获取二级列表索引值
findItemIndex(index: number): number {
    return this.records[index];
  }

build(){
  Column() {
    ...
  }.onClick(() => {	// 一级列表点击事件
    this.currentTagIndex = index;
    let itemIndex = this.findItemIndex(index);
    this.scroller.scrollToIndex(itemIndex, true);
  })
}

滑动二级列表触发组件滚动事件后，获取到列表可视区域第一个item对应的索引值，通过二级列表索引获取一级列表索引，调用scrollToIndex方法将一级列表滚动到指定索引值。

@State @Watch('onIndexChange') currentTagIndex: number = 0; // 一级列表焦点索引值
private isClickTagList: boolean = false; // 是否点击一级列表
private classifyScroller: Scroller = new Scroller(); // 一级列表Scroller对象

// 根据二级列表索引值获取对应一级列表索引
findClassIndex(index: number): number {
  ...
}

build() {
  List() {
    ...
  }.onScrollIndex((start: number) => {
    let currentClassIndex = this.findClassIndex(start);
    // 当前二级列表元素是否属于当前一级列表类
    if (currentClassIndex !== this.currentTagIndex && this.isClickTagList !== true) {
      this.currentTagIndex = currentClassIndex;
      this.classifyScroller.scrollToIndex(currentClassIndex, true); // 滚动到指定位置
    }
  })
}

高性能知识点

本示例使用了LazyForEach进行数据懒加载，List布局时会根据可视区域按需创建ListItem组件，并在ListItem滑出可视区域外时销毁以降低内存占用。

工程结构&模块类型

   secondarylinkage                                // har
   |---pages
   |   |---DataType.ets                            // 数据类型定义 
   |   |---SecondaryLinkExample.ets                // 二级联动功能实现页面