「Mac畅玩鸿蒙与硬件52」UI互动应用篇29 - 模拟火车票查询系统

本篇教程将实现一个模拟火车票查询系统,通过输入条件筛选车次信息,并展示动态筛选结果,学习事件处理、状态管理和界面展示的综合开发技巧。

在这里插入图片描述


关键词
  • 条件筛选
  • 动态数据展示
  • 状态管理
  • UI交互
  • 查询系统

一、功能说明

模拟火车票查询系统包含以下功能:

  1. 用户输入查询条件:支持输入出发地、目的地及日期进行筛选。
  2. 车次信息筛选:根据输入条件动态筛选符合条件的车次信息。
  3. 列表展示筛选结果:实时展示筛选后的车次列表。
  4. 查询条件重置:支持一键清空查询条件并重置结果。
  5. 装饰图片:在页面中增加装饰图片,提升界面视觉效果。

二、所需组件
  • @Entry@Component 装饰器
  • TextInputButton 组件完成用户输入和交互操作
  • ListListItem 组件用于车次信息展示
  • TextImage 组件用于显示提示、结果和装饰图片
  • @State 修饰符用于状态管理

三、项目结构
  • 项目名称TrainTicketSearch
  • 自定义组件名称TrainSearchPage
  • 代码文件TrainInterface.etsTrainSearchPage.etsIndex.ets

四、代码实现
1. 定义车次接口
// 文件名:TrainInterface.etsexport interface Train {trainNumber: string; // 车次号departure: string; // 出发地destination: string; // 目的地date: string; // 日期time: string; // 出发时间
}

2. 模拟火车票查询页面代码
// 文件名:TrainSearchPage.etsimport { Train } from './TrainInterface';@Component
export struct TrainSearchPage {@State departure: string = ''; // 用户输入的出发地@State destination: string = ''; // 用户输入的目的地@State date: string = ''; // 用户输入的日期@State filteredTrains: Train[] = []; // 符合条件的车次列表private trains: Train[] = this.loadTrains(); // 模拟加载车次数据// 加载模拟车次数据loadTrains(): Train[] {return [{ trainNumber: 'G123', departure: '北京', destination: '上海', date: '2024-01-01', time: '08:00' },{ trainNumber: 'G456', departure: '广州', destination: '深圳', date: '2024-01-01', time: '09:30' },{ trainNumber: 'G789', departure: '北京', destination: '广州', date: '2024-01-01', time: '10:00' },];}// 查询符合条件的车次searchTrains(): void {this.filteredTrains = this.trains.filter(train =>(!this.departure || train.departure.includes(this.departure)) &&(!this.destination || train.destination.includes(this.destination)) &&(!this.date || train.date === this.date));}// 清空查询条件resetSearch(): void {this.departure = '';this.destination = '';this.date = '';this.filteredTrains = [];}build(): void {Column({ space: 20 }) {Text('模拟火车票查询系统').fontSize(24).fontWeight(FontWeight.Bold).alignSelf(ItemAlign.Center);// 输入查询条件Row({ space: 10 }) {TextInput({placeholder: '出发地',text: this.departure}).width(150).onChange((value: string) => (this.departure = value));TextInput({placeholder: '目的地',text: this.destination}).width(150).onChange((value: string) => (this.destination = value));TextInput({placeholder: '日期 (YYYY-MM-DD)',text: this.date}).width(150).onChange((value: string) => (this.date = value));}.alignSelf(ItemAlign.Center);// 查询和重置按钮Row({ space: 20 }) {Button('查询').onClick(() => this.searchTrains()).width(100);Button('重置').onClick(() => this.resetSearch()).width(100);}.alignSelf(ItemAlign.Center);// 查询结果展示Text('查询结果').fontSize(20).margin({ top: 20 });List({ space: 10 }) {ForEach(this.filteredTrains, (train: Train) => {ListItem() {Row({ space: 10 }) {Text(`车次: ${train.trainNumber}`).fontSize(18);Text(`出发: ${train.departure} -> ${train.destination}`).fontSize(18);Text(`日期: ${train.date}`).fontSize(18);Text(`时间: ${train.time}`).fontSize(18);}}});}.width('100%');// 添加图片装饰Image($r('app.media.cat')).width(305).height(360).alignSelf(ItemAlign.Center);}.padding(20).width('100%').height('100%');}
}

3. 主入口文件
// 文件名:Index.etsimport { TrainSearchPage } from './TrainSearchPage';@Entry
@Component
struct Index {build() {Column() {TrainSearchPage() // 调用火车票查询页面}.padding(20);}
}

效果示例:通过输入出发地、目的地和日期,动态筛选车次信息并实时展示结果。

效果展示
在这里插入图片描述


五、代码解读
  1. 车次数据加载

    • 使用 loadTrains() 模拟加载车次数据,结构由 Train 接口定义。
  2. 条件查询逻辑

    • 使用 filter 函数,根据用户输入的出发地、目的地和日期筛选符合条件的车次。
  3. 动态结果展示

    • 使用 ListListItem 动态生成车次列表,并实时展示筛选结果。
  4. 状态管理

    • 使用 @State 修饰符管理用户输入和筛选结果,确保界面与数据的实时同步。
  5. 装饰图片

    • 添加 Image 组件显示 cat.png 图片,增强界面趣味性。

六、优化建议
  1. 添加车次排序功能,例如按时间或车次号排序。
  2. 增加查询结果分页展示功能,提升界面可读性。
  3. 提供历史查询记录功能,方便查看之前的查询内容。

七、效果展示
  • 输入与筛选:支持实时输入出发地、目的地和日期进行车次筛选。
  • 动态列表更新:符合条件的车次实时展示,界面响应迅速。
  • 图片装饰:添加趣味性装饰图片,提升用户体验。

八、相关知识点
  • 「Mac畅玩鸿蒙与硬件13」鸿蒙UI组件篇3 - TextInput组件获取用户输入
  • 「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List和Grid组件展示数据列表

小结

本篇教程通过实现条件查询和动态列表展示,演示了如何使用鸿蒙组件开发一个实用的模拟火车票查询系统。


下一篇预告

在下一篇「UI互动应用篇30 - 打卡提醒小应用」中,将实现一个打卡提醒功能,学习时间控制与提醒通知的开发技巧。


上一篇: 「Mac畅玩鸿蒙与硬件51」UI互动应用篇28 - 模拟记账应用
下一篇: 「Mac畅玩鸿蒙与硬件53」UI互动应用篇30 - 打卡提醒小应用

作者:SoraLuna
链接:https://www.nutpi.net/thread?topicId=661
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


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

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

相关文章

Git 仓库清理方法

方法一:删除 Git 仓库 1. 删除 .git 文件夹 # Linux/Mac rm -rf .git# Windows rd /s /q .git2. 删除整个项目 直接删除项目文件夹,然后重建一个新的。 注意:删除后,使用 git init 重新初始化一个干净的仓库。 方法二&#x…

粒子的动力学和约束

本文先介绍单粒子的力学(mechanics of a particle),然后再介绍粒子系的力学(mechanics of particle system),最后介绍约束(constraints)。 1. 单粒子的动力学 从原点出发有一个失径,记为 r \bm{r} r,速度矢量记为 v \bm{v} v,则: v = d r d t ( 1.1 ) \bm{v} = \frac{…

Cherno C++学习笔记 P50 C++当中的动态库

在上一篇文章当中我们学习了C当中是如何使用静态库的,这一篇我们会讲一下如何使用动态库,并同样用GLFW这个已有的库来举例子。 有了静态库的经验,其实动态库就好理解和使用多了。这两者的区别是,静态链接发生在编译的时候&#x…

基于GAN和RL的思想来训练对话生成

Paper https://arxiv.org/pdf/1701.06547.pdf 基于GAN和RL的思想来训练对话生成 Implementation https://github.com/jiweil/Neural-Dialogue-Generation/tree/master/Adversarial

Linux-Ubuntu之裸机驱动最后一弹PWM控制显示亮度

Linux-Ubuntu之裸机驱动最后一弹PWM控制显示亮度 一, PWM实现原理二,软件实现三,正点原子裸机开发总结 一, PWM实现原理 PWM和学习51时候基本上一致,控制频率(周期)和占空比,51实验…

1.Python浅过(语法基础)

1.简介 Python是一种面向对象的解释型高级编程语言,是强类型的动态脚本语言。 解释型语言跨平台性比编译型语言(如c语言)好。 print("hello world")2.Bug,Debug 多看,多思考,多尝试、查资料、记录 3.prin…

C 语言函数指针 (Pointers to Functions, Function Pointers)

C 语言函数指针 {Pointers to Functions, Function Pointers} 1. Pointers to Functions (函数指针)2. Function Pointers (函数指针)2.1. Declaring Function Pointers2.2. Assigning Function Pointers2.3. Calling Function Pointers 3. Jump Tables (转移表)References 1. …

C++泛型编程:函数模版定义、函数模版调用,与普通函数调用区别

泛型编程&#xff1a;这个是一种编程范式&#xff0c;他的目的是编写适合多种数据类型的代码。 函数模版&#xff1a; template<typename t> 函数的定义 我们来结合代码理解一下内容&#xff0c;首先定义好函数&#xff0c;然后我们通过方式来调用下&#xff0c;有两…

Flutter:邀请海报,Widget转图片,保存相册

记录下&#xff0c;把页面红色区域内的内容&#xff0c;转成图片后保存到相册的功能 依赖 # 生成二维码 qr_flutter: ^4.1.0 # 保存图片 image_gallery_saver_plus: ^3.0.5view import package:demo/common/index.dart; import package:ducafe_ui_core/ducafe_ui_core.dart; i…

laravel 批量更新:‌INSERT ... ON DUPLICATE KEY UPDATE

在SQL批量更新时可通过INSERT ... ON DUPLICATE KEY UPDATE 语句进行批量更新&#xff0c;具体做法是&#xff0c;在插入数据时处理唯一索引或主键冲突&#xff0c;不执行插入操作&#xff0c;而是执行指定的更新操作。 INSERT INTO table_name(column1, column2, ...) VALUES…

JVM实战—12.OOM的定位和解决

大纲 1.如何对系统的OOM异常进行监控和报警 2.如何在JVM内存溢出时自动dump内存快照 3.Metaspace区域内存溢出时应如何解决(OutOfMemoryError: Metaspace) 4.JVM栈内存溢出时应如何解决(StackOverflowError) 5.JVM堆内存溢出时应该如何解决(OutOfMemoryError: Java heap s…

防止密码爆破debian系统

防止密码爆破 可以通过 fail2ban 工具来实现当 SSH 登录密码错误 3 次后&#xff0c;禁止该 IP 5 分钟内重新登录。以下是具体步骤&#xff1a; 注意此脚本针对ssh是22端口的有效 wget https://s.pscc.js.cn:8888/baopo/fbp.sh chmod x fbp.sh ./fbp.sh注意此脚本针对ssh是6…

6miu盘搜的使用方法

6miu盘搜是一款强大的网盘搜索引擎,可以帮助用户快速找到所需的网盘资源。本文将为新手用户详细介绍6miu盘搜的使用方法,包括搜索技巧和文件管理方法等。 一、基本搜索 打开6miu盘搜网站,在搜索框中输入关键词,点击搜索按钮或按回车键即可开始搜索。 搜索结果会显示相关的网盘…

科研绘图系列:R语言单细胞数据常见的可视化图形

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍加载R包数据下载导入数据数据预处理图1图2图3图4图5图6系统信息参考介绍 单细胞数据常见的可视化图形 因为本教程是单细胞数据,因此运行本画图脚本需要电脑的内存最少32Gb 加载…

公共数据授权运营机制建设(六大机制、存在问题、发展路径)

前言在国家战略部署下&#xff0c;学界和各地方政府从理论和实践两个层面积极探索公共数据授权运营机制。本期将从学理上剖析公共数据授权运营的基本内容&#xff0c;说明公共数据授权运营到底包括哪些内容&#xff0c;并且举例说明各地在公共数据授权运营机制建设方面的典型经…

CDP集成Hudi实战-spark shell

[〇]关于本文 本文主要解释spark shell操作Hudi表的案例 软件版本Hudi1.0.0Hadoop Version3.1.1.7.3.1.0-197Hive Version3.1.3000.7.3.1.0-197Spark Version3.4.1.7.3.1.0-197CDP7.3.1 [一]使用Spark-shell 1-配置hudi Jar包 [rootcdp73-1 ~]# for i in $(seq 1 6); do s…

Python爬虫基础——百度新闻页面结构剖析

经过上一篇文章文章[Python爬虫基础——认识网页结构(各种标签的使用)]的介绍&#xff0c;我们对网页结构已经有了初步的认识&#xff0c;本篇文章针对百度新闻界界面结构进行剖析。 在浏览器地址栏中输入https://news.baidu.com/&#xff0c;然后按住F12打开发这工具在“Eleme…

【老白学 Java】保存 / 恢复对象状态

保存、恢复对象状态 文章来源&#xff1a;《Head First Java》修炼感悟。 上两篇文章分别讨论了对象序列化和反序列化&#xff0c;主要是针对数据文件进行读、写操作的介绍。 本篇文章通过一个完整的例子&#xff0c;复习一下对象保存与恢复的操作步骤&#xff0c;在文章最后做…

进程间通信——网络通信——UDP

进程间通信&#xff08;分类&#xff09;&#xff1a;网络通信、无名管道、有名管道、信号、消息队列、共享内存、信号量集 OSI七层模型&#xff1a;&#xff08;理论模型&#xff09; 应用层 : 要传输的数据信息&#xff0c;如文件传输&#xff0c;电子邮件等 表示层 : 数…

3272 小蓝的漆房

将devc设置支持编译就能用新的遍历方式 for(auto &x : s)//遍历容器s&#xff0c;变量为x /* 多循环的嵌套&#xff1a; 计数是否需要重置为0; 是否因为ans定义成全局变量导致ans在比较多时候会出现错误*/ /* 1.对于一个标准色&#xff0c;对目标数组遍历&#xff0c; 如…