「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

來源:坚果派

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


相关推荐
Alger_Hamlet2 分钟前
Photoshop 2025 Mac中文 Ps图像编辑软件
macos·ui·photoshop
资源大全免费分享3 分钟前
MacOS 的 AI Agent 新星,本地沙盒驱动,解锁 macOS 操作新体验!
人工智能·macos·策略模式
鸿蒙布道师32 分钟前
鸿蒙NEXT开发对象工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
zhang10620934 分钟前
HarmonyOS 基础组件和基础布局的介绍
harmonyos·基础组件·基础布局
马剑威(威哥爱编程)1 小时前
在HarmonyOS NEXT 开发中,如何指定一个号码,拉起系统拨号页面
华为·harmonyos·arkts
刘小哈哈哈2 小时前
封装了一个iOS多分区自适应宽度layout
macos·ios·cocoa
GeniuswongAir2 小时前
Flutter极速接入IM聊天功能并支持鸿蒙
flutter·华为·harmonyos
YJlio5 小时前
TrollStore(巨魔商店)介绍及操作手册
macos·objective-c·cocoa
mywpython5 小时前
mac 最新的chrome版本配置selenium的方式
chrome·python·selenium·macos
90后的晨仔6 小时前
鸿蒙ArkUI框架中的状态管理
harmonyos