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

「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
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


相关文章:

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

本篇教程将实现一个模拟火车票查询系统,通过输入条件筛选车次信息,并展示动态筛选结果,学习事件处理、状态管理和界面展示的综合开发技巧。 关键词 条件筛选动态数据展示状态管理UI交互查询系统 一、功能说明 模拟火车票查询系统包含以下功…...

Dubbo 核心知识全解析:原理、流程与关键机制

1.说说一次 Dubbo 服务请求流程? Dubbo 是一个分布式服务框架,它简化了基于 SOA(面向服务架构)的应用程序的开发。一次典型的 Dubbo 服务请求流程如下: 服务提供者启动: 服务提供者启动后,会向注册中心注册…...

时间序列预测算法---LSTM

目录 一、前言1.1、深度学习时间序列一般是几维数据?每个维度的名字是什么?通常代表什么含义?1.2、为什么机器学习/深度学习算法无法处理时间序列数据?1.3、RNN(循环神经网络)处理时间序列数据的思路?1.4、RNN存在哪些问题? 二、…...

二十三种设计模式-建造者模式

建造者模式(Builder Pattern)是一种创建型设计模式,它提供了一种分步骤构建复杂对象的方法。这种模式允许你通过相同的创建过程构建不同的表示。建造者模式将一个复杂对象的构建与其表示分离,使得同样的构建过程可以创建不同的对象…...

MarkDown 的 mermaid gantt(甘特图)、mermaid sequenceDiagram (流程图) 语法解析和应用

简简单单 Online zuozuo: 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo :本心、输入输出、结果 简简单单 Online zuozuo : 文章目录 MarkDown 的 mermaid gantt、mermaid sequenceDiagram 语法解析和应用前言mermaid gan…...

git submodule的使用:将别人的git仓库作为自己的子仓库

git的基本操作在该篇中展示:git的基本操作在日常开发中,我们经常会碰到需要将别人的仓库作为自己的子仓库来进行开发。下面将介绍具体将如何操作。 1、添加Submodule至自己的git仓库 1.1、创建自己的Git仓库 (1)在github中创建自…...

Springboot 下载附件

GetMapping("/download") public void download(RequestParam String fileId, HttpServletResponse response) throws IOException {// 查询文件信息SysFileEntity sysFileEntity fileService.queryFileById(fileId);response.setContentType("application/oct…...

MySQL 延迟复制:确保数据安全与系统稳定的秘诀

MySQL 延迟复制:确保数据安全与系统稳定的秘诀 在 MySQL 主从复制架构中,数据的同步通常是实时的。然而,在一些特定场景下,我们可能不希望从库立刻同步主库的所有更新。特别是在高风险操作或者主库出现故障时,实时复制…...

ELK 使用教程采集系统日志 Elasticsearch、Logstash、Kibana

前言 你知道对于一个系统的上线考察,必备的几样东西是什么吗?其实这也是面试中考察求职者,是否真的做过系统开发和上线的必备问题。包括:服务治理(熔断/限流) (opens new window)、监控 (opens new window)和日志,如果…...

python实现自动登录12306抢票 -- selenium

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 python实现自动登录12306抢票 -- selenium 前言其实网上也出现了很多12306的代码,但是都不是最新的,我也是从网上找别人的帖子,看B站视频&…...

使用Diffusion Models进行图像超分辩重建

Diffusion Models专栏文章汇总:入门与实战 前言:图像超分辨率重建是一个经典CV任务,其实LR(低分辨率)和 HR(高分辨率)图像仅在高频细节上存在差异。通过添加适当的噪声,LR 图像将变得与其 HR 对应图像无法区分。这篇博客介绍一种方式巧妙利用这个规律使用Diffusion Mod…...

吾杯网络安全技能大赛——Misc方向WP

吾杯网络安全技能大赛——Misc方向WP Sign 题目介绍: 浅浅签个到吧 解题过程: 57754375707B64663335376434372D333163622D343261382D616130632D3634333036333464646634617D 直接使用赛博橱子秒了 flag为 WuCup{df357d47-31cb-42a8-aa0c-6430634ddf4a} 原神启动…...

Web安全 - “Referrer Policy“ Security 头值不安全

文章目录 概述原因分析风险说明Referrer-Policy 头配置选项1. 不安全的策略no-referrer-when-downgradeunsafe-url 2. 安全的策略no-referreroriginorigin-when-cross-originsame-originstrict-originstrict-origin-when-cross-origin 推荐配置Nginx 配置示例 在 Nginx 中配置 …...

C#OPC(上)

OPC(OLE for Process Control),用于过程控制的OLE,是一个工业标准,管理这个标准的国际组织是OPC基金会,OPC基金会现有会员以超过220家。遍布全球,包括世界上所有主要的自动化控制系统、仪器仪表及过程控制系统的公司。基于微软的O…...

Imgui + Cmake + OpenGL + GLFW 隐藏控制台窗口

网上一般是VS&#xff0c;如何在属性里面把控制台改为窗口 本文&#xff0c;使用Clion Cmake&#xff0c;实现如何隐藏控制台窗口 环境&#xff1a;OpenGL3 GLFW 添加头文件#include <windows.h>把main函数入口改为int WinMain(HINSTANCE hInstance, HINSTANCE hPrevI…...

Spring Boot(七):Swagger 接口文档

1. Swagger 简介 1.1 Swagger 是什么&#xff1f; Swagger 是一款 RESTful 风格的接口文档在线自动生成 功能测试功能软件。Swagger 是一个规范和完整的框架&#xff0c;用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。目标是使客户端和文件系统作为服务器以同样的…...

RabbitMQ - 4 ( 22000 字 RabbitMQ 入门级教程 )

一&#xff1a; RabbitMQ 高级特性 前面主要讲解了 RabbitMQ 的概念和应用。RabbitMQ 实现了 AMQP 0-9-1 规范&#xff0c;并在此基础上进行了多项扩展。在 RabbitMQ 官方网站中详细介绍了其特性&#xff0c;我们将其中一些重要且常用的特性挑选出来进行讲解。 1.1 消息确认 …...

印象笔记07——试一试PDF标注

印象笔记07——试一试PDF标注 [!CAUTION] 根据第六期&#xff0c;我再次查询了资料&#xff0c;印象笔记还是有一些可圈可点的功能的&#xff08;当然部分有平替&#xff09;&#xff0c;针对会员作用&#xff0c;开发使用场景虽然是逆向的&#xff0c;但我坚信这是一部分人的现…...

Vue3实战教程》24:Vue3自定义指令

如果您有疑问&#xff0c;请观看视频教程《Vue3实战教程》 自定义指令​ 介绍​ 除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外&#xff0c;Vue 还允许你注册自定义的指令 (Custom Directives)。 我们已经介绍了两种在 Vue 中重用代码的方式&#xff1a;组件和组…...

【2025优质学术推荐】征稿控制科学、仪器、智能系统、通信、计算机、电子信息、人工智能、大数据、机器学习、软件工程、网络安全方向

【2025优质学术推荐】征稿控制科学、仪器、智能系统、通信、计算机、电子信息、人工智能、大数据、机器学习、软件工程、网络安全方向 【2025优质学术推荐】征稿控制科学、仪器、智能系统、通信、计算机、电子信息、人工智能、大数据、机器学习、软件工程、网络安全方向 文章目…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程(6.3)

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...