鸿蒙（ArkUI）开发：实现二级联动

场景介绍

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

效果呈现

本例最终效果如下：

v2-d93dbfcc62cb3680339095f45ffa32c6_720w.gif

运行环境

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

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

实现思路

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

开发步骤

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

  • 首先构建列表数据，在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) //不支持滑动效果
  • 数字标题的索引值判断，根据当前滚动数字的首项索引值计算出数字标题的索引，具体代码块如下：
...
findClassIndex(ind: number) { // 当前界面最左边图的索引值indlet ans = 0// 定义一个i 并进行遍历 this.records.length = 10for (let i = 0; i < this.records.length; i++) { // 判断ind在this.records中那两个临近索引值之间if (ind >= this.records[i] && ind < this.records[i + 1]) {ans = ibreak}}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')
}
...
  • 点击数字标题，数字列表随之滑动：首先获取到点击数字标题的索引，通过该索引计算出下方对应数字的起始项索引，然后通过scroller的scrollToIndex方法跳转到对应索引的数字项，具体代码块如下：
...
.onClick(() => {this.typeIndex = indexthis.classifyScroller.scrollToIndex(index)let itemIndex = this.findItemIndex(index)console.log("移动元素：" + itemIndex)this.scroller.scrollToIndex(itemIndex)
})
...
  • 数字列表的滑动或点击导致数字标题的变动：通过List组件中onScrollIndex事件获取的到屏幕中最左边数字的索引值start，然后通过该索引值计算出对应的数字标题的索引currentClassIndex，然后通过scrollToIndex控制数字标题跳转到对应索引处，具体代码块如下：
...
.onScrollIndex((start) => {let currentClassIndex = this.findClassIndex(start)console.log("找到的类索引为： " + currentClassIndex)if (currentClassIndex != this.tmp) {this.tmp = currentClassIndexconsole.log("类别移动到索引： " + currentClassIndex)this.typeIndex = currentClassIndexthis.classifyScroller.scrollToIndex(currentClassIndex)}
})
...

本文是对鸿蒙（ArkUI）开发的二级联动实现，更多的鸿蒙技术可以前往主页学习，鸿蒙的OpenHarmony技术ArkUI技能分布如下：

高清完整版可以找我保存（附下面笔迹包）


完整代码

完整示例代码如下：

@Entry
@Component
struct TwoLevelLink {@State typeIndex: number = 0private tmp: number = 0private 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 = 0for (let i = 0; i < this.records.length; i++) {if (ind >= this.records[i] && ind < this.records[i + 1]) {ans = ibreak}}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 = indexthis.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 = currentClassIndexconsole.log("类别移动到索引： " + currentClassIndex)this.typeIndex = currentClassIndexthis.classifyScroller.scrollToIndex(currentClassIndex)}})}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/653428.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

粒子群优化算法（Particle Swarm Optimization，PSO）求解基于移动边缘计算的任务卸载与资源调度优化（提供MATLAB代码）

粒子群优化算法（Particle Swarm Optimization，PSO）求解基于移动边缘计算的任务卸载与资源调度优化（提供MATLAB代码）

一、优化模型介绍 移动边缘计算的任务卸载与资源调度优化原理是通过利用配备计算资源的移动无人机来为本地资源有限的移动用户提供计算卸载机会&#xff0c;以减轻用户设备的计算负担并提高计算性能。具体原理如下&#xff1a; 任务卸载&#xff1a;移动边缘计算系统将用户的计…
阅读更多...
Windows11搭建GPU版本PyTorch环境详细过程

Windows11搭建GPU版本PyTorch环境详细过程

Anaconda安装 https://www.anaconda.com/ Anaconda: 中文大蟒蛇&#xff0c;是一个开源的Python发行版本&#xff0c;其包含了conda、Python等180多个科学包及其依赖项。从官网下载Setup&#xff1a;点击安装&#xff0c;之后勾选上可以方便在普通命令行cmd和PowerShell中使用…
阅读更多...
BGP同步规则

BGP同步规则

BGP同步规则&#xff1a;开启同步下&#xff0c;从IBGP收到一条路由不会传给任何EBGP邻居(实验效果IBGP邻居和EBGP邻居都不传)&#xff0c;除非从自身的IGP中也学到这条路由。目的是防止AS内部出现路由黑洞&#xff0c;向外部通告了一个本AS不可达的虚假的路由。 同步规则只影响…
阅读更多...
qt学习：http+访问百度智能云api实现车牌识别

qt学习：http+访问百度智能云api实现车牌识别

目录 登录到百度智能云&#xff0c;找到文字识别 完成操作指引 开通 查看车牌识别的api文档 ​编辑​编辑 查看自己应用的api key 查看回应的数据格式 编程步骤 ui界面编辑 添加模块&#xff0c;头文件和定义变量 新建两个类&#xff0c;一个图像Image类&#xff0c…
阅读更多...
Linux常用指令的整合

Linux常用指令的整合

之前面试被问到了Linux相关的指令&#xff0c;所以我整理的一份常用的Linux指令列表&#xff0c;适用于大多数Linux发行版&#xff0c;现分享给大家&#xff1a; 文件操作 ls&#xff1a;列出目录内容。cd [目录]&#xff1a;更改当前目录。pwd&#xff1a;显示当前目录路径。m…
阅读更多...
Day01-变量和数据类型课后练习(输出你最想说的一句话,定义所有基本数据类型的变量和字符串变量,用合适类型的变量存储个人信息并输出,定义圆周率PI,简答题)

Day01-变量和数据类型课后练习(输出你最想说的一句话,定义所有基本数据类型的变量和字符串变量,用合适类型的变量存储个人信息并输出,定义圆周率PI,简答题)

参考答案博客链接跳转 文章目录 1、输出你最想说的一句话&#xff01;2、定义所有基本数据类型的变量和字符串变量3、用合适类型的变量存储个人信息并输出4、定义圆周率PI5、简答题 1、输出你最想说的一句话&#xff01; 编写步骤&#xff1a;List item定义类 Homework1&…
阅读更多...
Qt容器QVariant

Qt容器QVariant

在Qt中&#xff0c;QVariant是一个通用的值容器&#xff0c;它可以存储任意类型的数据&#xff0c;例如整数、字符串、列表等等。其主要用于提供一种通用的数据类型&#xff0c;方便在不同的函数、类、模块之间传递数据。 QVariant类是Qt的共用体union数据类型&#xff0c;不仅…
阅读更多...
【嵌入式移植】5、U-Boot源码分析2—make nanopi_neo2_defconfig

【嵌入式移植】5、U-Boot源码分析2—make nanopi_neo2_defconfig

U-Boot源码分析2—make nanopi_neo2_defconfig 1 概述2 nanopi_neo2_defconfig3 编译过程分析3.1 编译目标3.2 scripts_basic3.2.1 prefix src定义3.2.2 PHONY3.2.3 __build3.2.4 fixdep3.3 objscripts/kconfig 1 概述 上一章中&#xff0c;对Makefile相关源码进行了初步分析&…
阅读更多...
从零开始：CentOS系统下搭建DNS服务器的详细教程

从零开始：CentOS系统下搭建DNS服务器的详细教程

前言 如果你希望在CentOS系统上建立自己的DNS服务器，那么这篇文章绝对是你不容错过的宝藏指南。我们提供了详尽的步骤和实用技巧，让你能够轻松完成搭建过程。从安装必要的软件到配置区域文件，我们都将一一为你呈现。无论你的身份是运维人员，还是程序员，抑或是对网络基础设…
阅读更多...
服务端开发小记02——Maven

服务端开发小记02——Maven

这里写目录标题 Maven简介Maven在Linux下的安装Maven常用命令 Maven简介 Apache Maven Project是一个apache的开源项目&#xff0c;是用于构建和管理Java项目的工具包。 用Maven可以方便地创建项目&#xff0c;基于archetype可以创建多种类型的java项目&#xff1b;Maven仓库…
阅读更多...
5G_RACH（一）

5G_RACH（一）

什么是RACH RACH 代表 Random Access Channel。这是开机时UE发给eNB的第一条消息。 为什么选择RACH &#xff1f;&#xff08;RACH 的功能是什么&#xff1f; 当你第一次听到RACH或RACH Process这个词时&#xff0c;你脑海中浮现的第一个问题是“为什么是RACH&#xff1f;”…
阅读更多...
HarmonyOS --@Prop和@Link同步信息装饰器

HarmonyOS --@Prop和@Link同步信息装饰器

当应用中父子组件需要数据同步时&#xff0c;可以使用Prop和Link装饰器 一个组件被引用时&#xff0c;引用其他组件的组件就是父组件、被引用的组件就是子组件。 由于State装饰器无法执行父子之间的数据通信 Prop&#xff1a;单向同步、父组件中修改数据&#xff0c;会同步到子…
阅读更多...
最近公共祖先（LCA）主要算法：

最近公共祖先（LCA）主要算法：

1&#xff09;向上标记法&#xff1a; 从x向上走到根节点&#xff0c;并标记所有经过的节点。 从y向上走到根节点&#xff0c;当第一次遇到已标记的节点时&#xff0c;就找到了LCA&#xff08;x,y&#xff09;. 2&#xff09;树上倍增法&#xff1a; 树上倍增法是一个很重要…
阅读更多...
心理学笔记——我们如何思考-思想、语言和手语

心理学笔记——我们如何思考-思想、语言和手语

我们如何思考-思想、语言和手语 研究语言的理论&#xff1a;计算理论、认知神经学、进化论 当我们讨论语言时&#xff0c;指的是英语、中文、日语这样的语言系统 所有语言都共享一些深层且复杂的共性&#xff0c;最直观的就是每一种语言都能够有效地表达抽象概念——思想、物…
阅读更多...
05 Redis之Benchmark+简单动态字符串SDS+集合的底层实现

05 Redis之Benchmark+简单动态字符串SDS+集合的底层实现

3.8 Benchmark Redis安装完毕后会自动安装一个redis-benchmark测试工具&#xff0c;其是一个压力测试工具&#xff0c;用于测试 Redis 的性能。 src目录下可找到该工具 通过 redis-benchmark –help 命令可以查看到其用法 3.8.1 测试1 3.9 简单动态字符串SDS 无论是 Redis …
阅读更多...
redis原理（五）Lua语言

redis原理（五）Lua语言

一、介绍&#xff1a; 1、背景&#xff1a; 在 Redis 的 2.6 以上版本中&#xff0c;除了可以使用命令外&#xff0c;还可以使用 Lua 语言操作 Redis。 Redis 命令的计算能力并不算很强大&#xff0c;而使用 Lua 语言则在很大程度上弥补了 Redis 的这个不足。 2、特点&#…
阅读更多...
网络通信实现

网络通信实现

【 一 】网络通信实现 【 1 】实现网络通信的四要素 本机的ip地址 子网掩码 网关的IP地址 DNS的IP地址( 域名系统) DNS服务器是指提供域名解析服务的服务器。它负责将域名转换为相应的IP地址&#xff0c;以便计算机可以通过IP地址与其他设备进行通信。 通过使用DNS服务器…
阅读更多...
【C语言】linux内核ipoib模块 - ipoib_netdev_ops_pf结构

【C语言】linux内核ipoib模块 - ipoib_netdev_ops_pf结构

一、ipoib_netdev_ops_pf结构 static const struct net_device_ops ipoib_netdev_ops_pf {.ndo_init ipoib_ndo_init,.ndo_uninit ipoib_ndo_uninit,.ndo_open ipoib_open,.ndo_stop ipoib_stop,.ndo_change_mtu ipoib_change_mtu,.ndo_…
阅读更多...
java servlet勤工助学家教管系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

java servlet勤工助学家教管系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java servlet 勤工助学家教管系统是一套完善的java web信息管理系统 serlvetdaobean mvc 模式开发 &#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myecli…
阅读更多...
绝地求生：【PC】开发者日志：竞技比赛地图轮换

绝地求生：【PC】开发者日志：竞技比赛地图轮换

各位玩家大家好&#xff0c;欢迎收看闲游盒本期开发者日志。 今天闲游盒想和大家分享一下2024年竞技比赛地图轮换的几项主要改动。 从第28赛季第1轮更新&#xff08;2月&#xff09;开始&#xff0c;竞技比赛的地图阵容中将包含所有8x8尺寸的地图&#xff0c;在电竞赛事中出场…
阅读更多...
最新文章

Copyright @ 2022~2023