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标签选择等。后续可加入附件上传、成员邀请、指导老师选择、中期报告提交、结项材料、优秀项目展示等功能。
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标签选择等。后续可加入附件上传、成员邀请、指导老师选择、中期报告提交、结项材料、优秀项目展示等功能。
