企业网站页面宽哪里设置,手机网站优化 工具,android开发工具哪个好,网站的空间是什么本篇教程将实现一个模拟火车票查询系统#xff0c;通过输入条件筛选车次信息#xff0c;并展示动态筛选结果#xff0c;学习事件处理、状态管理和界面展示的综合开发技巧。 关键词
条件筛选动态数据展示状态管理UI交互查询系统 一、功能说明
模拟火车票查询系统包含以下功…本篇教程将实现一个模拟火车票查询系统通过输入条件筛选车次信息并展示动态筛选结果学习事件处理、状态管理和界面展示的综合开发技巧。 关键词
条件筛选动态数据展示状态管理UI交互查询系统 一、功能说明
模拟火车票查询系统包含以下功能
用户输入查询条件支持输入出发地、目的地及日期进行筛选。车次信息筛选根据输入条件动态筛选符合条件的车次信息。列表展示筛选结果实时展示筛选后的车次列表。查询条件重置支持一键清空查询条件并重置结果。装饰图片在页面中增加装饰图片提升界面视觉效果。 二、所需组件
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);}
}效果示例通过输入出发地、目的地和日期动态筛选车次信息并实时展示结果。 效果展示 五、代码解读 车次数据加载 使用 loadTrains() 模拟加载车次数据结构由 Train 接口定义。 条件查询逻辑 使用 filter 函数根据用户输入的出发地、目的地和日期筛选符合条件的车次。 动态结果展示 使用 List 和 ListItem 动态生成车次列表并实时展示筛选结果。 状态管理 使用 State 修饰符管理用户输入和筛选结果确保界面与数据的实时同步。 装饰图片 添加 Image 组件显示 cat.png 图片增强界面趣味性。 六、优化建议
添加车次排序功能例如按时间或车次号排序。增加查询结果分页展示功能提升界面可读性。提供历史查询记录功能方便查看之前的查询内容。 七、效果展示
输入与筛选支持实时输入出发地、目的地和日期进行车次筛选。动态列表更新符合条件的车次实时展示界面响应迅速。图片装饰添加趣味性装饰图片提升用户体验。 八、相关知识点
「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?topicId661 來源坚果派 著作权归作者所有。商业转载请联系作者获得授权非商业转载请注明出处。
