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

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


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

一、功能说明

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

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

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

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

四、代码实现
1. 定义车次接口
typescript 复制代码
// 文件名:TrainInterface.ets

export interface Train {
  trainNumber: string; // 车次号
  departure: string; // 出发地
  destination: string; // 目的地
  date: string; // 日期
  time: string; // 出发时间
}

2. 模拟火车票查询页面代码
typescript 复制代码
// 文件名:TrainSearchPage.ets

import { 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. 主入口文件
typescript 复制代码
// 文件名:Index.ets

import { 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. 提供历史查询记录功能,方便查看之前的查询内容。

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

八、相关知识点

小结

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


下一篇预告

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


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

作者:SoraLuna

链接:https://www.nutpi.net/thread?topicId=661

來源:坚果派

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


相关推荐
高心星11 小时前
HarmonyOS 5.0应用开发——MVVM模式的应用
harmonyos·mvvm·鸿蒙5.0·备忘录应用
别说我什么都不会12 小时前
【仓颉三方库】工具类—— compress4cj
harmonyos
别说我什么都不会12 小时前
【仓颉三方库】工具类—— uuid4cj
harmonyos
cooldream200913 小时前
深入理解MVP架构:让UI层与业务逻辑完美分离的设计模式
ui·设计模式·架构·系统架构师
拖孩13 小时前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
Dachui_112216 小时前
MacOS上如何运行内网穿透详细教程
macos
__Benco18 小时前
OpenHarmony - 小型系统内核(LiteOS-A)(十),魔法键使用方法,用户态异常信息说明
人工智能·harmonyos
sky_smile_Allen19 小时前
[Unity]-[UI]-[Prefab] 关于Unity UGUI 的布局及组件讲解
ui·unity·游戏引擎
Bruce_Liuxiaowei19 小时前
使用Python脚本在Mac上彻底清除Chrome浏览历史:开发实战与隐私保护指南
chrome·python·macos
Python_金钱豹20 小时前
Text2SQL零代码实战!RAGFlow 实现自然语言转 SQL 的终极指南
前端·数据库·sql·安全·ui·langchain·机器人