当前位置: 首页 > news >正文

鸿蒙开发城市联动选择弹框

鸿蒙开发城市联动选择弹框

城市联动选择弹框不容易,在Android那边也是不容易。选择某个省份时,城市要对得上,切换得及时

一、思路:

关键用@Provide和@Consume互相监听对方的变化

二、效果图:

在这里插入图片描述

三、视频效果:

鸿蒙Next开发教程实战案例源码分享-城市联动选择弹框

四、关键代码如下:
// 联系:893151960
@Component
export struct ProvinceLevelComponent {@State labelList: string[] = [];@Consume selectProvinceIndex: number ;@Consume currentFirst: string;@Consume dataSource: Array<ProvinceListBean>;aboutToAppear() {for (let i = 0; i < this.dataSource.length; i++) {this.labelList.push(this.dataSource[i].province)if (this.dataSource[i].province === this.currentFirst) {this.selectProvinceIndex = i;}}this.currentFirst = this.dataSource[this.selectProvinceIndex].province}build() {Column() {Column() {if (this.labelList.length === 0) {Text('暂无数据').fontSize(20)} else {TextPicker({ range: this.labelList, selected: this.selectProvinceIndex }).onChange((value: string|string[], index: number|number[]) => {if (typeof  index === 'number') {this.selectProvinceIndex = indexthis.currentFirst = this.dataSource[index].province}}).selectedTextStyle({color:$r('app.color.color_main')}).canLoop(false)}}.backgroundColor(Color.White).border({ color: '#e2e2e2', width: { right: 0.5 }}).width('100%').layoutWeight(1).justifyContent(FlexAlign.Center)}.height('100%')}
}
@Component
export struct CityLevelComponent {@State mTip: string = '暂无数据'@Consume @Watch('onFirstChange') currentFirst: string;@Consume currentSecond: string;@Consume selectProvinceIndex: number;@State labelList: string[] = [];@State select: number = 0;@Consume dataSource: Array<ProvinceListBean>;isIncludeUnlimited:boolean = trueaboutToAppear(){this.onFirstChange()}build() {Column() {Column() {if (this.labelList.length === 0) {Text(this.mTip).fontSize(20)} else {TextPicker({ range: this.labelList, selected: this.select }).onChange((value: string | string[], index: number | number[]) => {if (typeof  index === 'number') {this.select = indexthis.currentSecond = this.labelList[index]}}).selectedTextStyle({color:$r('app.color.color_main')}).canLoop(false)}}.backgroundColor(Color.White).border({color: '#e2e2e2',width: { right: 0.5 }}).width('100%').layoutWeight(1).justifyContent(FlexAlign.Center)}.height('100%')}//   export interface ProvinceCityAreaDataBean{
//   version?:number
//   list?:Array<ProvinceListBean>
// }
//
// export interface ProvinceListBean{
//   province?:string
//   cityList?:Array<CityListBean>
// }
//
// export interface CityListBean{
//   city?:string
// }onFirstChange() {this.labelList = []let tempList : string[] = []let cityList : Array<CityListBean> = []let json: ProvinceListBean = JSON.parse(JSON.stringify(this.dataSource[this.selectProvinceIndex]));cityList = json.cityList!if (this.isIncludeUnlimited){if (cityList.length > 1) {tempList.push('全省')}}for (let i = 0; i < cityList.length; i++) {tempList.push(cityList[i].city)}this.labelList = tempListif (this.isIncludeUnlimited || !this.currentSecond) {this.select = 0;this.currentSecond = this.labelList[this.select]} else {for (let i = 0; i < this.labelList.length; i++) {if (this.labelList[i] === this.currentSecond) {this.select = i;this.currentSecond = this.labelList[this.select]break}}// 切换了省,但是没滑动市if (this.select === 0) {this.currentSecond = this.labelList[this.select]}}}}
五、完整项目demo源码结构图:

在这里插入图片描述有需要完整源码的可私信我

相关文章:

鸿蒙开发城市联动选择弹框

鸿蒙开发城市联动选择弹框 城市联动选择弹框不容易&#xff0c;在Android那边也是不容易。选择某个省份时&#xff0c;城市要对得上&#xff0c;切换得及时 一、思路&#xff1a; 关键用Provide和Consume互相监听对方的变化 二、效果图&#xff1a; 三、视频效果&#xff1…...

css 控制虚线刻度尺寸

文章目录 css效果 css <div style"width: 100%; height: 1px;background-image: linear-gradient(to right, #545454 0%, #545454 80%, transparent 5%);background-size: 15px 10px;background-repeat: repeat-x; margin: 0 auto;"></div>效果...

NLP三天入门大模型,我领先你好几个版本了

大模型时代下&#xff0c;nlp初学者需要怎么入门? 入门姿势简单粗暴:打一些必要的基础就跑步进入Transformera 大模型时代&#xff0c;传统的算法&#xff0c;像分词、词性标注&#xff0c;被替代得非常厉害&#xff0c;在入门阶段没必要花费太多精力在传统算法上面。 数学和…...

专题六_模拟_算法详细总结

目录 模拟算法 1.模拟算法流程&#xff08;一定要在草稿纸上演算一遍流程&#xff09; 2.把流程转换成代码 1. 替换所有的问号&#xff08;easy&#xff09; 解析&#xff1a; 1.暴力&#xff1a; 2.优化&#xff1a;&#xff08;找规律&#xff09; 总结&#xff1a; …...

ArrayList的扩容机制

ArrayList的扩容机制 ArrayList中的成员变量&#xff1a;1.不带参数的构造方法 让elementDate 引用指向 DEFAULTCAPACITY_EMPTY_ELEMENTDATA所指向的对象 > 当我们调用 不带参数的构造方法的时候 第一次进行add元素的时候&#xff0c;会为底层的数组 进行内存的分配&…...

一、编译原理(引论)

目录 【一】、引论 一、编译器 1、编译器 2、编译器与解释器 3、编译器结构 【一】、引论 一、编译器 1、编译器 &#xff08;1&#xff09;编译器&#xff1a;将人类易懂的 高级语言 翻译成 硬件可执行的目标机器语言 &#xff08;2&#xff09; 高级语言 ⚫ 直接面…...

【Javascript修炼篇】JS中的函数式编程

介绍&#xff1a; 函数式编程&#xff08;FP&#xff09;是一种编程范式&#xff0c;这意味着一种基于一些原则来思考软件构建的方法&#xff0c;比如 纯函数、不可变性、一等与高阶函数、函数组合、闭包、声明式编程、递归、引用透明性、柯里化 和 部分应用。 当这些原则有效…...

spring cxf 常用注解

在Spring框架中&#xff0c;特别是当与Apache CXF&#xff08;一个流行的SOAP和RESTful Web服务框架&#xff09;结合使用时&#xff0c;我们会遇到一系列的注解。以下是一些在Spring和CXF中常用的注解&#xff1a; Spring相关注解&#xff1a; Component&#xff1a;用于定义一…...

python | x-y 网格切片

写在前面 通常&#xff0c; 我们处理的毕竟完善的nc产品&#xff0c;一般呈现未timexlatxlon的维度&#xff0c;且lon和lat都是规则的网格&#xff0c;我们可以方便的使用xarray.sel()选择合适的区域进行切片。但是&#xff0c;部分nc产品比如卫星轨道或者模式输出的数据&…...

【C#】vs2022 .net8

Visual Studio 2022 IDE - 适用于软件开发人员的编程工具 (microsoft.com) 更新就会出现...

【华为杯】第二十一届中国研究生数学建模竞赛

“华为杯”第二十一届中国研究生数学建模竞赛即将开始&#xff0c;梦想科研社给大家整理一些比赛信息&#xff0c;在正式开赛后&#xff0c;我们也会持续分享一些课题的分析以及代码&#xff0c;有需要的可以联系我们获取资料信息哦 一、时间节点 1.加密赛题开始下载时间&…...

首次开机android.intent.action.BOOT_COMPLETED开机广播发送慢的问题

1. 背景 做过android开发的同学相信一定做个这种逻辑:app接收BOOT_COMPLETED开机广播&#xff0c;自启动&#xff0c;或者收到广播做一些事情。目前在我们的项目上遇到首次开机&#xff0c;BOOT_COMPLETED开机广播发送慢的问题。接下来分享记录下如何定位这类问题。 2. 分析过…...

通信工程学习:什么是OLT光线路终端

OLT&#xff1a;光线路终端 OLT&#xff08;Optical Line Terminal&#xff0c;光线路终端&#xff09;是光纤通信系统中的核心局端设备&#xff0c;特别是在无源光网络&#xff08;Passive Optical Network, PON&#xff09;架构中扮演着至关重要的角色。以下是关于OLT光线路终…...

Unity的Button组件进行扩展

废话不多说&#xff0c;在Untiy中&#xff0c;如果想要对Button等组件进行扩展的话&#xff0c;那么不仅仅只需要将新增的属性设置为public或者增加SerializeField字段就行了的&#xff0c;同时需要对Inspector的GUI面板进行修改&#xff0c;以下直接展示代码&#xff1a; usi…...

前端vue-插值表达式和v-html的区别

创建vue实例的时候&#xff0c;可以有两种形式。 1.let appnew Vue({}) 2 const appnew Vue({}) 3 el是挂载点&#xff0c;是上面div的id值 4 data中的值可以展示在上面div中 5 v-html标签里面如果有内容&#xff0c;则我们的新内容会把标签里面的内容覆盖掉...

【开发心得】筑梦上海:项目风云录(4)

不知不觉已经写到了第4篇&#xff0c;天下大事&#xff0c;必作于细。 其实项目管理也是如此&#xff0c;成功都在细节之处。自从博士离开以后&#xff0c;项目逐步开始进入了正常轨道。来来回回的30多人&#xff0c;也不能一一列举的记流水账。 目录 会海和MSN 小娇往事 …...

el-table使用el-switch选择器没效果

出现问题的代码: 0表示启用&#xff0c;1表示禁用&#xff0c;发现页面根本没有效果&#xff0c;百思不得其解&#xff0c;查阅资料&#xff0c;恍然大悟。 <el-table :data"userList" stripe border style"width: 100%" height"500"><…...

libserailport交叉编译适配说明

1&#xff1a;libserialport简介 github路径 自己的gitee路径 libserialport 是一个跨平台的串口通信库&#xff0c;由 sigrok 项目开发。它简洁、易用&#xff0c;并且支持多种操作系统。 libserialport 支持阻塞和非阻塞模式&#xff0c;可以根据你的需求选择适当的模式。阻…...

C语言中的一些小知识(二)

一、"%"运算符两侧只能是整数 在C语言中&#xff0c;% 运算符称为模运算符或取余运算符&#xff0c;它用于计算两个整数相除后的余数。当使用 % 运算符时&#xff0c;操作数必须是整数类型&#xff08;包括 char、int、long 等&#xff09;。 语法 remainder div…...

使用 Go 语言实现简单聊天系统

在互联网时代&#xff0c;聊天系统是常见的应用场景之一。无论是即时通讯、在线客服还是多人游戏中的消息系统&#xff0c;聊天功能的实现都是必不可少的。本文将使用 Go 语言&#xff0c;结合 WebSocket 来构建一个简单的多人聊天室系统。 一、项目结构 首先&#xff0c;我们…...

【技术干货】Qwen 3.6 Plus 实战:用百万上下文打造“代理式”AI 编码工作流

摘要 本文从工程视角拆解 Qwen 3.6 Plus&#xff1a;百万 token 上下文、面向“代理式编码”的能力&#xff0c;以及闭源旗舰开源工具的组合策略。结合实际项目需求&#xff0c;给出如何通过 OpenAI 兼容 API接入该类模型&#xff0c;并构建仓库级代码助手的完整 Python 示例和…...

PanSearch网盘影视资源搜索聚合工具源码解析:集成多引擎搜索技术,畅享跨平台资源检索

在数字化信息爆炸的时代&#xff0c;影视资源的获取方式日益多样化&#xff0c;但如何在海量资源中快速定位所需内容&#xff0c;成为用户面临的一大挑战。PanSearch网盘影视资源搜索聚合工具应运而生&#xff0c;它通过集成多引擎搜索技术&#xff0c;支持百度网盘、阿里云盘等…...

IEEE旗下通信类期刊全解析:从影响因子看学术风向标(2023最新版)

IEEE通信类期刊2023全景透视&#xff1a;影响因子背后的学术趋势与选刊策略 翻开最新发布的《期刊引证报告》&#xff08;JCR2023&#xff09;&#xff0c;IEEE旗下通信类期刊的影响因子变化再次成为学界热议焦点。作为全球最大的专业技术组织之一&#xff0c;IEEE出版的期刊向…...

TVA:未来无人车间和智能工厂的质检中枢

「本文已用流量券推广&#xff0c;欢迎收藏 关注」当制造业加速迈向智能化&#xff0c;现代企业的竞争已从产能规模转向技术实力与品质管控能力。AI智能体视觉检测系统&#xff08;TVA&#xff09;作为智能制造的核心技术之一&#xff0c;正在成为企业构建智能工厂的关键支撑&…...

-python-langchain框架(3-3-常用的几种文本分割 )

一、文本分割的核心逻辑与关键参数无论哪种分割方法&#xff0c;核心都是通过参数控制文本块的大小和关联性&#xff0c;先理清这几个核心参数&#xff0c;后续方法理解会事半功倍&#xff1a;chunk_size&#xff1a;单个文本块的最大长度&#xff08;字符 / Token 数&#xff…...

2025 年12月 1日KB5070311(操作系统内部版本26200.7309和26100.7309)预览 版

&#x1f525;个人主页&#xff1a;杨利杰YJlio❄️个人专栏&#xff1a;《Sysinternals实战教程》《Windows PowerShell 实战》《WINDOWS教程》《IOS教程》《微信助手》《锤子助手》 《Python》 《Kali Linux》《那些年未解决的Windows疑难杂症》&#x1f31f; 让复杂的事情更…...

效率倍增:用快马生成openclaw一键式部署与配置工具

效率倍增&#xff1a;用快马生成openclaw一键式部署与配置工具 最近在团队协作时遇到了一个头疼的问题&#xff1a;每次新成员加入或者更换开发机&#xff0c;都需要手动部署openclaw环境。这个过程中不仅需要重复下载、解压、配置&#xff0c;还经常因为网络代理、权限等问题…...

Path of Building终极指南:免费离线Build规划工具让流放之路角色构建变简单

Path of Building终极指南&#xff1a;免费离线Build规划工具让流放之路角色构建变简单 【免费下载链接】PathOfBuilding Offline build planner for Path of Exile. 项目地址: https://gitcode.com/GitHub_Trending/pa/PathOfBuilding 你知道吗&#xff1f;在《流放之路…...

EViews实战:时间序列分析的平稳性检验与建模全流程

1. 时间序列分析入门&#xff1a;为什么需要平稳性检验&#xff1f; 我第一次接触时间序列分析时&#xff0c;最困惑的就是为什么要做平稳性检验。直到在金融数据分析项目里踩了坑才明白&#xff1a;非平稳序列直接建模会导致预测结果完全失真。比如分析某上市公司股价时&#…...

HTTP3 QUIC快速重传机制解析:如何优化网络传输效率

1. HTTP3 QUIC快速重传机制的核心价值 你有没有遇到过视频卡顿、网页加载慢的问题&#xff1f;这背后往往是因为网络丢包导致的传输效率下降。HTTP3 QUIC协议的快速重传机制就是为了解决这个问题而生的。相比传统的TCP协议&#xff0c;QUIC在应对网络丢包时表现更加出色&#x…...