OpenHarmony实战开发-如何实现列表的二级联动

最新推荐文章于 2024-06-03 18:00:58 发布
最新推荐文章于 2024-06-03 18:00:58 发布
阅读量744 收藏 8
点赞数 27
分类专栏： HarmonyOS 鸿蒙 OpenHarmony 文章标签： harmonyos OpenHarmony HarmonyOS 鸿蒙系统 华为 鸿蒙应用开发 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70749039/article/details/139130969
版权
鸿蒙 同时被 3 个专栏收录
658 篇文章 16 订阅
订阅专栏
HarmonyOS
651 篇文章 6 订阅
订阅专栏
OpenHarmony
646 篇文章 7 订阅
订阅专栏

场景介绍

列表的二级联动（Cascading List）是指根据一个列表（一级列表）的选择结果，来更新另一个列表（二级列表）的选项。这种联动可以使用户根据实际需求，快速定位到想要的选项，提高交互体验。例如，短视频中拍摄风格的选择、照片编辑时的场景的选择，本文即为大家介绍如何开发二级联动。

效果呈现

本例最终效果如下：

在这里插入图片描述

运行环境

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：

  • IDE: DevEco Studio 3.1 Beta2
  • SDK: Ohos_sdk_public 3.2.11.9 (APIVersion 9 Release)

实现思路

  • 数字标题(titles)以及下方的数字列表(contents)分组展示：通过两个List组件分别承载数字标题和数字项。
  • 滚动数字列表，上方数字标题也随之变动：通过List组件的onScrollIndex事件获取到当前滚动数字的索引，根据该索引计算出对应标题数字的索引，然后通过Scroller的scrollToIndex方法跳转到对应的数字标题，且通过Line组件为选中的标题添加下划线。
  • 点击数字标题，下方的数字列表也随之变化：首先获取到点击数字标题的索引，通过该索引计算出下方对应数字的起始项索引，然后通过scroller的scrollToIndex方法跳转到对应索引的数字项。

开发步骤

根据实现思路，具体实现步骤如下：

1.首先构建列表数据，在records中记录数字列表中各个数字的首项索引值，具体代码块如下：

...
@State typeIndex: number = 0
private tmp: number = 0
private titles: Array<string> = ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
private contents: Array<string> = ["1", "1", "1", "1", "1", "1", "1", "1", "1", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "3"
    , "3", "3", "3", "3", "4", "4", "4", "5", "5", "5", "5", "5", "6", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7",
    "8", "8", "8", "8", "8", "9", "9", "9", "9", "9", "9", "9", "9", "9", "9", "9"]
private records: Array<number> = [0, 9, 21, 26, 29, 34, 35, 47, 52, 63]
private classifyScroller: Scroller = new Scroller();
private scroller: Scroller = new Scroller();
...

数字标题列表：具体代码块如下：

...
build() {
  Column({ space: 0 }) {
    List  ({ space: 50, scroller: this.classifyScroller, initialIndex: 0 }) {
      ForEach(this.titles, (item, index) => {
        ListItem() {
          Column() {
            Text(item)
              .fontSize(14)
            ...  
          }
        }
      }
      ...
    }
    .listDirection(Axis.Horizontal)
    .height(50)
  }
}

数字列表，具体代码块如下：

List({ space: 20, scroller: this.scroller }) {
  ForEach(this.contents, (item, index) => {
    ListItem() {
      Column({ space: 5 }) {
        Image($r("app.media.app_icon"))
          .width(40)
          .height(40)
        Text(item)
          .fontSize(12)
      }
      ...
    }
  }
}
.listDirection(Axis.Horizontal) //列表排列方向水平
.edgeEffect(EdgeEffect.None) //不支持滑动效果

2.数字标题的索引值判断，根据当前滚动数字的首项索引值计算出数字标题的索引，具体代码块如下：

...
findClassIndex(ind: number) { // 当前界面最左边图的索引值ind
  let ans = 0
  // 定义一个i 并进行遍历 this.records.length = 10
  for (let i = 0; i < this.records.length; i++) { 
    // 判断ind在this.records中那两个临近索引值之间
    if (ind >= this.records[i] && ind < this.records[i + 1]) {
      ans = i
      break
    }
  }
  return ans
}
findItemIndex(ind: number) { 
  // 将ind重新赋值给类型标题列表的索引值
  return this.records[ind]
}
...

通过Line组件构成标题下滑线，具体代码块如下：

...
if (this.typeIndex == index) {
  Line()
    //根据长短判断下划线
    .width(item.length === 2 ? 25 : item.length === 3 ? 35 : 50)
    .height(3)
    .strokeWidth(20)
    .strokeLineCap(LineCapStyle.Round)
    .backgroundColor('#ffcf9861')
}
...

3.点击数字标题，数字列表随之滑动：首先获取到点击数字标题的索引，通过该索引计算出下方对应数字的起始项索引，然后通过scroller的scrollToIndex方法跳转到对应索引的数字项，具体代码块如下：

...
.onClick(() => {
  this.typeIndex = index
  this.classifyScroller.scrollToIndex(index)
  let itemIndex = this.findItemIndex(index)
  console.log("移动元素：" + itemIndex)
  this.scroller.scrollToIndex(itemIndex)
})
...

4.数字列表的滑动或点击导致数字标题的变动：通过List组件中onScrollIndex事件获取的到屏幕中最左边数字的索引值start，然后通过该索引值计算出对应的数字标题的索引currentClassIndex，然后通过scrollToIndex控制数字标题跳转到对应索引处，具体代码块如下：

...
.onScrollIndex((start) => {
  let currentClassIndex = this.findClassIndex(start)
  console.log("找到的类索引为： " + currentClassIndex)
  if (currentClassIndex != this.tmp) {
    this.tmp = currentClassIndex
    console.log("类别移动到索引： " + currentClassIndex)
    this.typeIndex = currentClassIndex
    this.classifyScroller.scrollToIndex(currentClassIndex)
  }
})
...

完整代码

完整示例代码如下：

@Entry
@Component
struct TwoLevelLink {
  @State typeIndex: number = 0
  private tmp: number = 0
  private titles: Array<string> = ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
  private contents: Array<string> = ["1", "1", "1", "1", "1", "1", "1", "1", "1", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "2", "3"
    , "3", "3", "3", "3", "4", "4", "4", "5", "5", "5", "5", "5", "6", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7", "7",
    "8", "8", "8", "8", "8", "9", "9", "9", "9", "9", "9", "9", "9", "9", "9", "9"]
  private colors: Array<string> = ["#18183C", "#E8A027", "#D4C3B3", "#A4AE77", "#A55D51", "#1F3B54", "#002EA6", "#FFE78F", "#FF770F"]
  private records: Array<number> = [0, 9, 21, 26, 29, 34, 35, 47, 52, 63]
  private classifyScroller: Scroller = new Scroller();
  private scroller: Scroller = new Scroller();
  // 根据数字列表索引计算对应数字标题的索引
  findClassIndex(ind: number) {
    let ans = 0
    for (let i = 0; i < this.records.length; i++) {
      if (ind >= this.records[i] && ind < this.records[i + 1]) {
        ans = i
        break
      }
    }
    return ans
  }
  // 根据数字标题索引计算对应数字列表的索引
  findItemIndex(ind: number) {
    return this.records[ind]
  }
  build() {
    Column({ space: 0 }) {
      List  ({ space: 50, scroller: this.classifyScroller, initialIndex: 0 }) {
        ForEach(this.titles, (item, index) => {
          ListItem() {
            Column() {
              Text(item)
                .fontSize(24)
              if (this.typeIndex == index) {
                Line()
                  .width(item.length === 2 ? 25 : item.length === 3 ? 35 : 50)
                  .height(3)
                  .strokeWidth(20)
                  .strokeLineCap(LineCapStyle.Round)
                  .backgroundColor('#ffcf9861')
              }
            }
            .onClick(() => {
              this.typeIndex = index
              this.classifyScroller.scrollToIndex(index)
              let itemIndex = this.findItemIndex(index)
              console.log("移动元素：" + itemIndex)
              this.scroller.scrollToIndex(itemIndex)
            })
          }
        })
      }
      .listDirection(Axis.Horizontal)
      .height(50)
      List({ space: 20, scroller: this.scroller }) {
        ForEach(this.contents, (item, index) => {
          ListItem() {
            Column({ space: 5 }) {
              Text(item)
                .fontSize(30)
                .fontColor(Color.White)
            }
            .width(60)
            .height(60)
            .backgroundColor(this.colors[item-1])
            .justifyContent(FlexAlign.Center)
            .onClick(() => {
              this.scroller.scrollToIndex(index)
            })
          }
        })
      }
      .listDirection(Axis.Horizontal) //列表排列方向水平
      .edgeEffect(EdgeEffect.None) //不支持滑动效果
      .onScrollIndex((start) => {
        let currentClassIndex = this.findClassIndex(start)
        console.log("找到的类索引为： " + currentClassIndex)
        if (currentClassIndex != this.tmp) {
          this.tmp = currentClassIndex
          console.log("类别移动到索引： " + currentClassIndex)
          this.typeIndex = currentClassIndex
          this.classifyScroller.scrollToIndex(currentClassIndex)
        }
      })
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

参考

List

Line

Scroll

我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI、实战开发视频教程》以及《鸿蒙生态应用开发白皮书V2.0PDF》《鸿蒙开发学习手册》（共计890页）鸿蒙开发资料等…希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

在这里插入图片描述

应用开发中级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

应用开发中高级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

南北双向高工技能基础：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

全网首发-工业级 南向设备开发就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……
在这里插入图片描述

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
在这里插入图片描述

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
在这里插入图片描述

不入流HarmonyOS开发
关注
专栏目录
鸿蒙（ArkUI）开发：实现二级联动
2301_76813281的博客
01-25 1640
列表的二级联动（Cascading List）是指根据一个列表（一级列表）的选择结果，来更新另一个列表（二级列表）的选项。这种联动可以使用户根据实际需求，快速定位到想要的选项，提高交互体验。例如，短视频中拍摄风格的选择、照片编辑时的场景的选择，本文即为大家介绍如何开发二级联动。
2024年HarmonyOS Next 数字滚动动效实现(3)，淘汰了80%的HarmonyOS鸿蒙面试者
2401_84853560的博客
05-13 491
|—DigitalScrollDetail.ets // 数字滚动组件。| |—DigitalScrollExample.ets // 功能页面。| |—ConstData.ets // 常量数据。// 动画执行结束后，更新上一次数据值。
OpenHarmony开发实战：二级联动（ArkTS）
shudaoshanQAQ的博客
04-03 1095
使用ArkTS语言，实现一个导航与内容二级联动的效果。
HarmonyOS NEXT应用开发案例——二级联动
maniuT的博客
03-08 1376
本示例主要介绍了List组件实现二级联动（Cascading List）的场景。该场景多用于短视频中拍摄风格的选择、照片编辑时的场景的选择。
鸿蒙开发系列教程（二十三）--List 列表操作（2）
huazi99的博客
02-16 2792
在列表项之间添加间距，可以使用space参数，主轴方向。
Android开发丶二级列表的联动功能实现
09-07
在Android应用开发中，二级列表的联动功能是一个常见的交互设计，尤其在电商、外卖等应用中，用户通过一级分类选择大类，然后二级列表展示对应类目下的具体商品或服务。这种设计能有效地帮助用户快速定位到他们感...
uniapp uView u-picker组件三级联动Demo
02-12
- 2、添加的时候，展示的数据是默认的，是上一列第一行数据的详情（所有的年级（第一列），一年级对应的班（第二列），一班对应的学生（第三列）） - 3、编辑的时候，第一列数据不变（得高亮对应的行）；第二列的...
Android使用RecyclerView实现二级联动，并且选中后保持高亮状态
12-26
本文将详细介绍如何使用RecyclerView实现二级联动效果，并确保选中项在列表中保持高亮状态。 首先，我们需要理解RecyclerView的基本工作原理。RecyclerView是一个高效的视图复用机制，通过ViewHolder模式减少视图...
C# MVC 使用LayUI实现下拉框二级联动的功能
08-19
使用 LayUI 库来实现下拉框二级联动的功能可以快速构建 Web 应用程序，提高开发效率和质量。但是，需要注意的是，在使用 LayUI 库时，需要遵守 LayUI 库的官方文档和使用指南，以避免出现错误和问题。
OpenHarmony实战开发-如何实现组件堆叠效果。
2401_82546228的博客
04-16 763
本示例介绍运用Stack组件以构建多层次堆叠的视觉效果。通过绑定Scroll组件的onScroll滚动事件回调函数，精准捕获滚动动作的发生。当滚动时，实时地调节组件的透明度、高度等属性，从而成功实现了嵌套滚动效果、透明度动态变化以及平滑的组件切换。
【HarmonyOS开发】ArkTs实现侧栏联动
qq_23334071的博客
12-19 1087
侧栏联动功能模块：1、切换左侧导航，右侧滚动到对应的内容。2、滚动右侧的内容，左侧会切换对应的导航。
OpenHarmony开发教程指南—如何实现视频卡片和列表区域的联动滚动场景。
最新发布
m0_70749039的博客
06-03 815
本示例使用Scroll和List组件嵌套，通过List组件的滚动控制器和nestedScroll属性实现了视频卡片和列表区域的联动滚动场景。
最新OpenHarmony系统一二级目录整理
坚果的博客
03-12 2115
由于Master分支代码更新迭代速度很快，部分目录结构可能在后面会发生变化。特别是高层次的部分代码。
HarmonyOS实战开发-使用List组件实现导航与内容联动的效果。
m0_70749039的博客
03-29 1129
本篇Codelab是主要介绍了如何基于List组件实现一个导航和内容的二级联动效果。样例主要包含以下功能：
鸿蒙开发入门实战案例-菜谱列表（附源码）
shudaoshanQAQ的博客
03-13 2199
实战案例-菜谱列表（附源码）
HarmonyOS开发详解（五）——鸿蒙高级组件数据动态绑定案例实践_鸿蒙 findcomponentbyid(1)
2401_84851494的博客
05-10 1121
i
鸿蒙开发笔记(十七): 列表 List
Waruler的博客
01-19 2704
鸿蒙os中List列表组件的使用
零基础开始学习鸿蒙开发-自定义List
qq_36973384的博客
11-29 916
Entry@Component//用于构建分组名称的方法build(){//从外到内的范围： List>ListItemGroup>ListItem//列表List(){ListItemGroup({header:this.itemHeader("蔬菜"),space:5}){Text("萝卜").fontSize(20).width("80")Text("黄瓜").fontSize(20).width("80")
鸿蒙应用开发（基础篇）之列表组件
xiangzhihong8的专栏
09-12 3105
List是很常用的滚动类容器组件，一般和子组件ListItem一起使用，List列表中的每一个列表项对应一个ListItem组件。Grid组件为网格容器，是一种网格列表，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。Grid组件一般和子组件GridItem一起使用，Grid列表中的每一个条目对应一个GridItem组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值