鸿蒙UI开发——文本级联选择器
1、概 述
ArkUI提供了一个文本选择器(showTextPickerDialog),可以方便的实现文本级联选择,例如:省->市->区,示意如下:
下面针对文本选择器做简单介绍。
2、接口介绍
定义文本滑动选择器弹窗并弹出,接口定义如下:
showTextPickerDialog(options: TextPickerDialogOptions): void
其中TextPickerDialogOptions,主要用于配置文本滑动选择器弹窗的参数。字段配置如下:
名称 | 类型 | 说明 |
range | string[] | string[] [] | Resource |TextPickerRangeContent[] | TextCascadePickerRangeContent[] | 选择器的数据选择列表。不可设置为空数组,若设置为空数组,则不显示;若动态变化为空数组,则保持当前正常值显示。 |
selected | number | number[] | 设置默认选中项在数组中的索引值。默认值:0 |
value | string | string[] | 设置默认选中项的值,优先级低于selected。默认值:第一个元素值 |
defaultPickerItemHeight | number | string | 设置选择器中选项的高度。默认值:选中项56vp,非选中项36vp。设置该参数后,选中项与非选中项的高度均为所设置的值。 |
disappearTextStyle | PickerTextStyle | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。默认值:{color: '#ff182431',font: {size: '14fp',weight: FontWeight.Regular}} |
textStyle | PickerTextStyle | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。默认值:{color: '#ff182431',font: {size: '16fp',weight: FontWeight.Regular}} |
selectedTextStyle | PickerTextStyle | 设置选中项的文本颜色、字号、字体粗细。默认值:{color: '#ff007dff',font: {size: '20vp',weight: FontWeight.Medium}} |
acceptButtonStyle | PickerDialogButtonStyle | 设置确认按钮显示样式、样式和重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。说明:acceptButtonStyle与cancelButtonStyle中最多只能有一个primary字段配置为true,二者primary字段均配置为true时均不生效。 |
cancelButtonStyle | PickerDialogButtonStyle | 设置取消按钮显示样式、样式和重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。 |
canLoop | boolean | 设置是否可循环滚动,true:可循环,false:不可循环,默认值:true。 |
alignment | DialogAlignment | 弹窗在竖直方向上的对齐方式。默认值:DialogAlignment.Default |
offset | Offset | 弹窗相对alignment所在位置的偏移量。默认值:{ dx: 0 , dy: 0 } |
maskRect | Rectangle | 弹窗遮蔽层区域,在遮蔽层区域内的事件不透传,在遮蔽层区域外的事件透传。默认值:{ x: 0, y: 0, width: '100%', height: '100%' } |
onAccept | (value: TextPickerResult) => void | 点击弹窗中的“确定”按钮时触发该回调。 |
onCancel | () => void | 点击弹窗中的“取消”按钮时触发该回调。 |
onChange | (value: TextPickerResult) => void | 滑动弹窗中的选择器使当前选中项改变时触发该回调。 |
backgroundColor | ResourceColor | 弹窗背板颜色。默认值:Color.Transparent说明:当设置了backgroundColor为非透明色时,backgroundBlurStyle需要设置为BlurStyle.NONE,否则颜色显示将不符合预期效果。 |
backgroundBlurStyle | BlurStyle | 弹窗背板模糊材质。默认值:BlurStyle.COMPONENT_ULTRA_THICK |
onDidAppear | () => void | 弹窗弹出时的事件回调。 |
onDidDisappear | () => void | 弹窗消失时的事件回调。 |
onWillAppear | () => void | 弹窗显示动效前的事件回调。 |
onWillDisappear | () => void | 弹窗退出动效前的事件回调。 |
shadow | ShadowOptions | ShadowStyle | 设置弹窗背板的阴影。当设备为2in1时, 默认场景下获焦阴影值为: ShadowStyle.OUTER_FLOATING_MD, 失焦为: ShadowStyle.OUTER_FLOATING_SM |
3、案 例
本案例通过设置range的参数类型为TextCascadePickerRangeContent[]类型实现3列文本选择器弹窗。
TextCascadePickerRangeContent是一个内置数据结构类型,定义如下:
declare interface TextCascadePickerRangeContent {
text: string | Resource;
children?: TextCascadePickerRangeContent[];
}
当按下确定按钮时,弹窗会通过onAccept返回目前所选中文本和索引值。如需弹窗再次弹出时显示选中的是上一次确定的文本,就要在回调中重新给select进行赋值。效果如下:
代码如下,直接复制粘贴到项目中可以运行(请注意22、32行的选择返回数据结构的定义):
@Entry
@Component
struct TextPickerDialogExample {
private data: TextCascadePickerRangeContent[] = [
{
text: '辽宁省',
children: [{ text: '沈阳市', children: [{ text: '沈河区' }, { text: '和平区' }, { text: '浑南区' }] },
{ text: '大连市', children: [{ text: '中山区' }, { text: '金州区' }, { text: '长海县' }] }]
},
{
text: '吉林省',
children: [{ text: '长春市', children: [{ text: '南关区' }, { text: '宽城区' }, { text: '朝阳区' }] },
{ text: '四平市', children: [{ text: '铁西区' }, { text: '铁东区' }, { text: '梨树县' }] }]
},
{
text: '黑龙江省',
children: [{ text: '哈尔滨市', children: [{ text: '道里区' }, { text: '道外区' }, { text: '南岗区' }] },
{ text: '牡丹江市', children: [{ text: '东安区' }, { text: '西安区' }, { text: '爱民区' }] }]
}
]
// 由于数据是3列,因此,这里的select是一个数组,表示每一列对应的选择序号
private select : number[] = [0,0,0];
build() {
Column() {
Button('showTextPickerDialog')
.margin(30)
.onClick(() => {
this.getUIContext().showTextPickerDialog({
range: this.data,
selected: this.select,
onAccept: (value: TextPickerResult) => {
this.select = value.index as number[]
}
})
})
}.width('100%').margin({ top: 5 })
}
}
相关文章:
鸿蒙UI开发——文本级联选择器
1、概 述 ArkUI提供了一个文本选择器(showTextPickerDialog),可以方便的实现文本级联选择,例如:省->市->区,示意如下: 下面针对文本选择器做简单介绍。 2、接口介绍 定义文本滑动选择器…...
后盾人JS -- JS运算符与流程控制
嘻嘻 赋值运算符与算术运算符 没什么好说的,等号谁都会用 比较运算符注意事项 如果一个是字符一个是数字也是可以比较的() 是判断值和类型是否相等 <!DOCTYPE html> <html lang"en"><head><meta charset…...
Hive SQL必刷练习题:留存率问题
首次登录算作当天新增,第二天也登录了算作一日留存。可以理解为,在10月1号登陆了。在10月2号也登陆了,那这个人就可以算是在1号留存 今日留存率 (今日登录且明天也登录的用户数) / 今日登录的总用户数 * 100% 解决思…...
笔记本电脑 选购 回收 特权模式使用 指南
笔记本电脑 factor 无线网卡:有些笔记本无法检测到特定频段的信息,会导致连不上校园网 sudo iwlist wlp2s0 scan | grep Frequency > net.txt cat net.txt>表示用终端输出覆盖后续文件,>>表示添加到后续文件的末尾 一种更简…...
基于PyQt - 6的医疗多模态大模型医疗研究系统中的创新构建与应用(上 .文章部分)
一、引言 1.1 研究背景与意义 在当今数智化时代,医疗行业正经历着深刻的变革,对智能化、高效化的需求日益迫切。传统的医疗模式在面对海量的医疗数据、复杂的诊断流程以及个性化的治疗需求时,逐渐显露出局限性。随着人工智能技术的飞速发展,多模态大模型作为一种前沿技术…...
下载文件,浏览器阻止不安全下载
背景: 在项目开发中,遇到需要下载文件的情况,文件类型可能是图片、excell表、pdf、zip等文件类型,但浏览器会阻止不安全的下载链接。 效果展示: 下载文件的两种方式: 一、根据接口的相对url,拼…...
1.15学习
web ctfhub-网站源码 打开环境,查看源代码无任何作用,但是其提醒就在表面暗示我们用dirsearch进行目录扫描,登录kali的root端,利用终端输入dirsearch -u 网址的命令扫描该网址目录,扫描成功后获得信息,在…...
shell练习2
需求:判断192.168.1.0/24网络中,当前在线的ip有哪些,并编写脚本打印出来。 #!/bin/bashnmap -sn 192.168.1.0/24 | grep Nmap scan report for | awk {print $5} 注意:当运行 bash ip.sh 时出现 nmap: command not found 的错误…...
MySQL学习笔记5【SQL优化/视图/存储过程/触发器】
MySQL学习笔记 SQL优化 1. 插入数据优化 普通插入: 采用批量插入: 每次插入不建议超过1000条记录,这样可以减少事务开销,提高性能。示例: INSERT INTO tb_user (name, age) VALUES (Alice, 25), (Bob, 30), ...;手动提…...
C++单例模式的设计
单例模式(Singleton Pattern)是一种设计模式,用于确保一个类只有一个实例,并提供一个全局访问点来访问该实例。在C中,单例模式通常用于管理全局资源或共享状态。 以下是C中实现单例模式的几种常见方式: 懒…...
【Linux系统编程】—— 自动化构建工具Makefile指南
文章目录 背景基本使用推导过程适度扩展语法 背景 Makefile 是衡量开发者是否具备完成大型工程能力的一个重要标志。在一个工程中,源文件的数量可能极多,这些文件会按照类型、功能或模块分布在多个目录中。Makefile 通过定义一系列规则,指定…...
【SpringBoot应用篇】SpringBoot+MDC+自定义Filter操作traceId实现日志链路追踪
【SpringBoot应用篇】SpringBootMDC自定义Filter操作traceId实现日志链路追踪 解决的问题解决方案MDC具体逻辑ymllogback-spring.xmlTraceIdUtil操作工具类TraceIdFilter自定义过滤器GlobalExceptionHandler全局异常处理类TraceIdAspect切面UserController测试验证 多线程处理M…...
少一点If/Else - 状态模式(State Pattern)
状态模式(State Pattern) 状态模式(State Pattern)状态模式(State Pattern)概述状态模式(State Pattern)结构图状态模式(State Pattern)涉及的角色 talk is c…...
【SVN】版本发布快捷操作
摘要:因为每次发版都需要制作一份相同的文件夹,而大部分的包都不需要变更,但是文件又非常大,记录自己的操作经验。 首先在SVN Repository Browser 界面把上一次的版本复制一份,复制的时候重命名为新的版本号 右击要复…...
nacos环境搭建以及SpringCloudAlibaba脚手架启动环境映射开发程序
1:下载nacos 地址:https://github.com/alibaba/nacos/tags 2:选择server的zip包下载 3:启动mysql服务,新建数据库:nacos_yh 4:解压下载的nacos_server 进入conf目录 5:mysql运行sql脚本变得到下面的表 6&a…...
【笔记整理】记录参加骁龙AIPC开发者技术沙龙的笔记
AIoT 首先了解了一个概念叫AIoT,我的理解就是AI IoT 5G,通过AI的发展使得边缘计算、数据整合和处理变得快捷方便,不仅限于传统的云端数据处理,在边缘的IoT设备上也可以进行智能化打造,通过5G的通信能力扩展可以实现…...
Kotlin 协程基础十 —— 协作、互斥锁与共享变量
Kotlin 协程基础系列: Kotlin 协程基础一 —— 总体知识概述 Kotlin 协程基础二 —— 结构化并发(一) Kotlin 协程基础三 —— 结构化并发(二) Kotlin 协程基础四 —— CoroutineScope 与 CoroutineContext Kotlin 协程…...
DAMA CDGA 备考笔记(二)
1. 考点分布 2. 第二章 数据处理伦理知识点总结 伦理是建立在是非观念上的行为准则。伦理准则通常侧重于公平、尊重、责任、诚信、质量、可靠性、透明度和信任等方面。数据伦理是一项社会责任问题不是法律问题。 度量指标:培训员工人数、合规/不合规事件、企业高管…...
【Lua学习之旅】之单行/多行注释
Lua的注释 单行注释多行注释 单行注释 lua中的单行注释采用两个短横线"--" --这是lua单行注释多行注释 写法一: --[[ 这个lua的多行注释, 很多资料说多行注释不可以嵌套, 根据我的测试,这种写法的多行注释在lua54版…...
【线性代数】行列式的概念
d e t ( A ) ∑ i 1 , i 2 , ⋯ , i n ( − 1 ) σ ( i 1 , ⋯ , i n ) a 1 , i 1 a 2 , i 2 , ⋯ , a n , i n det(A) \sum_{i_1,i_2,\cdots,i_n } (-1)^{\sigma(i_1,\cdots,i_n)} a_{1,i_1}a_{2,i_2},\cdots, a_{n,i_n} det(A)i1,i2,⋯,in∑(−1)σ(i1,⋯,in)a1…...
react中hooks之useEffect 用法总结
1. 什么是函数的副作用(Side Effects) 副作用是指在组件渲染过程中,除了返回 JSX 之外的其他操作,例如: 数据获取(API 调用)订阅数据源手动修改 DOM设置定时器存储数据日志记录 纯函数是特定的…...
小型、中型无人机执照学习和考试区别详解
小型、中型无人机执照的学习和考试在多个方面存在区别。以下是对两者的详细对比: 一、定义与适用范围 1. 小型无人机: 通常指起飞重量在7kg至25kg之间的无人机。 适用于多种应用场景,包括商业飞行、航拍、农业植保等。 必须持有民航局无人…...
【Go】Go Gin框架初识(一)
1. 什么是Gin框架 Gin框架:是一个由 Golang 语言开发的 web 框架,能够极大提高开发 web 应用的效率! 1.1 什么是web框架 web框架体系图(前后端不分离)如下图所示: 从上图中我们可以发现一个Web框架最重要…...
计算机网络的五层协议
计算机网络的五层协议 计算机网络的五层协议模型包括物理层、数据链路层、网络层、传输层和应用层,每一层都有其特定的功能和相关的协议。1 物理层:负责传输原始的比特流,通过线路(有线或无线)将数据转换为…...
QT中,在子线程中更新UI,会出现哪些问题,如何避免这种情况发生。
在Qt中,直接从子线程更新UI(用户界面)通常会导致各种问题,主要是因为Qt的UI组件(如QWidget及其子类)并不是线程安全的。具体来说,可能会出现以下问题: 崩溃和未定义行为:…...
C++并发编程之多线程环境下使用无锁数据结构的重要准则
在多线程环境中使用无锁数据结构(Lock-Free Data Structures)能够显著提高程序的并发性能,因为它们避免了传统锁机制带来的竞争和阻塞问题。然而,无锁编程本身也带来了许多挑战,如内存管理、数据一致性和正确性等问题。…...
Vue篇-07
Vue UI组件库 一、移动端常用的UI组件库 1.1、Vant 1.2、Cube UI 1.3、Mint UI 二、PC端常用的UI组件库 2.1、Element UI Element - The worlds most popular Vue UI framework 安装: 按需引入: 135_尚硅谷Vue技术_element-ui按需引入_哔哩哔哩_b…...
Zookeeper 数据迁移实战:基础环境搭建与高效迁移方案全览
文章目录 一、Zookeeper数据迁移简介二、迁移zookeeper数据基础环境三、利用快照迁移zookeeper数据1、Node1最新的zk快照文件和日志文件2、将被迁移方node2的zookeeper的集群全部stop3、将源node1集群数据和日志拷贝到指定目录下4、验证优先启动拷贝的数据、日志的zookeeper节点…...
内联变量(inline variables):在多个文件中共享全局常量
在 C17 中,引入了 内联变量(inline variables) 的概念,可以用于在多个文件中共享全局常量。内联变量允许在头文件中定义变量,而不会导致链接错误(如重复定义)。这种方式非常适合用于定义跨多个文…...
WOA-CNN-LSTM-Attention、CNN-LSTM-Attention、WOA-CNN-LSTM、CNN-LSTM四模型对比多变量时序预测
WOA-CNN-LSTM-Attention、CNN-LSTM-Attention、WOA-CNN-LSTM、CNN-LSTM四模型对比多变量时序预测 目录 WOA-CNN-LSTM-Attention、CNN-LSTM-Attention、WOA-CNN-LSTM、CNN-LSTM四模型对比多变量时序预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 基于WOA-CNN-LSTM-A…...
【kubernetes】K8S节点状态的维护
1 节点状态 节点是K8S集群中的一类重要资源,节点的状态通常可以作为判断集群异常的重要手段。 为了展示节点在各方面的健康程度,在kubectl describe node k8s-master的输出结果中的Conditions部分可以查看k8s-master节点的一些状态数据: N…...
工业视觉2-相机选型
工业视觉2-相机选型 一、按芯片类型二、按传感器结构特征三、按扫描方式四、按分辨率大小五、按输出信号六、按输出色彩接口类型 这张图片对工业相机的分类方式进行了总结,具体如下: 一、按芯片类型 CCD相机:采用电荷耦合器件(CC…...
Oracle查询-in条件超过1000
目录 1.不分页 2.分页 oracle数据库中,in的查询条件超过1000的话,就会报错,应该怎样处理这样的情况呢? 1.不分页 把查询条件分成几个list,每个list有1000个数据,有几个list查询几次数据库就行了 2.分…...
使用rknn进行retinaface部署(C++)
文章目录 RetinaFace导出ONNX导出RKNN编译运行学生课堂开源数据集RetinaFace RetinaFace是一种基于深度学习的高性能人脸检测方法,由InsightFace团队提出。它的核心思想是在单阶段检测器(如RetinaNet)的基础上,结合多任务学习来实现精确的人脸检测和特征点定位。以下是Ret…...
微服务拆分
微服务拆分 接下来,我们就一起将黑马商城这个单体项目拆分为微服务项目,并解决其中出现的各种问题。 熟悉黑马商城 首先,我们需要熟悉黑马商城项目的基本结构: 大家可以直接启动该项目,测试效果。不过,…...
【matlab】matlab知识点及HTTP、TCP通信
1、矩阵运算 点乘:对于两个同维度的向量,点乘结果是这两个向量对应分量的乘积之和。 点除:是指对两个数组的对应元素进行除法运算。 点幂:表示元素对元素的幂运算。 >> A[1,2,3;4,5,6]; B[1,1,1;2,2,2]>> D1B.*AD…...
亿道三防丨三防笔记本是什么意思?和普通笔记本的优势在哪里?
三防笔记本是什么意思?和普通笔记本的优势在哪里? 在现代社会中,笔记本电脑已经成为人们工作和生活中不可或缺的一部分。然而,在一些特殊行业或环境中,普通笔记本电脑由于其脆弱性和对环境条件的敏感性,往…...
C++并发编程之并发可扩展性与阿姆达尔定律
在C并发编程中,可扩展性和阿姆达尔定律(Amdahl’s Law)是两个非常重要的概念,它们帮助我们理解和优化并发程序的性能。下面我们分别讨论这两个概念,并探讨它们在C并发编程中的应用。 可扩展性 可扩展性(S…...
java 迪米特法则,原理、思想、工作流程、实现细节、稳定性、优缺点、应用场景等
迪米特法则(Law of Demeter,LoD),也被称为“最少知识原则”,是一种指导面向对象设计的原则,旨在减少对象之间的耦合度。以下是对迪米特法则的详细解析。 1. 定义 迪米特法则指出:一个对象应该…...
使用 Docker 部署 Java 项目(通俗易懂)
目录 1、下载与配置 Docker 1.1 docker下载(这里使用的是Ubuntu,Centos命令可能有不同) 1.2 配置 Docker 代理对象 2、打包当前 Java 项目 3、进行编写 DockerFile,并将对应文件传输到 Linux 中 3.1 编写 dockerfile 文件 …...
DuckDB:精通Insert语句处理数据冲突
本文介绍DuckDB insert语句用法,包括常规的批量插入,尤其是插入数据冲突的处理,最后还提及returning子句的用法,每个用法提供示例说明。 insert插入数据 INSERT INTO向表中插入新行。可以插入由值表达式指定的一行或多行…...
DFT可测性设置与Tetramax测试笔记
1 DFT 1.1 DFT类型 1、扫描链(SCAN): 扫描路径法是一种针对时序电路芯片的DFT方案.其基本原理是时序电路可以模型化为一个组合电路网络和带触发器(Flip-Flop,简称FF)的时序电路网络的反馈。 Scan 包括两个步骤,scan…...
AttributeError: Unknown IMAP4 command: ‘idle‘
imaplib 原生并不支持 IDLE 命令,这可能导致 AttributeError: Unknown IMAP4 command: idle 错误。解决办法是使用支持 IDLE 命令的库,例如 imapclient,或者通过扩展 imaplib 的方式实现。 以下是两种解决方案: 方法 1࿱…...
css实现响应式详解
一、媒体查询(Media Queries) 基本概念 媒体查询是 CSS3 中用于根据不同的设备特性(如屏幕宽度、高度、设备类型等)应用不同样式规则的技术。它允许你为特定的媒体类型(如屏幕、打印、手持设备等)和条件&a…...
hot100_240. 搜索二维矩阵 II
hot100_240. 搜索二维矩阵 II 直接遍历列减行增 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性: 每行的元素从左到右升序排列。 每列的元素从上到下升序排列。 示例 1: 输入:matrix [[1,4,7,1…...
【网络云SRE运维开发】2025第3周-每日【2025/01/15】小测-【第14章ospf高级配置】理论和实操解析
文章目录 14.1 选择题解题思路和参考答案14.2 理论题解题思路和参考答案14.3 实操题解题思路和参考答案思科(Cisco)设备华为(Huawei)设备小米/锐捷(或其他支持标准CLI命令的设备)通过网络管理工具注意事项 …...
c#-Halcon入门教程——标定
Halcon代码 read_image (NinePointCalibration, D:/Desktop/halcon/ca74d-main/九点标定/NinePointCalibration.gif)rgb1_to_gray (NinePointCalibration, GrayImage)get_image_size (GrayImage, Width, Height) dev_display (GrayImage)* 获取当前显示的窗口句柄 dev_get_win…...
设计和优化用于 AR、HUD 和高级显示系统的表面浮雕光栅
表面浮雕光栅是许多光学系统中的关键组件,在控制增强现实 (AR) 显示器、平视显示器 (HUD) 和其他先进光子器件中的光传播方面发挥着关键作用。作为在这个领域工作的工程师和设计师,您了解针对特定应用优化这…...
编译pytorch——cuda-toolkit-nvcc
链接 https://blog.csdn.net/wjinjie/article/details/108997692https://docs.nvidia.com/cuda/cuda-installation-guide-linux/#switching-between-driver-module-flavorshttps://forums.developer.nvidia.com/t/can-not-load-nvidia-drivers-on-ubuntu-22-10/239750https://…...
Linux 系统资源监控笔记
本文介绍如何在 Linux 系统中查看服务资源剩余情况,包括 CPU、内存、磁盘、网络等资源的监控方法和常用命令。 目录 查看 CPU 和内存使用情况查看磁盘使用情况查看网络使用情况查看服务资源占用查看系统整体资源使用情况图形化工具 1. 查看 CPU 和内存使用情况 使…...