鸿蒙OS ArkTS 省市县级联选择框,封装组件

背景:

公司现在要开发纯血鸿蒙版本APP,我被抽调过来做点功能。现在要做一个省市县级联选择框,并且要封装为组件,供其他页面模块使用。

效果图:

难点:

1. 现在官方文档上只是查到了TextPicker组件是可以做这样级联选择的效果

2. 这种弹窗,官方文档上是有半模态转场,只是这个半模态是一个严格和宿主节点绑定在一起的弹窗,需要绑定在触发的地方,才可以触发弹出,而且半模态转场中的bindSheet,需要初始化Builder类型装饰器(即模态框中要展示的内容),只是Builder装饰器不允许在组件外调用。

实现:

1. 创建一个组件,组件中内容包括选择器所需要的数据数组、选择器TextPicker所在的Builder装饰器,在TextPicker中去实现级联效果、组件build主体;通过状态(Link、State)来实现在目标页面调用选择器组件

2. 数据数组包括省市县的数据,可以静态写,也可以读取数据文件,我这是读的他们提供的地区xml文件

3. Builder装饰器是半模态专场初始化时的模态框中的内容,其中包括弹框顶部 “取消”、弹窗标题、“确定”布局和事件,下边的省市县三级选择器

@BuilderselectRegion() {Column() {Flex({justifyContent: FlexAlign.SpaceBetween,alignItems: ItemAlign.Center}) {Text($r('app.string.cancel_txt')).width('36lpx').fontColor('#4976EE').onClick(() => {this.showSheet = false;})Text(this.title).fontColor('#000').fontSize(18).fontWeight(600)Text($r('app.string.ok_txt')).width('36lpx').fontColor('#4976EE').onClick(() => {this.showSheet = false;if (this.okCallback) {this.okCallback(this.values);}})}.width('92%').height('36lpx').margin({ left: '4%', right: '4%', top: '6lpx' })TextPicker({range: this.range, //['北京', '北京市', '东城区']selected: $$this.selected, //[0, 0, 0]}).canLoop(false)// 不要循环.onChange((values) => {//进行防抖处理,防止滚动期间多次发送请求clearTimeout(this.timeId)this.timeId = setTimeout(async () => {let p = this.getProvince(values[0]);//当省份被改变if (this.values[0] !== values[0]) {this.range[1] = this.getCityArray(p.city) //市this.range[2] = this.getDistrictArray(p.city) //区//当省份发生变化需要把城市置零,当城市发生变化需要把地区置零this.selected[1] = 0this.selected[2] = 0//内容页面展示需要同步this.values[0] = values[0]this.values[1] = this.range[1][0]this.values[2] = this.range[2][0]//当城市被改变} else if (this.values[1] !== values[1]) {this.range[2] = this.getDistrictArrayByName(values[1], p.city) //区//当城市发生变化需要把地区置零this.selected[2] = 0//内容页面展示需要同步this.values[1] = values[1]this.values[2] = this.range[2][0]//当地区被改变} else if (this.values[2] !== values[2]) {//内容页面展示需要同步this.values[2] = values[2]}}, 100)})}}

4. 组件build主体,是封装的组件主体,是将来要放到要使用此组件的页面中的。在此主体中,绑定初始了半模态框,并定义了半模态框的一些样式

build() {Column().bindSheet($$this.showSheet, this.selectRegion(), {height: 260,showClose: false,shouldDismiss: ((sheetDismiss: SheetDismiss) => {console.log("bind sheet shouldDismiss")//sheetDismiss.dismiss()}),onWillDismiss: ((DismissSheetAction: DismissSheetAction) => {})})}

5.组件中状态和回调函数

  @Link range: string[][] //TextPicker的values数组 [[], [], []]@Link selected: number[] //TextPicker的index数组@Link values: string[] //选中后用于展示的数组 ['北京', '北京市', '东城区']@Link showSheet: boolean; //半模态框@Link title: string;timeId: number = -1 //防抖处理的延时器Idprivate okCallback?: (values: string[]) => void

6.在页面中引入并触发显示弹框组件

import { AreaRegion } from '../../model/AreaRegion'......@State isShowSelectRegion: boolean = false;showAreagion() {this.isShowSelectRegion = true;}build() {Column() {......AreaRegion({showSheet: $isShowSelectRegion,title: $regionSelectTitle,values: $regionData,selected: $regionSelected,range: $regionRange,okCallback: (values) => {/*更新账号所属地区*/let region = values[0] + values[1] + values[2]console.info(region)}).catch((msg: string) => {})}});Button('选择省市区').width('60%').margin({ left: '20%' }).fontColor('#fff').fontSize('22fp').backgroundColor('#2E74FE').onClick(() => {this.showAreagion();})}
}

7。这种做法感觉不是那么标准,因为是要在所使用的页面UI中先加载AreaRegion组件,然后再通过改变@State变量,传递到组件中,实现组件的展示与否。不过现在暂时没有想到其他方案,如果好办法,欢迎交流。

8.注意文中所贴代码不是全部的代码,可以参考这种方式以及重要实现步骤。

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

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

相关文章

Vue3+setup使用vuemap/vue-amap实现地图相关操作

首先要下载依赖并且引入 npm安装 // 安装核心库 npm install vuemap/vue-amap --save// 安装loca库 npm install vuemap/vue-amap-loca --save// 安装扩展库 npm install vuemap/vue-amap-extra --save cdn <script src"https://cdn.jsdelivr.net/npm/vuemap/vue-a…

软件测试需要具备的基础知识【功能测试】---前端知识(三)

​ ​ 您好&#xff0c;我是程序员小羊&#xff01; 前言 为了更好的学习软件测试的相关技能&#xff0c;需要具备一定的基础知识。需要学习的基础知识包括&#xff1a; 1、计算机基础 2、前端知识 3、后端知识 4、软件测试理论 后期分四篇文章进行编写&#xff0c;这是第二篇 …

使用es-hadoop同步hive和es之间数据

&#x1f4bb;近期在华为云连接es时的时候发现不能输入账号密码&#xff0c;后面联系华为工程师了解到&#xff0c;华为云默认是非安全模式&#xff0c;即不需要输入账号密码。 如果对你有所帮助&#xff0c;欢迎点赞收藏关注不迷路哦&#x1f493; 目录 使用es-hadoop同步h…

AI时代,我们还可以做什么?

最近看了本书&#xff0c;书名叫做《拐点&#xff1a;站在 AI 颠覆世界的前夜》&#xff0c;作者是万维钢。 本想着看完后&#xff0c;就能掌握一整套 AI 技巧&#xff0c;结果——竟然学了很多道理。 这本书讨论了以下话题&#xff1a; 我们该怎么理解这个 AI 大时代的哲学&am…

国产数据库备份恢复实现

数据库备份恢复是数据库高可用的基本能力&#xff0c;如何通过备份数据快速高效的恢复业务并且满足不同场景下的恢复需求&#xff0c;是各数据库厂商需要关注的要点。本文将介绍几种国产数据库的备份恢复功能&#xff0c;以加深了解。 1、数据库备份恢复方案 数据库备份是生产…

函数实例讲解(七)

文章目录 清洗数据的函数&#xff08;TRIM、CLEAN&#xff09;1、TRIM2、CLEAN3、CONCATENATE4、TEXTJOIN 函数综合练习COUNTIF Excel函数总结1、判断类2、求和类3、计数类4、求平均5、查找引用类6、求数据极值类7、四舍五入类8、提取类9、日期类10、文本处理类11、随机数12、排…

基于SpringBoot+Vue的校园失物招领系统(带1w+文档)

基于SpringBootVue的校园失物招领系统(带1w文档) 基于SpringBootVue的校园失物招领系统(带1w文档) 本课题研发的校园失物招领系统管理系统&#xff0c;就是提供校园失物招领系统信息处理的解决方案&#xff0c;它可以短时间处理完信息&#xff0c;并且这些信息都有专门的存储设…

MyBatis 基本操作 - 注解版

目录 一&#xff0c;查询 - select 1.1 全列查询 1.2 指定列查询 1.3 赋值问题 方法一&#xff1a;起别名 方法二&#xff1a;结果映射 方法三&#xff1a;添加配置 二&#xff0c;新增 - Insert 2.1 使用对象插入 2.2 获取主键 三&#xff0c;删除 - Delete 四&am…

nestjs 全栈进阶--文件上传

nest new upload -p pnpm pnpm i multer pnpm i -D types/multer 允许跨域 1. 单文件上传 我们去新增一个用于上传的handler Post(upload) UseInterceptors(FileInterceptor(file, {dest: uploads })) uploadFile(UploadedFile() file: Express.Multer.File, Body() body) {…

Git使用错误分析

一.fatal: Pathspec is in submodule 我做了这样的错误操作&#xff0c;在一个仓库下的一个子目录&#xff0c;执行了git init 创建了一个子仓库&#xff0c;然后想删掉这个子仓库&#xff0c;就只删除了该子目录下的.git文件夹&#xff0c;而没有删除缓存&#xff0c;执行如下…

Python | Leetcode Python题解之第328题奇偶链表

题目&#xff1a; 题解&#xff1a; class Solution:def oddEvenList(self, head: ListNode) -> ListNode:if not head:return headevenHead head.nextodd, even head, evenHeadwhile even and even.next:odd.next even.nextodd odd.nexteven.next odd.nexteven even…

UVM(3)TLM通信

基本定义 A的方框称之为PORT&#xff0c;B的圆圈称之为EXPORT 要注意&#xff1a;无论是get还是put操作&#xff0c; 其发起者拥有的都是PORT端口&#xff0c; 而不是EXPORT transport操作&#xff0c; 如 transport操作相当于一次put操作加一次get操作&#xff0c; 数据流先…

Spring统一功能处理:拦截器、响应与异常的统一管理

目录 一.拦截器 二.统一数据返回格式 三.统一异常处理 一.拦截器 拦截器是Spring框架提供的核⼼功能之⼀&#xff0c;主要⽤来拦截⽤⼾的请求&#xff0c;在指定⽅法前后&#xff0c;根据业务需要执⾏预先设定的代码。 也就是说&#xff0c;允许开发⼈员提前预定义⼀些逻辑…

c语言-文件

11 文件 目录 11 文件 一、文件系统 二、文件操作方式 1、基于缓冲区文件操作 2、基于非缓冲区文件操作 三、文件操作的常用函数 1、fopen 2、fclose 3、fputc 4、fgetc 5、rewind 6、fseek 7、fputs 8、fgets 9、fwrite 10、fread 11、fprintf 12、fscanf …

【Redis】数据结构篇

文章目录 键值对数据库是怎么实现的&#xff1f;动态字符串SDSC 语言字符串的缺陷SDS结构设计 整数集合整数集合结构设计整数集合的升级操作 哈希表哈希表结构设计哈希冲突链式哈希Rehash渐进式rehashrehash触发条件 压缩列表压缩列表结构设计连续更新压缩列表的缺陷 quicklist…

【Material-UI】Checkbox组件:Indeterminate状态详解

文章目录 一、什么是Indeterminate状态&#xff1f;二、Indeterminate状态的实现1. 基本用法示例2. 代码解析3. Indeterminate状态的应用场景 三、Indeterminate状态的UI与可访问性1. 无障碍设计2. 用户体验优化 四、Indeterminate状态的最佳实践1. 状态同步2. 优化性能3. 提供…

ubuntu20.04 环境搭建教程

1&#xff1a; Ubuntu 版本说明 我使用版本为 ubuntu20.04 ->镜像文件网上下载最新版本 mirrors.huaweicloud.com/ubuntu-releases/20.04.6/ Ubuntu 其他说明 Ubuntu 安装的位置不建议放到 C 盘(除非你只有一个 C 盘) Ubuntu 需要 120G 的空间 2&#xff1…

vue项目前端实现将table导出成excel功能2

使用插件 xlsx、xlsx-style、file-saver 具体引入见文章&#xff1a;vue项目前端实现将table导出成excel功能1 方法一 exportExcelByData&#xff1a;将数据导出成excel&#xff0c;合并单元格需要另外设置 方法二 exportExcelByDom&#xff1a;将页面dom(el-table)导出成…

媒体资讯视频数据采集-yt-dlp-python实际使用-下载视频

对于视频二创等一些业务场景&#xff0c;可能要采集youtube等的相关媒体视频资源&#xff0c;使用[yt-dlp](https://github.com/yt-dlp/yt-dlp)是一个不错的选择&#xff0c;提供的命令比较丰富&#xff0c;场景比较全面yt-dlp 是一个用 Python 编写的命令行工具&#xff0c;主…

Linux部署python3.0版本——及基本操作

&#xff08;一&#xff09;部署环境 首先查看列表&#xff0c;找到python3.0的包 yum list installed|grep python 如果没有&#xff0c;是因为yum源的问题&#xff0c;可部署阿里云镜像然后下载epel包&#xff0c;这里的内容可参考前面的阿里云镜像部署 然后进行下载 yum…