HarmonyOS ArkTS 实战:实现一个大创项目申报管理应用
HarmonyOS ArkTS 实战实现一个大创项目申报管理应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个大创项目申报管理应用。应用可以查看申报通知提交项目申报查看审核状态项目进度并提供成员管理、指导老师、中期检查、结项管理等完整功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。运行效果功能介绍申报通知查看项目申报提交项目信息填写成员管理指导老师选择审核状态查询项目进度跟踪中期检查结项申请我的项目优秀项目展示常见问题定义数据结构interfaceProject{id:number;name:string;category:string;// 创新训练/创业训练/创业实践level:string;// 国家级/市级/校级leader:string;members:string[];teacher:string;college:string;description:string;budget:number;status:string;// 草稿/待审核/学院审核/学校审核/已立项/进行中/中期检查/已结项/已驳回progress:number;applyTime:string;}interfaceNotice{id:number;title:string;content:string;deadline:string;type:string;}初始化页面状态StateprivatetabIndex:number0;Stateprivatenotices:Notice[][{id:1,title:关于2026年大学生创新创业训练计划项目申报的通知,content:各学院为培养大学生创新精神和实践能力...,deadline:2026-08-31,type:申报通知},{id:2,title:2026年大创项目中期检查通知,content:请各项目组于9月15日前提交中期检查报告...,deadline:2026-09-15,type:中期检查},];Stateprivateprojects:Project[][{id:1,name:基于HarmonyOS的校园服务平台,category:创新训练,level:国家级,leader:沈同学,members:[张同学,李同学,王同学],teacher:陈教授,college:信息学院,description:开发一款基于HarmonyOS的校园综合服务应用,budget:20000,status:进行中,progress:60,applyTime:2026-03-15},];StateprivatenewProjectName:string;StateprivatenewProjectDesc:string;StateprivatenewCategory:string创新训练;StateprivatenewLevel:string校级;StateprivatenextId:number10;提交申报privatesubmitProject():void{if(!this.newProjectName||!this.newProjectDesc)return;constproject:Project{id:this.nextId,name:this.newProjectName,category:this.newCategory,level:this.newLevel,leader:我,members:[我],teacher:待分配,college:信息学院,description:this.newProjectDesc,budget:5000,status:待审核,progress:0,applyTime:newDate().toLocaleDateString()};this.projects[project,...this.projects];this.newProjectName;this.newProjectDesc;this.nextId1;}状态颜色privategetStatusColor(status:string):string{if(status.includes(驳回))return#DC2626;if(status.includes(审核))return#F59E0B;if(status已立项||status进行中)return#059669;if(status已结项)return#7C3AED;return#64748B;}项目卡片组件BuilderProjectCard(project:Project){Column({space:10}){Row(){Text(project.name).fontSize(16).fontWeight(FontWeight.Medium).fontColor(#4C0519).layoutWeight(1)Text(project.status).fontSize(11).fontColor(Color.White).padding({left:8,right:8,top:3,bottom:3}).backgroundColor(this.getStatusColor(project.status)).borderRadius(10)}.width(100%)Row({space:8}){Text(project.category).fontSize(11).fontColor(#9F1239).padding({left:6,right:6,top:2,bottom:2}).backgroundColor(#FFE4E6).borderRadius(8)Text(project.level).fontSize(11).fontColor(#9F1239).padding({left:6,right:6,top:2,bottom:2}).backgroundColor(#FFE4E6).borderRadius(8)Text(负责人${project.leader}).fontSize(11).fontColor(#9F1239)}Text(project.description).fontSize(12).fontColor(#881337).maxLines(2).width(100%)Progress({value:project.progress,total:100,type:ProgressType.Linear}).width(100%).color(#BE123C).backgroundColor(#FFE4E6)Text(进度${project.progress}% | 指导老师${project.teacher}| 经费¥${project.budget}).fontSize(11).fontColor(#9F1239)}.width(100%).padding(16).backgroundColor(#FFF1F2).borderRadius(12)}页面布局build(){Column(){Text( 大创项目管理).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#4C0519).width(100%).padding(20)// TabRow({space:20}){Text(申报通知).fontSize(16).fontWeight(this.tabIndex0?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex0?#4C0519:#94A3B8).onClick(()this.tabIndex0)Text(我的项目).fontSize(16).fontWeight(this.tabIndex1?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex1?#4C0519:#94A3B8).onClick(()this.tabIndex1)Text(新建申报).fontSize(16).fontWeight(this.tabIndex2?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex2?#4C0519:#94A3B8).onClick(()this.tabIndex2)}.width(100%).padding({left:20,right:20})if(this.tabIndex0){List({space:12}){ForEach(this.notices,(n:Notice){ListItem(){Column({space:8}){Text(n.title).fontSize(15).fontWeight(FontWeight.Medium).fontColor(#4C0519)Text(n.content).fontSize(12).fontColor(#9F1239).maxLines(2)Text(截止时间${n.deadline}).fontSize(11).fontColor(#DC2626)}.width(100%).padding(16).backgroundColor(#FFF1F2).borderRadius(12)}})}.width(100%).padding(20).layoutWeight(1)}elseif(this.tabIndex1){List({space:12}){ForEach(this.projects,(p:Project){ListItem(){this.ProjectCard(p)}})}.width(100%).padding(20).layoutWeight(1)}else{Scroll(){Column({space:16}){TextInput({text:this.newProjectName,placeholder:项目名称}).width(100%).height(44).backgroundColor(#FFF1F2).onChange((v:string)this.newProjectNamev)// 项目类型Text(项目类型).fontSize(14).fontWeight(FontWeight.Medium).width(100%)Flex({wrap:FlexWrap.Wrap}){ForEach([创新训练,创业训练,创业实践],(c:string){Text(c).fontSize(13).fontColor(this.newCategoryc?Color.White:#4C0519).padding({left:16,right:16,top:8,bottom:8}).backgroundColor(this.newCategoryc?#BE123C:#FFE4E6).borderRadius(20).margin({right:8,bottom:8}).onClick(()this.newCategoryc)})}// 项目级别Text(申报级别).fontSize(14).fontWeight(FontWeight.Medium).width(100%)Flex({wrap:FlexWrap.Wrap}){ForEach([国家级,市级,校级],(l:string){Text(l).fontSize(13).fontColor(this.newLevell?Color.White:#4C0519).padding({left:16,right:16,top:8,bottom:8}).backgroundColor(this.newLevell?#BE123C:#FFE4E6).borderRadius(20).margin({right:8,bottom:8}).onClick(()this.newLevell)})}TextArea({text:this.newProjectDesc,placeholder:项目简介研究内容、创新点、预期成果}).width(100%).height(120).backgroundColor(#FFF1F2).onChange((v:string)this.newProjectDescv)Button(提交申报).width(100%).height(48).fontSize(16).backgroundColor(#4C0519).margin({top:10}).onClick(()this.submitProject())}.width(100%).padding(20)}.layoutWeight(1)}}.width(100%).height(100%).backgroundColor(Color.White)}页面设计说明主题色采用rose-950#4C0519深玫瑰色体现学术项目的严谨、专业。玫瑰红系卡片进度条显示项目进展状态标签颜色区分审核阶段。SDK配置API 24compatibleSdkVersion: “6.1.1(24)”运行项目将代码复制到 entry/src/main/ets/pages/Index.ets 即可运行。项目总结实现了申报通知、项目申报、状态跟踪、进度管理、类型级别选择等功能。掌握了Progress进度条、表单验证、状态颜色映射、Flex标签选择等。后续可加入附件上传、成员邀请、指导老师选择、中期报告提交、结项材料、优秀项目展示等功能。

相关新闻

C++实现图像腐蚀算法:从原理到代码实践

C++实现图像腐蚀算法:从原理到代码实践

1. 项目概述:从像素到形态的运算在图像处理的世界里,我们常常需要处理一些“不完美”的图片。比如,从扫描仪得到的文档图像,边缘可能带有毛刺;或者,在识别某个物体轮廓时,我们希望去除一些细小的…

2026/10/12 8:48:12 阅读更多 →
YOLOv8与DeepSORT在智能交通中的实战应用

YOLOv8与DeepSORT在智能交通中的实战应用

1. 项目概述:当YOLOv8遇上DeepSORT的化学反应去年在某个城市交通改造项目中,我第一次尝试将YOLOv8和DeepSORT组合使用。当时需要统计一条主干道早晚高峰的车流量,传统的地感线圈方案施工周期长且破坏路面。这套组合方案从部署到出数据只用了7…

2026/10/11 23:06:08 阅读更多 →
C++标准库实战指南:从原理到应用,掌握现代C++编程核心

C++标准库实战指南:从原理到应用,掌握现代C++编程核心

1. 项目概述:为什么我们需要一本C标准库的“中文权威指南”? 在C社区里摸爬滚打了十几年,我见过太多开发者,从刚入门的新手到工作三五年的熟手,在面对C标准库时,依然会陷入一种“熟悉的陌生感”。大家可能都…

2026/10/13 2:39:38 阅读更多 →

最新新闻

Unity AssetBundle实战:打包策略、依赖管理与热更新避坑指南

Unity AssetBundle实战:打包策略、依赖管理与热更新避坑指南

1. 为什么值得花时间啃透AssetBundle如果你做Unity开发有一段时间了,大概率经历过这样的场景:项目初期资源随便扔在Resources目录里,跑得挺欢;等到包体膨胀到两三百兆,加载越来越慢,老板开始问“能不能热更…

2026/10/15 6:10:41 阅读更多 →
仓颉语言 std.overflow 高位截断(Wrapping)策略详解:原理、API 与实战示例

仓颉语言 std.overflow 高位截断(Wrapping)策略详解:原理、API 与实战示例

编程语言语言运行时标准库垃圾回收并发编程 【免费下载链接】cangjie_runtime 仓颉编程语言运行时与标准库。 项目地址: https://gitcode.com/Cangjie/cangjie_runtime 点击查看 免费下载 本文围绕仓颉(Cangjie)标准库 std.overflow 包中的高…

2026/10/15 6:10:41 阅读更多 →
SpringBoot电商系统开发:交易与推荐功能实践

SpringBoot电商系统开发:交易与推荐功能实践

1. 项目概述这个SpringBoot小型电子交易及推荐系统是一个典型的电商类应用开发项目,包含了完整的交易流程和个性化推荐功能。作为一名有多年电商系统开发经验的工程师,我认为这类项目非常适合作为毕业设计或中小型电商平台的雏形,因为它涵盖了…

2026/10/15 6:10:41 阅读更多 →
FT220汽车衡仪表调试指南:接线、标定与故障排查

FT220汽车衡仪表调试指南:接线、标定与故障排查

简介:富林泰克FT220汽车衡仪表技术手册(V18版)面向汽车衡安装调试人员、计量检测工程师及工业称重设备维护人员,用于解决FT220称重显示器的选型、安装、调试与检修问题。手册系统梳理了技术指标、主要功能、外形尺寸与型号分类&am…

2026/10/15 6:10:41 阅读更多 →
流放之路Build规划一站搞定:Path of Building三大核心能力,从估算到精确计算

流放之路Build规划一站搞定:Path of Building三大核心能力,从估算到精确计算

流放之路Build规划一站搞定:Path of Building三大核心能力,从估算到精确计算 【免费下载链接】PathOfBuilding Offline build planner for Path of Exile. 项目地址: https://gitcode.com/GitHub_Trending/pa/PathOfBuilding 《流放之路》的后期是…

2026/10/15 6:10:41 阅读更多 →
低代码与手写代码的边界:哪些场景该用低代码?

低代码与手写代码的边界:哪些场景该用低代码?

1. “手写代码已老”这句话,到底在哪条赛道上才成立我们上一家公司有个内部审批系统,开发团队花了三周做出来,上线两周后又因为审批流程调整要改代码,改完还要发版、走发布窗口,业务方在群里催了三次,研发负…

2026/10/15 6:09:41 阅读更多 →

日新闻

Docker Compose 容器化部署 ChirpStack LoRaWAN 网络服务器实战

Docker Compose 容器化部署 ChirpStack LoRaWAN 网络服务器实战

1. 为什么选择容器化方式部署 LoRa 网络服务LoRa 物联网项目落地时,网络服务器是整个链路的核心枢纽。它负责接收网关上报的数据包、完成去重与解密、再把有效载荷分发给上层应用。早期大家习惯把网络服务器直接装在物理机上,依赖一堆系统库和特定版本的…

2026/10/15 0:00:46 阅读更多 →
共享LLM服务下的跨模型自动扩缩容:Kubernetes实战与避坑指南

共享LLM服务下的跨模型自动扩缩容:Kubernetes实战与避坑指南

1. 共享推理服务里,扩缩容到底难在哪做过大模型推理服务部署的人,大概都经历过这样的场景:一个团队共用一套推理集群,A 业务跑的是 7B 的小模型,B 业务跑的是 72B 的大模型,C 业务白天流量高、晚上几乎归零…

2026/10/15 0:00:46 阅读更多 →
Systemd 启动阶段根文件系统只读之谜:fstab 与 remount-fs 服务深度解析

Systemd 启动阶段根文件系统只读之谜:fstab 与 remount-fs 服务深度解析

1. 引子:一次内核恐慌引发的追查先从一个真实场景说起。某次我给一台老旧的嵌入式设备折腾系统裁减,为了把启动时间压进两秒以内,我手贱地把一串自认为“没用”的 systemd 服务给 disable 了,其中就包括systemd-remount-fs.servic…

2026/10/15 0:00:46 阅读更多 →

周新闻

流感时间序列预测实战:ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战:ARIMA/LSTM全流程拆解与避坑指南

简介:基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码,面向计算机相关专业课程设计与期末大作业学生,以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程,…

2026/10/14 3:30:28 阅读更多 →
影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化,十个新手有八个栽在"往输入框里填东西"这件事上:要么填不进去,要么填了一半,要么直接把原来内容追加在后面。这背后的根因&…

2026/10/14 16:30:29 阅读更多 →
影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀:什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面,跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/14 3:29:58 阅读更多 →

月新闻

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/15 0:14:36 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/14 22:45:47 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/14 7:53:34 阅读更多 →