HarmonyOS ArkTS 实战：实现一个校园名师讲座抢票与提问应用

HarmonyOS ArkTS 实战实现一个校园名师讲座抢票与提问应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园名师讲座抢票与提问应用。应用可以查看讲座预告在线抢票扫码入场讲座提问点赞互动并提供讲座日程、我的票夹、提问审核、讲座回放、签到积分等完整功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。运行效果功能介绍讲座预告浏览在线抢票票夹管理扫码入场实时提问提问点赞提问审核讲座日程签到积分讲座回放主讲人介绍收藏讲座定义数据结构interfaceLecture{id:number;title:string;speaker:string;speakerIntro:string;time:string;location:string;totalTickets:number;leftTickets:number;status:string;// 未开始/抢票中/进行中/已结束cover:string;description:string;}interfaceQuestion{id:number;lectureId:number;content:string;questioner:string;likes:number;isAnswered:boolean;time:string;}interfaceTicket{id:number;lectureId:number;lectureTitle:string;seatNumber:string;qrcode:string;status:string;// 未使用/已入场/已过期}初始化页面状态StateprivatetabIndex:number0;StateprivatemyPoints:number260;Stateprivatelectures:Lecture[][{id:1,title:人工智能与未来社会,speaker:李院士,speakerIntro:清华大学计算机系教授人工智能专家,time:2026-07-28 19:00,location:大礼堂,totalTickets:500,leftTickets:128,status:抢票中,cover:,description:探讨AI技术发展对未来社会的影响},{id:2,title:中国传统文化与现代设计,speaker:王教授,speakerIntro:中央美术学院设计学院院长,time:2026-07-25 14:00,location:学术报告厅,totalTickets:300,leftTickets:0,status:未开始,cover:,description:传统文化元素在现代设计中的应用},{id:3,title:创业分享会从0到1,speaker:张校友,speakerIntro:95后创业明星某科技公司CEO,time:2026-07-20 18:30,location:创新创业中心,totalTickets:200,leftTickets:0,status:已结束,cover:,description:分享创业路上的经验与教训},];Stateprivatequestions:Question[][{id:1,lectureId:1,content:请问AI会取代程序员吗,questioner:计算机学院同学,likes:42,isAnswered:false,time:2026-07-22},];StateprivatemyTickets:Ticket[][{id:1,lectureId:1,lectureTitle:人工智能与未来社会,seatNumber:A区12排8号,qrcode:ticket001,status:未使用},];StateprivatenextId:number10;抢票privategrabTicket(lectureId:number):void{constlecturethis.lectures.find(ll.idlectureId);if(!lecture||lecture.leftTickets0)return;this.lecturesthis.lectures.map(ll.idlectureId?{...l,leftTickets:l.leftTickets-1}:l);constticket:Ticket{id:this.nextId,lectureId,lectureTitle:lecture.title,seatNumber:A区${Math.floor(Math.random()*20)1}排${Math.floor(Math.random()*20)1}号,qrcode:ticket${this.nextId},status:未使用};this.myTickets[ticket,...this.myTickets];this.nextId1;}入场签到privatecheckIn(ticketId:number):void{this.myTicketsthis.myTickets.map(tt.idticketId?{...t,status:已入场}:t);this.myPoints10;}提问privateaskQuestion(lectureId:number,content:string):void{constq:Question{id:this.nextId,lectureId,content,questioner:我,likes:0,isAnswered:false,time:newDate().toLocaleDateString()};this.questions[q,...this.questions];this.nextId1;}点赞提问privatelikeQuestion(questionId:number):void{this.questionsthis.questions.map(qq.idquestionId?{...q,likes:q.likes1}:q);}讲座卡片组件BuilderLectureCard(lecture:Lecture){Column({space:8}){Text(lecture.title).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#083344).width(100%)Text(主讲人${lecture.speaker}).fontSize(13).fontColor(#64748B).width(100%)Text(${lecture.time}).fontSize(12).fontColor(#94A3B8)Text(${lecture.location}).fontSize(12).fontColor(#94A3B8)Row(){if(lecture.status抢票中lecture.leftTickets0){Text(剩余${lecture.leftTickets}张).fontSize(12).fontColor(#EF4444)Blank()Button(立即抢票).fontSize(14).height(36).backgroundColor(#083344).onClick(()this.grabTicket(lecture.id))}elseif(lecture.status抢票中){Text(已抢光).fontSize(12).fontColor(#94A3B8)Blank()Button(已抢光).fontSize(14).height(36).backgroundColor(#94A3B8).enabled(false)}else{Blank()Text(lecture.status).fontSize(12).fontColor(#94A3B8)}}.width(100%).margin({top:8})}.width(100%).padding(16).backgroundColor(#ECFEFF).borderRadius(12)}页面布局build(){Column(){// 顶部积分Row(){Text(名师讲座).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#083344)Blank()Text(积分${this.myPoints}).fontSize(14).fontColor(#083344).padding({left:12,right:12,top:6,bottom:6}).backgroundColor(#CFFAFE).borderRadius(16)}.width(100%).padding(20)// TabRow({space:20}){Text(讲座预告).fontSize(16).fontWeight(this.tabIndex0?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex0?#083344:#94A3B8).onClick(()this.tabIndex0)Text(我的票夹).fontSize(16).fontWeight(this.tabIndex1?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex1?#083344:#94A3B8).onClick(()this.tabIndex1)}.width(100%).padding({left:20,right:20})if(this.tabIndex0){List({space:12}){ForEach(this.lectures,(l:Lecture){ListItem(){this.LectureCard(l)}})}.width(100%).padding(20).layoutWeight(1)}else{List({space:12}){ForEach(this.myTickets,(t:Ticket){ListItem(){Column({space:8}){Text(t.lectureTitle).fontSize(16).fontWeight(FontWeight.Medium)Text(座位${t.seatNumber}).fontSize(13).fontColor(#64748B)Row(){Text(t.status).fontSize(12).fontColor(t.status未使用?#10B981:#94A3B8)Blank()if(t.status未使用){Button(扫码入场).fontSize(12).height(32).backgroundColor(#083344).onClick(()this.checkIn(t.id))}}.width(100%)}.width(100%).padding(16).backgroundColor(#ECFEFF).borderRadius(12)}})}.width(100%).padding(20).layoutWeight(1)}}.width(100%).height(100%).backgroundColor(Color.White)}页面设计说明主题色采用cyan-950#083344深青色体现学术讲座的专业、深度。青色背景卡片清晰展示讲座信息抢票按钮醒目票夹管理方便。SDK配置API 24compatibleSdkVersion: “6.1.1(24)”运行项目将代码复制到 entry/src/main/ets/pages/Index.ets 即可运行。项目总结实现了讲座浏览、抢票、票夹、签到、提问点赞等功能。掌握了卡片布局、状态管理、数量扣减、积分系统、列表展示等。后续可加入实时弹幕、座位选择、二维码生成、直播回放、提问上墙、讲座评价等功能。