HarmonyOS APP＜玩转React＞开源教程二十二：每日一题功能

第22次每日一题功能每日一题是激励用户持续学习的有效方式。本次课程将实现每日一题功能包括题目选择算法、答题界面和答案解析。效果学习目标掌握每日一题算法设计实现 QuizPage 页面布局设计选项交互效果完成答案解析显示实现每日一题完整功能22.1 每日一题算法题目选择逻辑根据日期确定性地选择题目确保同一天所有用户看到相同的题目staticgetDailyQuestion():DailyQuestion{consttodaynewDate().toISOString().split(T)[0];// YYYY-MM-DDconstquestionsTutorialData.getAllQuizQuestions();// 根据日期计算索引constdateSumtoday.split(-).reduce((a,b)aparseInt(b),0);constindexMath.abs(dateSum)%questions.length;constqquestions[index];return{date:today,question:q.question,moduleId:q.moduleId,lessonId:q.lessonId,answered:false};}DailyQuestion 结构interfaceDailyQuestion{date:string;// 日期question:QuizItem;// 题目moduleId:string;// 所属模块lessonId:string;// 所属课程answered:boolean;// 是否已答}22.2 QuizPage 页面布局页面结构EntryComponentstruct QuizPage{Statequestion:DailyQuestion|nullnull;StateselectedAnswer:number-1;StateisSubmitted:booleanfalse;StateisCorrect:booleanfalse;StorageLink(isDarkMode)isDarkMode:booleanfalse;aboutToAppear():void{this.questionTutorialService.getDailyQuestion();}}页面头部BuilderHeaderSection(){Row(){Text(←).fontSize(24).fontColor(this.isDarkMode?#ffffff:#1a1a2e).onClick(()router.back())Text(每日一题).fontSize(18).fontWeight(FontWeight.Bold).fontColor(this.isDarkMode?#ffffff:#1a1a2e).margin({left:16})Blank()Text(this.question?.date??).fontSize(14).fontColor(this.isDarkMode?#d1d5db:#495057)}.width(100%).padding(16)}22.3 题目展示题目卡片BuilderQuestionCard(){Column(){Text().fontSize(48).margin({bottom:16})Text(this.question?.question.question??).fontSize(18).fontWeight(FontWeight.Medium).fontColor(this.isDarkMode?#ffffff:#1a1a2e).textAlign(TextAlign.Center)}.width(100%).padding(24).backgroundColor(this.isDarkMode?#282c34:#ffffff).borderRadius(16).margin({left:16,right:16,top:16})}22.4 选项交互设计选项列表BuilderOptionsSection(){Column({space:12}){ForEach(this.question?.question.options??[],(option:string,index:number){this.OptionItem(option,index)})}.width(100%).padding({left:16,right:16,top:24})}选项项组件BuilderOptionItem(option:string,index:number){Row(){// 选项字母Text(String.fromCharCode(65index))// A, B, C, D.fontSize(16).fontWeight(FontWeight.Bold).fontColor(this.getOptionLetterColor(index)).width(32).height(32).textAlign(TextAlign.Center).backgroundColor(this.getOptionBgColor(index)).borderRadius(16)// 选项内容Text(option).fontSize(15).fontColor(this.isDarkMode?#ffffff:#1a1a2e).margin({left:12}).layoutWeight(1)// 结果图标if(this.isSubmitted){if(indexthis.question?.question.correctAnswer){Text(✓).fontSize(18).fontColor(#51cf66)}elseif(indexthis.selectedAnswer){Text(✗).fontSize(18).fontColor(#ff6b6b)}}}.width(100%).padding(16).backgroundColor(this.getOptionCardBg(index)).borderRadius(12).border({width:2,color:this.getOptionBorderColor(index)}).onClick((){if(!this.isSubmitted){this.selectedAnswerindex;}})}颜色计算方法privategetOptionBorderColor(index:number):string{if(this.isSubmitted){if(indexthis.question?.question.correctAnswer){return#51cf66;// 正确答案绿色}if(indexthis.selectedAnswer){return#ff6b6b;// 错误选择红色}}if(indexthis.selectedAnswer){return#61DAFB;// 选中蓝色}returntransparent;}22.5 答案解析显示解析区域BuilderExplanationSection(){if(this.isSubmittedthis.question){Column(){Row(){Text(this.isCorrect?:).fontSize(24)Text(this.isCorrect?回答正确:答案解析).fontSize(16).fontWeight(FontWeight.Bold).fontColor(this.isDarkMode?#ffffff:#1a1a2e).margin({left:8})}.margin({bottom:12})Text(this.question.question.explanation).fontSize(14).fontColor(this.isDarkMode?#e6e6e6:#333333).lineHeight(22)}.width(100%).padding(16).margin({left:16,right:16,top:24}).backgroundColor(this.isCorrect?(this.isDarkMode?rgba(81,207,102,0.15):rgba(81,207,102,0.1)):(this.isDarkMode?rgba(97,218,251,0.15):rgba(97,218,251,0.1))).borderRadius(12).alignItems(HorizontalAlign.Start)}}22.6 提交按钮按钮实现BuilderSubmitButton(){Button(this.isSubmitted?返回首页:提交答案).width(90%).height(48).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor(this.selectedAnswer-1!this.isSubmitted?(this.isDarkMode?#3d3d5c:#e9ecef):#61DAFB).fontColor(this.selectedAnswer-1!this.isSubmitted?(this.isDarkMode?#9ca3af:#6c757d):#1a1a2e).borderRadius(24).margin({top:24}).enabled(this.selectedAnswer!-1||this.isSubmitted).onClick((){if(this.isSubmitted){router.back();}else{this.submitAnswer();}})}提交逻辑privatesubmitAnswer():void{if(this.questionthis.selectedAnswer!-1){this.isCorrectthis.selectedAnswerthis.question.question.correctAnswer;this.isSubmittedtrue;// 更新连续学习天数ProgressService.updateStreak();}}22.7 完整页面代码EntryComponentstruct QuizPage{Statequestion:DailyQuestion|nullnull;StateselectedAnswer:number-1;StateisSubmitted:booleanfalse;StateisCorrect:booleanfalse;StorageLink(isDarkMode)isDarkMode:booleanfalse;aboutToAppear():void{this.questionTutorialService.getDailyQuestion();}build(){Column(){this.HeaderSection()Scroll(){Column(){this.QuestionCard()this.OptionsSection()this.ExplanationSection()this.SubmitButton()}.padding({bottom:40})}.layoutWeight(1).scrollBar(BarState.Off)}.width(100%).height(100%).backgroundColor(this.isDarkMode?#1a1a2e:#f8f9fa)}// ... Builder 方法}本次课程小结✅ 掌握了每日一题算法设计✅ 实现了 QuizPage 页面布局✅ 设计了选项交互效果✅ 完成了答案解析显示下次预告第23次面试题库功能- 实现分类题库和练习模式