鸿蒙掌上驾考宝典应用开发15:答题交互组件——Exam 与 SelectComponent 全解析

第15篇答题交互组件——Exam 与 SelectComponent 全解析一、引言答题交互是驾考应用最核心的用户交互场景。DriverLicenseExam 项目的Exam组件和SelectComponent组件共同实现了完整的答题交互体验包括试题展示、选项选择、答案判断、答题卡、倒计时等。本文将深入解析这两个组件的实现。二、Exam 组件架构2.1 组件职责Exam 组件是考试页面的核心容器负责管理试题列表Swiper 滑动切换展示倒计时模拟考试管理答题卡浮层处理模拟考试结束弹窗2.2 组件接口// components/exam/src/main/ets/components/Exam.etsEntryComponentV2 export struct Exam {ParamRequireappPathStack: NavPathStack;// 路由栈ParamRequireexamManager: ExamManager;// 试卷数据ParammockExamCall: (score: number) void (score: number) {};// 模拟考试回调private examController: ExamController ExamController.instance;LocalremainTime: number 0;// 剩余时间LocalisShowProblemListSheet: boolean false;// 答题卡显示LocalcurrentIndex: number 0;// 当前第几题LocalisStop: boolean false;// 暂停状态private readonly renderWindowSize: number 2;// 渲染窗口大小}三、答题交互流程3.1 试题渲染build(){Column(){// 模拟考试倒计时this.showRemainTime();// 试题列表Swiper 滑动切换Swiper(examController.swiperController){ForEach(this.examManager.examDetails, (item: ExamDetail,examIndex:number) {Column({space: 12 }){if(this.shouldRenderQuestion(examIndex)) { SelectComponent({item: item,changeCorrectNum: (isAdd: boolean) {isAdd ? this.examManager.correctNumber: this.examManager.correctNumber--;},}); } } }); } // ... 底部导航答题卡、上一题、下一题 } }3.2 渲染窗口优化// 只渲染当前题附近的题目提高大题库性能privatereadonlyrenderWindowSize:number2;shouldRenderQuestion(examIndex:number):boolean{returnMath.abs(examIndex -this.currentIndex) this.renderWindowSize; }四、模拟考试倒计时4.1 倒计时实现aboutToAppear(): void {this.currentIndex this.examManager.currentQuestionId 1;if(this.examManager.timeLimit !0) {this.remainTime this.examManager.timeLimit *60; let showDialog: boolean true; setInterval(() {if(showDialog !this.isStop) {if(this.remainTime 1) {this.remainTime--; }else{ showDialog false;this.isStop true;this.examSubmitDialog.open(); } } },1000); } }4.2 时间格式化BuildershowRemainTime() {if(this.examManager.timeLimit!0) {Row() {Image($r(app.media.ic_time)).width(16).height(16);Text(${Math.floor(this.remainTime /60)}:${String(this.remainTime %60).padStart(2,0)}) .fontSize(14) .fontColor(#FF6B6B); } } }五、答题卡实现5.1 答题卡数据// 生成答题卡数据getanswerCardData() {returnthis.examManager.examDetails.map((item, index) ({index: index 1,status: item.isCorrectundefined?unanswered: item.isCorrect?correct:wrong,isCurrent: index this.currentIndex})); }5.2 答题卡交互// 底部打开答题卡浮层Button(答题卡) .onClick(() {this.isShowProblemListSheet true; }) .bindSheet($$this.isShowProblemListSheet,this.answerCardSheet(), { height:400, title: { title:答题卡}, });六、总结Exam 和 SelectComponent 组件的设计体现了 ArkUI 组件化的最佳实践职责分离Exam 管理流程SelectComponent 管理交互性能优化渲染窗口机制减少不必要的渲染状态管理Local 管理内部状态Param 接收外部数据用户体验倒计时、答题卡、弹窗等交互细节关键源码文件components/exam/src/main/ets/components/Exam.ets— 考试主组件components/exam/src/main/ets/components/SelectComponent.ets— 选择组件components/exam/src/main/ets/controller/ExamController.ets— 考试控制器