鸿蒙HarmonyOS之使用ArkTs语言实现层级树状目录选择UI

一、实现效果

在这里插入图片描述
在这里插入图片描述

二、实现步骤

代码示例中用到的颜色、图片等资源可以自行替换设置

1、Index.ets 里面调用

import { CategoryView} from './CategoryView';//主页面
@Entry
@Component
struct Index {@State tabsIndex: number = 0;build() {...//层级目录ViewCategoryView()...}   
}

3、DirectoryItem.ets 目录数据存储对象

//目录Item
@Observed
export class DirectoryItem {id: string = ""; //idname: string = ""; //名称type: number;//类型:几级目录children: DirectoryItem[]; //子目录isExpand: boolean = false;constructor(id: string, name: string,type: number, children?: DirectoryItem[]) {this.id = id;this.name = name;this.type = type;this.children = children || [];}
}

3、DirectoryData.ets 目录示例数据

import { DirectoryItem } from '../bean/DirectoryItem';//目录数据
export const directoryStructure: DirectoryItem[] = [new DirectoryItem('1','默认目录1',1, [new DirectoryItem('2','1.1',2, [new DirectoryItem('3','1.1.1',3),new DirectoryItem('4','1.1.2',3, [new DirectoryItem('5','(1)',4), new DirectoryItem('6','(2)',4)]),new DirectoryItem('7','1.1.3',3)]),new DirectoryItem('8','1.2',2),new DirectoryItem('9','1.3',2, [new DirectoryItem('10','1.3.1',3), new DirectoryItem('11','1.3.2',3)])])];

4、CategoryView.ets 目录UI

import { DirectoryItem } from '../bean/DirectoryItem'
import { directoryStructure } from '../data/DirectoryData'//云传页
@Preview
@Component
export struct Tab_CloudUploadContent {build() {Column() {Row() {Text($r('目录')).fontSize(30).fontFamily('HarmonyHeiTi-Medium').fontColor($r('app.color.font_color_dark'))}.width('100%').height(80)//选择目录UIif (directoryStructure.length > 0){List() {ForEach(directoryStructure, (data: DirectoryItem, index: number) => {ListItem() {DirectoryComponent({ item: directoryStructure[index] })}})}.width('100%').height('100%').padding({ left: 10, right: 10 }).divider({ strokeWidth: 1, color: $r('app.color.background_shallow_grey') })}}.width('100%').height('100%').padding(10)}
}//目录组件
@Component
struct DirectoryComponent {@ObjectLink item: DirectoryItem; //当前目录Item对象@State selectId: string = ''; //选中目录Id@State isOpen: boolean = false; //记录目录是否展开状态build() {Column() {Row(){Row() {Text("|").fontSize(15).fontWeight(FontWeight.Bold).fontColor($r('app.color.tab_bar_select'))//目录名称Text(this.item.name).fontSize(15).fontWeight(FontWeight.Bold).margin({ left: 8 }).fontColor($r('app.color.font_color_dark'))}.layoutWeight(1).margin({ left: (this.item.type - 1) * 20 })//目录是否展开图标Image(this.isOpen ? $r('app.media.ic_select_live') : $r('app.media.ic_unselect_live')).width('20vp').height('20vp').objectFit(ImageFit.Contain)}.height(50).width('100%').onClick(() => {if (this.item.children != undefined) {//打开子目录 更新目录打开状态this.item.isExpand = !this.item.isExpand;this.isOpen = this.item.isExpand;} else {//记录选中目录Idthis.selectId = this.item.id;}})List() {ForEach(this.item.children, (children: DirectoryItem,index: number) => {ListItem() {if (children.children != undefined && children.children.length > 0) {//存在子目录,去循环生成层级目录DirectoryComponent({item: this.item.children[index]})} else {//没有子目录了,直接生成单个目录项this.renderDirectoryItem(children)}}}, (item: DirectoryItem) => item.name)}.visibility(this.isOpen ? Visibility.Visible : Visibility.None).width('100%').divider({ strokeWidth: 1, color: $r('app.color.background_shallow_grey') })}}@Builderprivate renderDirectoryItem(item: DirectoryItem) {Row() {Text(item.name).fontWeight(FontWeight.Bold).fontSize(15).fontColor($r('app.color.font_color_dark')).layoutWeight(1).margin({ left: (item.type - 1) * 20 + 11})}.width('100%').height('50vp').onClick(() => {//记录点击选中目录Idthis.selectId = item.id;})}
}

5、预览运行查看index.ets文件即可查看效果

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

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

相关文章

ReTagList标签列表(API)

组件实现基于 Vue3 + Element Plus + Typescript,同时引用 vueUse + lodash-es + tailwindCss (不影响功能,可忽略) 基于ElTag实现的Tag列表,支持Tag列表多选,动态Tag列表 ReTagList标签列表 基础 简单展示Tag列表,可通过size指定尺寸 查看 /demo/tag-list/basic.md …

Arduino开源四足蜘蛛机器人制作教程

视频教程:手把手叫你做四足蜘蛛机器人——1零件介绍_哔哩哔哩_bilibili 一、项目介绍 1.1 项目介绍 Arduino主控,图形化编程,趣味学习 Arduino nano开发板舵机扩展底板 4.8V可充电电池,支持Arduino C语言编程和米思齐图形化编程…

Spring Cloud Config 与 Spring Cloud Bus 来实现动态配置文件

要使用 Spring Cloud Config 与 Spring Cloud Bus 来实现动态配置文件,你可以按照以下步骤操作: ### 步骤 1: 添加依赖 首先,确保你的项目中添加了 Spring Cloud Config 客户端和 Bus 的依赖。对于 Maven 项目,pom.xml 文件应该…

浅谈Kafka(一)

浅谈Kafka(一) 文章目录 浅谈Kafka(一)Kafa的设计是什么样的数据传输的事务定义消息队列的应用场景Kafka怎么样判断节点是否存活Kafka的消息是采用pull模式还是push模式Kafka在磁盘上的消息格式Kafka高效文件存储设计特点Kafka与传…

Yolov10网络详解与实战(附数据集)

文章目录 摘要模型详解模型实战训练COCO数据集下载数据集 COCO转yolo格式数据集(适用V4,V5,V6,V7,V8)配置yolov10环境训练断点训练测试 训练自定义数据集Labelme数据集格式转换训练测试 总结 摘要 模型详解…

CeresPCL 岭回归拟合(曲线拟合)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 由于在使用最小二乘插值拟合时,会涉及到矩阵求逆的操作,但是如果这个矩阵接近于奇异时,那么拟合的结果就会与我们期望的结果存在较大差距,因此就有学者提出在最小二乘的误差函数中添加正则项,即: 这里我们也可…

OpenGL-ES 学习(8) ---- FBO

目录 FBO OverViewFBO 优点使用FBO的步骤 FBO OverView FBO(FrameBuffer Object) 指的是帧缓冲对象,实际上是一个可以添加缓冲区容器,可以为其添加纹理或者渲染缓冲区对象(RBO) FBO(FrameBuffer Object) 本身不能用于渲染,只有添加了纹理或者…

对派生类指针使用C风格的强制类型转换为基类指针

以下来自语言大模型的回答: 值可能发生改变 当对派生类指针使用C风格的强制类型转换成基类指针时,指针的值可能会发生改变。这主要是由于多重继承和虚继承的存在。以下是几个关键点解释: 单继承情况下: 在单继承的情况下,派生类指针转换为…

Stability AI发布了单目视频转4D模型的新AI模型:Stable Video 4D

开放生成式人工智能初创公司Stability AI在3月发布了Stable Video 3D,是一款可以根据图像中的物体生成出可旋转的3D模型视频工具。Stability AI在7月24日发布了新一代的Stable Video 4D,增添了赋予3D模移动作的功能。 Stable Video 4D能在约40秒内生成8…

数字乡村+智慧农业数字化转型大数据平台建设方案

1. 数字农业发展趋势 数字农业正经历全环节数字技术应用、全流程生产经营再造、全方位线上线下对接和管理服务全生命周期覆盖的四大趋势,标志着我国农业进入高质量发展新阶段。 2. 数字乡村的战略意义 数字乡村作为数字化、网络化和信息化的产物,对于…

Wemos D1 Mini pro/ nodeMcu / ESP8266 驱动 240*320 ILI9431 SPI液晶屏

Wemos D1 Mini / nodeMcu / ESP8266 驱动 240*320 ILI9431 SPI液晶屏 效果展示器件硬件连接引脚连接原理图引脚对照表 安装TFT_eSPI库TFT_eSPI库中User_Setup.h文件的参数修改User_Setup.h文件的位置User_Setup.h文件中需要修改的参数User_Setup.h完成源码 例程 缘起&#xff1…

PDF 转Word 开源库

1. Apache PDFBox Apache PDFBox 是一个开源的 Java 库&#xff0c;用于创建和操作 PDF 文档。虽然 PDFBox 本身没有直接支持 PDF 转 Word 的功能&#xff0c;但它可以提取 PDF 内容&#xff0c;你可以结合其他方法将这些内容写入 Word。 添加依赖 <dependency><gr…

网络间通信

1、udp通信 特点&#xff1a;&#xff08;1&#xff09;无连接 &#xff08;2&#xff09;不可靠 2、udp编程&#xff08;c/s模型&#xff09; ssize_t recvfrom(int sockfd, //socket的fd void *buf, //保存数据的一块空间的地址 …

高效分页策略:掌握 LIMIT 语句的正确使用方法与最佳实践

本文主要介绍limit 分页的弊端及线上应该怎么用 LIMIT M,N 平时经常见到使用 <limit m,n> 合适的 order by 来实现分页查询&#xff0c;这样做到底性能如何呢&#xff1f; 先来简单分析下&#xff0c;然后再实际验证一下。 无索引条件下&#xff0c;需要做大量的文件排…

Linux tail -f 报错 No space left on device

问题&#xff1a; 执行tail -f my_file 时报错&#xff1a;No space left on device df -h 检查磁盘剩余空间&#xff0c;剩余空间都很充足&#xff1b; df -i 检测iNode使用情况&#xff0c;剩余iNode也很充足&#xff1b; 参考这篇文章解决了问题 tail: cannot watch /v…

C++的正则表达式简介

文章目录 一、基本概念二、正则表达式的基本用法1、头文件2、正则表达式对象3、正则表达式匹配4、正则表达式语法&#xff08;1&#xff09;基本字符和元字符&#xff08;2&#xff09;字符类&#xff08;3&#xff09;预定义字符类&#xff08;4&#xff09;量词&#xff08;5…

Pandas数据清洗之数据分组和删除重复数据

数据分组 在Pandas中&#xff0c;你可以使用groupby()函数对DataFrame进行分组。这是一个非常强大的功能&#xff0c;可以基于一个或多个列的值来聚合数据。 这里是一个简单的例子来说明如何使用groupby()&#xff1a; 导入Pandas库: import pandas as pd创建一个示例DataFra…

vue3中的组件通信

props通信 可以实现父子组件通信&#xff0c;props数据还是只读的&#xff01;&#xff01;&#xff01; <template><div class"box"><h1>props:我是父组件曹操</h1><hr /><Child info"我是曹操" :money"money&qu…

Redis的缓存穿透、击穿、雪崩

目录 缓存穿透 定义&#xff1a; 解决方法&#xff1a; 缓存击穿 定义&#xff1a; 解决方案&#xff1a; 缓存雪崩 定义&#xff1a; 解决方案&#xff1a; 缓存穿透、缓存击穿和缓存雪崩的区别 缓存穿透 定义&#xff1a; 查询一个不存在的数据&#xff0c;数据库未…

探索802.1X:构筑安全网络的认证之盾

在现代网络安全的世界里&#xff0c;有一个极其重要但又常常被忽视的角色&#xff0c;它就是802.1x认证协议。这个协议可以被称作网络安全的守护者&#xff0c;为我们提供了强有力的防护。今天&#xff0c;我们就来深入探讨一下802.1x的原理、应用和测试&#xff0c;看看它是如…