HarmonyOS NEXT应用开发案例——二级联动

介绍

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

效果图预览

使用说明

  1. 滑动二级列表侧控件,一级列表随之滚动。
  2. 点击一级列表,二级列表随之滚动。

实现思路

  1. 构造懒加载数据源类型MyDataSource

  2. 一二级列表分别绑定不同的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 }) {
         ...
       }
     }

    }
    }

  3. 通过循环,构造一二级列表数据。

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

  4. 点击一级列表后,通过一级列表的索引获取二级列表的索引,调用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);
    })
    }

  5. 滑动二级列表触发组件滚动事件后,获取到列表可视区域第一个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                // 二级联动功能实现页面 

模块依赖

当前场景依赖common模块的FunctionDescription组件,主要用于功能场景文本介绍。详细可参考FunctionDescription文件。

参考资料

LazyForEach详细用法

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:https://qr21.cn/FV7h05

入门必看:https://qr21.cn/FV7h05

  1. 应用开发导读(ArkTS)

  2. ......

HarmonyOS 概念:https://qr21.cn/FV7h05

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念

  2. 构建第一个ArkTS应用

  3. ......

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识

  2. 配置文件

  3. 应用数据管理

  4. 应用安全管理

  5. 应用隐私保护

  6. 三方应用调用管控机制

  7. 资源分类与访问

  8. 学习ArkTS语言

  9. ......

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发

  2. UI开发

  3. 公共事件与通知

  4. 窗口管理

  5. 媒体

  6. 安全

  7. 网络与链接

  8. 电话服务

  9. 数据管理

  10. 后台任务(Background Task)管理

  11. 设备管理

  12. 设备使用信息统计

  13. DFX

  14. 国际化开发

  15. 折叠屏系列

  16. ......

鸿蒙开发面试真题(含参考答案):https://qr21.cn/FV7h05

相关推荐
小趴菜82275 小时前
安卓接入Kwai广告源
android·kotlin
晚风(●•σ )5 小时前
【华为 ICT & HCIA & eNSP 习题汇总】——题目集24
计算机网络·华为·ensp
云雾J视界5 小时前
数字化转型的核心引擎:解读华为“业务重构”三层设计模型
华为·业务重构·数字化设计·y模型·三层数字化·流程化组织·t型结构
江湖有缘5 小时前
基于华为openEuler部署webmin服务器管理工具
运维·服务器·华为
2501_916013746 小时前
iOS 混淆与 App Store 审核兼容性 避免被拒的策略与实战流程(iOS 混淆、ipa 加固、上架合规)
android·ios·小程序·https·uni-app·iphone·webview
程序员江同学7 小时前
Kotlin 技术月报 | 2025 年 9 月
android·kotlin
码农的小菜园7 小时前
探究ContentProvider(一)
android
无风听海8 小时前
HarmonyOS之 @Provide 装饰器实现跨组件双向状态同步
华为·harmonyos
安卓开发者8 小时前
鸿蒙NEXT传统蓝牙开发指南:从基础到实战的完整解决方案
harmonyos
时光少年9 小时前
Compose AnnotatedString实现Html样式解析
android·前端