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

本文主要是介绍鸿蒙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文件即可查看效果

这篇关于鸿蒙HarmonyOS之使用ArkTs语言实现层级树状目录选择UI的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1094493

相关文章

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

Redis消息队列实现异步秒杀功能

《Redis消息队列实现异步秒杀功能》在高并发场景下,为了提高秒杀业务的性能,可将部分工作交给Redis处理,并通过异步方式执行,Redis提供了多种数据结构来实现消息队列,总结三种,本文详细介绍Re... 目录1 Redis消息队列1.1 List 结构1.2 Pub/Sub 模式1.3 Stream 结

C# Where 泛型约束的实现

《C#Where泛型约束的实现》本文主要介绍了C#Where泛型约束的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录使用的对象约束分类where T : structwhere T : classwhere T : ne

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

将Java程序打包成EXE文件的实现方式

《将Java程序打包成EXE文件的实现方式》:本文主要介绍将Java程序打包成EXE文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录如何将Java程序编程打包成EXE文件1.准备Java程序2.生成JAR包3.选择并安装打包工具4.配置Launch4

SpringBoot内嵌Tomcat临时目录问题及解决

《SpringBoot内嵌Tomcat临时目录问题及解决》:本文主要介绍SpringBoot内嵌Tomcat临时目录问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录SprinjavascriptgBoot内嵌Tomcat临时目录问题1.背景2.方案3.代码中配置t

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr