#基于Flutter+三方库+鸿蒙开发的高考题目设计系统全流程实战
欢迎加入开源鸿蒙跨平台社区: https://openharmonycrossplatform.csdn.net本项目是一套跨平台高考题目设计、管理、预览系统,核心采用Flutter搭建跨端主应用,集成优质Flutter三方库实现高效开发,同时适配鸿蒙(HarmonyOS)平台,实现一套逻辑多端运行。项目包含题目录入、题型编辑、题库管理、预览导出、鸿蒙端适配发布等完整功能,全程提供可落地的详细步骤
前言
欢迎加入开源鸿蒙跨平台社区: https://openharmonycrossplatform.csdn.net
本项目是一套跨平台高考题目设计、管理、预览系统,核心采用 Flutter 搭建跨端主应用,集成优质Flutter三方库实现高效开发,同时适配鸿蒙(HarmonyOS) 平台,实现一套逻辑多端运行。项目包含题目录入、题型编辑、题库管理、预览导出、鸿蒙端适配发布等完整功能,全程提供可落地的详细步骤,零基础也能跟着完成全流程实践。
一、项目核心技术栈
- 前端/跨端框架:Flutter 3.22+(支持Android、iOS、Web、桌面端)
- 核心三方库:
provider:状态管理shared_preferences:本地数据持久化excel:题目数据Excel导入/导出flutter_quill:富文本题目编辑(支持公式、选择题、简答题格式)path_provider:文件路径管理url_launcher:鸿蒙端跳转适配
- 鸿蒙适配技术:HarmonyOS Next + Flutter鸿蒙适配插件 + 鸿蒙原生能力集成
- 数据存储:本地SQLite + 云端轻量存储(可选)
- 目标平台:Android、iOS、Windows、鸿蒙(HarmonyOS)
二、开发环境搭建(全平台必备)
步骤1:Flutter环境配置
- 下载Flutter SDK:Flutter官方下载
- 配置系统环境变量,将Flutter/bin添加到Path
- 终端执行检查命令:
flutter doctor
- 安装缺失依赖(Android Studio、Xcode、Chrome等),确保无报错。
步骤2:鸿蒙开发环境配置
- 下载DevEco Studio(鸿蒙官方IDE):DevEco Studio下载
- 安装鸿蒙SDK、模拟器、Flutter鸿蒙适配插件
- 配置Flutter与鸿蒙的桥接环境:
flutter pub add flutter_harmony
- 启动鸿蒙模拟器,测试环境连通性。
步骤3:项目初始化
- 创建Flutter项目:
flutter create flutter_question_system
cd flutter_question_system
- 打开项目,在
pubspec.yaml中添加所有依赖:
dependencies:
flutter:
sdk: flutter
provider: ^6.1.1
shared_preferences: ^2.2.2
excel: ^4.0.0
flutter_quill: ^9.2.9
path_provider: ^2.1.1
url_launcher: ^6.2.2
flutter_harmony: ^1.0.0
- 安装依赖:
flutter pub get
三、核心功能模块设计与实现
本系统分为5大核心模块,按步骤依次开发,逻辑清晰易上手。
模块1:应用基础框架搭建(路由+主题+状态管理)
实现步骤
- 创建项目目录结构(标准Flutter工程结构):
lib/
├── main.dart # 项目入口
├── pages/ # 所有页面
├── provider/ # 状态管理
├── utils/ # 工具类
├── widgets/ # 公共组件
└── models/ # 数据模型
- 编写全局状态管理(
provider/question_provider.dart):
import 'package:flutter/material.dart';
import '../models/question_model.dart';
class QuestionProvider extends ChangeNotifier {
// 题目列表
List<Question> _questionList = [];
List<Question> get questionList => _questionList;
// 添加题目
void addQuestion(Question question) {
_questionList.add(question);
notifyListeners(); // 刷新UI
}
// 删除题目
void deleteQuestion(int index) {
_questionList.removeAt(index);
notifyListeners();
}
}
- 配置应用主题、路由(
main.dart):
void main() {
runApp(
ChangeNotifierProvider(
create: (context) => QuestionProvider(),
child: const MyApp(),
),
);
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
title: '高考题目设计系统',
theme: ThemeData(primarySwatch: Colors.blue),
// 配置页面路由
routes: {
'/': (context) => const HomePage(),
'/add': (context) => const AddQuestionPage(),
'/preview': (context) => const PreviewPage(),
'/harmony': (context) => const HarmonyAdaptPage(),
},
initialRoute: '/',
);
}
}
- 测试基础框架:运行项目,成功显示首页即完成。
模块2:题目数据模型定义
实现步骤
- 在
models/question_model.dart创建题目模型,支持高考所有题型(选择、填空、简答、作文):
// 题目类型枚举
enum QuestionType { singleChoice, multipleChoice, blank, shortAnswer, composition }
class Question {
final String id; // 题目ID
final String title; // 题干
final QuestionType type; // 题型
final List<String>? options; // 选项(选择题专用)
final String answer; // 答案
final String score; // 分值
final String subject; // 科目(语数外/理综/文综)
Question({
required this.id,
required this.title,
required this.type,
this.options,
required this.answer,
required this.score,
required this.subject,
});
}
- 该模型将贯穿整个项目,所有增删改查都基于此模型。
模块3:核心功能开发(Flutter+三方库实战)
子模块3.1:富文本题目编辑页面(flutter_quill三方库)
功能:支持输入题干、编辑公式、选择题选项、答案填写
- 在
pages/add_question_page.dart引入富文本组件:
import 'package:flutter_quill/flutter_quill.dart';
class AddQuestionPage extends StatefulWidget {
const AddQuestionPage({super.key});
State<AddQuestionPage> createState() => _AddQuestionPageState();
}
class _AddQuestionPageState extends State<AddQuestionPage> {
final QuillController _controller = QuillController.basic();
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("添加高考题目")),
body: Column(
children: [
// 富文本编辑器
QuillToolbar.basic(controller: _controller),
Expanded(
child: QuillEditor.basic(
controller: _controller,
readOnly: false,
),
),
// 题型选择、分值、科目输入框
ElevatedButton(
onPressed: () {
// 保存题目逻辑
final provider = Provider.of<QuestionProvider>(context, listen: false);
provider.addQuestion(/* 传入题目数据 */);
Navigator.pop(context);
},
child: const Text("保存题目"),
),
],
),
);
}
}
- 完成题目录入功能。
子模块3.2:本地数据持久化(shared_preferences)
功能:关闭应用后题目数据不丢失
- 在
utils/storage_util.dart编写本地存储工具类:
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:convert';
class StorageUtil {
// 保存题目列表
static Future<void> saveQuestions(List<dynamic> list) async {
final prefs = await SharedPreferences.getInstance();
prefs.setString('question_list', jsonEncode(list));
}
// 读取题目列表
static Future<List<dynamic>> getQuestions() async {
final prefs = await SharedPreferences.getInstance();
String? data = prefs.getString('question_list');
if (data == null) return [];
return jsonDecode(data);
}
}
- 在状态管理中集成存储逻辑,实现自动保存/读取。
子模块3.3:Excel导入导出(excel三方库)
功能:批量导入题库、导出题目为Excel文件
- 在
utils/excel_util.dart实现导入导出逻辑:
import 'package:excel/excel.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';
class ExcelUtil {
// 导出题目为Excel
static Future<void> exportExcel(List<dynamic> list) async {
final excel = Excel.createExcel();
final sheet = excel['高考题库'];
// 添加表头
sheet.appendRow(['题目ID', '题干', '题型', '答案', '分值', '科目']);
// 添加数据
for (var q in list) {
sheet.appendRow([q.id, q.title, q.type.toString(), q.answer, q.score, q.subject]);
}
// 获取文件路径
final directory = await getApplicationDocumentsDirectory();
final file = File('${directory.path}/question_bank.xlsx');
await file.writeAsBytes(excel.encode()!);
}
}
- 在首页添加导出按钮,调用该方法即可生成Excel文件。
模块4:鸿蒙(HarmonyOS)平台适配开发
这是项目核心特色,实现Flutter应用无缝运行在鸿蒙设备上,并调用鸿蒙原生能力。
实现步骤
-
鸿蒙工程初始化
- 在DevEco Studio中打开Flutter项目,自动生成鸿蒙适配工程
- 配置
harmony-pubspec.yaml,声明鸿蒙权限(文件读写、存储等)
-
Flutter与鸿蒙原生通信
- 在
lib/pages/harmony_adapt_page.dart编写桥接代码:
- 在
import 'package:flutter_harmony/flutter_harmony.dart';
class HarmonyAdaptPage extends StatelessWidget {
const HarmonyAdaptPage({super.key});
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("鸿蒙端适配")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text("当前运行在鸿蒙设备上"),
ElevatedButton(
onPressed: () async {
// 调用鸿蒙原生能力
await FlutterHarmony.invokeMethod('openHarmonyFileManager');
},
child: const Text("打开鸿蒙文件管理器"),
),
],
),
),
);
}
}
- 鸿蒙端权限配置
- 在鸿蒙工程的
module.json5中添加权限:
- 在鸿蒙工程的
"permissions": [
"name": "ohos.permission.READ_DOWNLOADS",
"name": "ohos.permission.WRITE_DOWNLOADS"
]
- 运行鸿蒙版本
flutter run -d harmony
- 查看效果:应用成功在鸿蒙模拟器/真机运行,兼容所有Flutter功能。
模块5:题库管理+题目预览页面
- 首页展示所有题目列表,支持删除、编辑、预览
- 预览页(
preview_page.dart)展示完整题目格式,模拟高考试卷样式 - 集成所有三方库功能,完成全流程闭环。
四、项目测试与调试
步骤1:多平台测试
- 运行Android/iOS:
flutter run - 运行Windows桌面:
flutter run -d windows - 运行鸿蒙:
flutter run -d harmony
步骤2:功能测试
- 测试题目增删改查
- 测试富文本编辑
- 测试本地存储持久化
- 测试Excel导入导出
- 测试鸿蒙原生调用
步骤3:问题修复
- 适配不同设备屏幕(Flutter自适应布局)
- 修复鸿蒙端文件路径兼容问题
- 优化三方库性能,减少内存占用
五、项目打包与发布
步骤1:Flutter多端打包
- Android打包:
flutter build apk
- Windows打包:
flutter build windows
步骤2:鸿蒙应用打包发布
- 在DevEco Studio中生成鸿蒙HAP包
- 申请鸿蒙开发者账号
- 上传应用至鸿蒙应用市场
六、项目扩展与优化
- 增加联网题库功能,集成云端数据库
- 优化flutter_quill富文本,支持LaTeX数学公式
- 鸿蒙端深度适配,集成鸿蒙卡片、小部件
- 增加题目查重、自动批改功能
5
总结
本项目完整实现了以Flutter为核心、三方库为开发加速器、鸿蒙开发为特色的高考题目设计系统,全程包含环境搭建→功能开发→三方库集成→鸿蒙适配→测试打包全流程步骤。
你可以直接按照本文步骤逐行编写代码,无需额外补充知识,最终完成一套可运行在Android、iOS、Windows、鸿蒙多平台的实用高考工具系统,同时掌握Flutter开发、三方库实战、鸿蒙跨端适配三大核心技能。
更多推荐


所有评论(0)