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

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

---

关键词

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

---

一、功能说明

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

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

---

二、所需组件

• @Entry 和 @Component 装饰器
• TextInput 和 Button 组件完成用户输入和交互操作
• List 和 ListItem 组件用于车次信息展示
• Text 和 Image 组件用于显示提示、结果和装饰图片
• @State 修饰符用于状态管理

---

三、项目结构

• 项目名称：TrainTicketSearch
• 自定义组件名称：TrainSearchPage
• 代码文件：TrainInterface.ets、TrainSearchPage.ets、Index.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. 动态结果展示

   • 使用 List 和 ListItem 动态生成车次列表，并实时展示筛选结果。

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

---