当前位置：首页 > news >正文

Flutter+开源鸿蒙实战｜校园易生活Day6 校园跑腿页面完整开发+任务列表布局+发布跑腿需求+简易接单逻辑+个人中心基础搭建

news 2026/5/7 15:58:18

Flutter+开源鸿蒙实战｜校园易生活Day6 校园跑腿页面完整开发+任务列表布局+发布跑腿需求+简易接单逻辑+个人中心基础搭建

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

<!-- Schema.org 结构化数据 --><scripttype="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","headline":"Flutter+开源鸿蒙实战 校园易生活Day6 校园跑腿页面+任务列表+发布需求+接单逻辑+个人中心搭建","author":{"@type":"Person","name":"鸿蒙跨端开发者"},"publisher":{"@type":"Organization","name":"CSDN开源鸿蒙跨平台社区"},"description":"校园易生活Day6完整开发校园跑腿核心页面，搭建跑腿任务列表、模拟任务数据、封装跑腿任务卡片、发布跑腿需求表单、实现简易接单功能，同时完成个人中心页面基础框架搭建，口语化讲解+精简核心代码+新手避坑，适配开源鸿蒙多端设备","keywords":"Flutter,开源鸿蒙,OpenHarmony,校园易生活,Day6,校园跑腿,任务列表,接单功能,个人中心"}</script>

一、前言

哈喽各位小伙伴，咱们校园易生活系列来到Day6啦！🥳

跟着回顾下前面的进度：
Day1 搞定项目整体骨架和底部导航；
Day2 集成各类常用第三方库、做首页轮播和基础工具封装；
Day3-Day5 把闲置市场、商品详情、发布闲置、图片选图、本地缓存、创意求助入口全部做完，闲置模块已经彻底闭环。

今天咱们正式攻坚校园跑腿核心板块，这也是校园APP最贴近大学生日常的功能：代取快递、代买三餐、代办校园琐事、帮忙送东西，实用性拉满，做在毕设里特别有校园真实感。

而且今天不光做跑腿列表，我还多加了创意小逻辑：简易接单、任务状态切换，顺带把个人中心基础架子一次性搭好，为后面完善个人资料、我的发布、我的收藏提前铺路。

全文依旧老规矩：
口语化大白话讲解，不机械生硬；每段代码前面都讲清用途；代码只放核心几行不堆砌；提前帮你预判新手会踩的坑，分点通俗解答；所有布局适配鸿蒙手机、平板、开发板，跟着写就能直接真机运行。

今日咱们要搞定的核心内容：

理清校园跑腿页面整体结构，划分功能区域；
新建跑腿任务数据实体类，规范任务数据格式；
用GetX创建跑腿控制器，统一管理任务列表状态；
封装专属跑腿任务卡片，样式独立、可全局复用；
搭建跑腿任务列表，搭配下拉刷新加载模拟数据；
开发发布跑腿需求入口，复用之前通用输入框；
增加创意功能：简易接单、任务状态切换（待接单/已接单）；
顺带搭建个人中心页面基础骨架，预留后续扩展空间；
适配鸿蒙多端布局，解决列表溢出、键盘遮挡问题；
汇总新手常见开发问题，逐点给原因和解决办法。

二、今日依赖库说明

不用新增任何第三方库！
直接复用前面已经装好的：getx、flutter_screenutil、flutter_easy_refresh、fluttertoast、shared_preferences、image_picker。
不用改配置、不用装依赖，直接上手写业务逻辑就行，省心又高效。

三、版块1：创建跑腿任务数据实体类

文字讲解（大白话）

跟咱们做闲置商品一样，先建一个跑腿任务实体类，相当于给每一条跑腿任务定好固定格式：任务标题、跑腿类型、酬劳金额、发布地点、任务状态。
统一规范格式，后面造模拟数据、后期对接接口都不乱字段，代码看着专业，后期也好维护。

classRunTaskModel{finalStringtitle;finalStringtype;finalStringmoney;finalStringaddress;finalint status;RunTaskModel({requiredthis.title,requiredthis.type,requiredthis.money,requiredthis.address,requiredthis.status,});}

四、版块2：创建GetX跑腿任务控制器

文字讲解（大白话）

单独建一个跑腿控制器，专门存放所有跑腿任务数据。用GetX响应式列表，页面能自动监听数据变化，不用傻傻写setState整页刷新。页面初始化自动加载模拟任务，下拉刷新也能重新加载数据，逻辑全部统一放在控制器里。

classRunControllerextendsGetxController{finalRxList<RunTaskModel>taskList=<RunTaskModel>[].obs;@overridevoidonInit(){super.onInit();loadTaskData();}voidloadTaskData(){taskList.addAll([RunTaskModel(title:"代取快递",type:"快递代办",money:"5元",address:"西门快递站",status:0),]);}}

五、版块3：全局注册跑腿控制器

文字讲解（大白话）

想要在跑腿页面、个人中心都能拿到任务数据，就要在项目入口全局懒加载注册。注册之后整个项目任何页面都能直接调用控制器，不用重复创建实例，省内存还方便。

voidmain(){Get.lazyPut(()=>RunController());runApp(constMyApp());}

六、版块4：封装专属跑腿任务卡片

文字讲解（大白话）

把每一条跑腿任务的布局单独抽出来封装成卡片，不用在列表里重复写UI代码。卡片里展示标题、类型、酬劳、地点，还根据任务状态显示“待接单”或“已接单”标签，样式统一、圆角阴影规范，后期改样式只改这一处就行。

WidgetbuildRunTaskCard(RunTaskModelmodel){returnCard(margin:EdgeInsets.symmetric(horizontal:12.w,vertical:6.h),shape:RoundedRectangleBorder(borderRadius:BorderRadius.circular(10.r)),child:Padding(padding:EdgeInsets.all(12.w),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(model.title,style:TextStyle(fontSize:15.sp,fontWeight:FontWeight.w500)),Text("酬劳：${model.money}地点：${model.address}"),Text(model.status==0?"状态：待接单":"状态：已接单"),],),),);}

七、版块5：搭建校园跑腿主页面列表

文字讲解（大白话）

跑腿页面整体很简单：顶部导航栏，中间是任务列表，外层用EasyRefresh包起来支持下拉刷新。用Obx包裹列表，控制器数据一变，页面自动刷新，不用手动刷新UI。列表采用纵向排布，一条任务一张卡片，看着整齐舒服，符合校园跑腿浏览习惯。

classRunPageextendsStatelessWidget{finalRunControllerrunCtrl=Get.find();@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText("校园跑腿")),body:Obx(()=>ListView.builder(itemCount:runCtrl.taskList.length,itemBuilder:(ctx,index)=>buildRunTaskCard(runCtrl.taskList[index]),)),);}}

八、版块6：发布跑腿需求入口与简易表单

文字讲解（大白话）

在跑腿页面顶部加一个“发布跑腿需求”按钮，点击跳转到发布表单页。复用咱们Day5封装好的通用输入框，填写任务标题、跑腿类型、酬劳、地点，简单做判空校验，填完一键发布，自动加到任务列表里，立马就能在首页看到自己发的任务。

ElevatedButton(onPressed:()=>Get.to(constPublishRunPage()),child:constText("发布跑腿需求"),)

九、版块7：创意功能——简易接单状态切换

文字讲解（大白话）

这是我给你加的创意小功能，普通毕设很少做，很加分。给每张跑腿卡片加点击事件，点击待接单任务，直接把状态从0改成1，变成“已接单”，同时弹出Toast提示接单成功。逻辑简单但很有真实交互感，模拟校园接单流程，体验瞬间拉满。

GestureDetector(onTap:(){model.status=1;ToastUtil.show("接单成功，快去完成任务吧～");},child:buildRunTaskCard(model),)

十、版块8：个人中心页面基础骨架搭建

文字讲解（大白话）

顺便把底部导航最后一个「我的」个人中心页面一次性搭好基础框架：顶部头像+昵称区域，中间排列功能入口：我的发布、我的收藏、系统设置、退出登录。
现在先把布局和占位做好，后面咱们慢慢填充具体功能，不用再重新搭架子，一步到位。

classMinePageextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText("个人中心")),body:Column(children:[CircleAvatar(radius:40.r),Text("匿名校园用户",style:TextStyle(fontSize:16.sp)),ListTile(title:constText("我的发布")),ListTile(title:constText("我的收藏")),],),);}}