Harmony开发中考试组件库怎么使用

考试组件库 (kaoshimuban)

一个功能完整的HarmonyOS考试组件库，支持单选题、多选题、判断题和填空题四种题型，可快速构建考试界面。

功能特性

• ✅单选题- 支持单选题的渲染和交互，自动互斥选择
• ✅多选题- 支持多选题的渲染和交互，可选择多个答案
• ✅判断题- 支持判断题（正确/错误）的渲染和交互
• ✅填空题- 支持填空题的渲染，支持多个填空
• ✅自动评分- 内置评分逻辑，支持自定义每题分值
• ✅结果统计- 提供详细的考试结果，包括得分、正确率等

效果预览

安装方式

方式一：ohpm安装（推荐）

ohpminstallkaoshimuban

或使用简写命令：

ohpm i kaoshimuban

方式二：本地引用

1. 将library目录复制到你的项目中
2. 在oh-package.json5中添加依赖：

{ "dependencies": { "kaoshimuban": "file:../library" } }

方式三：HAR包引用

1. 编译生成HAR包：hvigorw assembleHar -p module=library
2. 将HAR包放入项目的libs目录
3. 在oh-package.json5中添加依赖：

{ "dependencies": { "kaoshimuban": "file:./libs/kaoshimuban.har" } }

快速开始

1. 导入组件和类型

import{ExamComponent,ExamData,ExamResult,QuestionType,QuestionData}from'kaoshimuban';

2. 准备考试数据

privatecreateExamData():ExamData{constquestions:QuestionData[]=[// 单选题newQuestionData('q1',// 题目IDQuestionType.SINGLE,// 题目类型'HarmonyOS是由哪家公司开发的？',// 题干'华为',// 正确答案10,// 分值['华为','小米','苹果','谷歌']// 选项),// 多选题newQuestionData('q2',QuestionType.MULTIPLE,'以下哪些是HarmonyOS的核心特性？（多选）',['分布式架构','微内核设计','全场景覆盖'],// 正确答案数组15,['分布式架构','微内核设计','全场景覆盖','仅支持手机']),// 判断题newQuestionData('q3',QuestionType.TRUE_FALSE,'ArkTS是HarmonyOS应用开发的主要编程语言。',true,// 正确答案：true或false5),// 填空题newQuestionData('q4',QuestionType.FILL_BLANK,'HarmonyOS的UI框架名称是____。',['ArkUI'],// 正确答案数组10,undefined,// 填空题无选项1// 填空数量)];returnnewExamData('HarmonyOS 基础知识测试',// 考试标题questions,// 题目列表40,// 总分30// 时间限制（分钟）);}

3. 使用组件

@Entry@Componentstruct ExamPage{@StateexamData:ExamData=this.createExamData();@StateshowResult:boolean=false;@StateexamResult:ExamResult|null=null;build(){Column(){if(this.showResult&&this.examResult!==null){// 显示考试结果this.ResultView()}else{// 显示考试界面ExamComponent({examData:this.examData,onSubmit:(result:ExamResult)=>{this.examResult=result;this.showResult=true;}})}}.width('100%').height('100%')}@BuilderResultView(){Column(){Text(`得分:${this.examResult!.score}/${this.examResult!.totalPoints}`)Text(`正确:${this.examResult!.correctCount}/${this.examResult!.totalCount}`)Button('重新考试').onClick(()=>{this.showResult=false;this.examResult=null;})}}}

API 文档

ExamComponent

主考试组件，用于渲染完整的考试界面。

QuestionData

题目数据类，使用构造函数创建。

newQuestionData(id:string,// 题目IDtype:QuestionType,// 题目类型content:string,// 题干内容correctAnswer:string|string[]|boolean,// 正确答案points:number,// 分值options?:string[],// 选项（单选/多选题）blankCount?:number// 填空数量（填空题）)

ExamData

考试数据类，使用构造函数创建。

newExamData(title:string,// 考试标题questions:QuestionData[],// 题目列表totalPoints:number,// 总分timeLimit?:number// 时间限制（分钟）)

QuestionType

题目类型枚举。

ExamResult

考试结果类。

辅助函数

// 判断答案是否正确isAnswerCorrect(question:QuestionData,userAnswer:any):boolean

题型说明

单选题 (SINGLE)

• 显示单选按钮样式
• 点击选项自动取消之前的选择
• 正确答案为单个字符串

多选题 (MULTIPLE)

• 显示复选框样式
• 可同时选择多个选项
• 正确答案为字符串数组
• 评分时忽略选择顺序

判断题 (TRUE_FALSE)

• 固定显示"正确"和"错误"两个选项
• 正确答案为布尔值true或false

填空题 (FILL_BLANK)

• 根据blankCount显示对应数量的输入框
• 正确答案为字符串数组
• 评分时忽略大小写和首尾空格

样式定制

组件使用了以下颜色方案：

注意事项

1. ExamData需要使用@State装饰器声明
2. 传递给ExamComponent时，examData会通过@ObjectLink绑定
3. 多选题答案比较时会忽略顺序
4. 填空题答案比较时会忽略大小写和首尾空格

许可证

Apache-2.0

更新日志

v1.0.0 (2025-12-31)

• 初始版本发布
• 支持单选题、多选题、判断题、填空题
• 内置自动评分功能
• 提供考试结果统计