鸿蒙（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…
阅读更多...
Day01-变量和数据类型课后练习(输出你最想说的一句话,定义所有基本数据类型的变量和字符串变量,用合适类型的变量存储个人信息并输出,定义圆周率PI,简答题)

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

参考答案博客链接跳转 文章目录 1、输出你最想说的一句话&#xff01;2、定义所有基本数据类型的变量和字符串变量3、用合适类型的变量存储个人信息并输出4、定义圆周率PI5、简答题 1、输出你最想说的一句话&#xff01; 编写步骤&#xff1a;List item定义类 Homework1&…
阅读更多...
【嵌入式移植】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;”…
阅读更多...
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 …
阅读更多...
网络通信实现

网络通信实现

【 一 】网络通信实现 【 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;在电竞赛事中出场…
阅读更多...
SpringBoot-yml文件的配置与读取

SpringBoot-yml文件的配置与读取

配置 值前边必须要有空格&#xff0c;作为分隔符 使用空格作为缩进表示层级关系&#xff0c;相同的层级左侧对齐 获取 使用Value(”${键名}”) 使用ConfigurationProperties(prefix "前缀") 1.前缀要与yml配置文件中的前缀一致 2.实体类的字段名与配置文件中的键名一…
阅读更多...
【微服务】springboot集成ELK使用详解

【微服务】springboot集成ELK使用详解

目录 一、前言 二、为什么需要ELK 三、ELK介绍 3.1 什么是elk 3.2 elk工作原理 四、ELK环境搭建 4.1 搭建es环境 4.1.1 获取es镜像 4.1.2 启动es容器 2.1.3 配置es参数 2.1.4 重启es容器并访问 4.2 搭建kibana 4.2.1 拉取kibana镜像 4.2.2 启动kibana容器 4.2.3 …
阅读更多...
GitLab16.8配置webhooks、Jenkins2.4配置GitLab插件实现持续集成、配置宝塔面板实现持续部署

GitLab16.8配置webhooks、Jenkins2.4配置GitLab插件实现持续集成、配置宝塔面板实现持续部署

看本篇文章的前提是已经部署完GItlab和Jenkins服务器&#xff0c;已经可以手动构建成功&#xff0c;并且经过了很多次实践&#xff0c;对这两款软件基本熟悉。 建议大家按以下顺序看 前端自动化&#xff08;其一&#xff09;部署gitlab https://blog.csdn.net/weixin_45062076…
阅读更多...
【Redis】Redis集群方案应该怎么做 都有哪些方案

【Redis】Redis集群方案应该怎么做 都有哪些方案

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Redis ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 &#xff08;1&#xff09;twemproxy &#xff08;2&#xff09;codis &#xff08;3&#xff09;redis cluster3.0自带的集群 …
阅读更多...
爬虫基础-前端基础

爬虫基础-前端基础

Html是骨骼、css是皮肤、js是肌肉&#xff0c;三者之间的关系可以简单理解为m(html)-v(css)-c(js) 浏览器的加载过程 构建dom树 子资源加载-加载外部的css、图片、js等外部资源 样式渲染-css执行 DOM树 ajax、json、xml AJAX 是一种在无需重新加载整个网页的情况下&#xf…
阅读更多...
iOS_Xcode_LLDB调试常用命令

iOS_Xcode_LLDB调试常用命令

文章目录 结构常用命令&#xff1a;1、流程控制&#xff1a;2、常用命令3、进程信息&#xff1a;4、寄存器&#xff1a;register5、镜像&#xff1a;image6、内存&#xff1a;memory7、符号断点&#xff1a;breakpoint8、内存断点&#xff1a;watchpoint9、Tips&#xff1a; 结…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023