Flutter开源鸿蒙实战校园易生活Day6 校园跑腿页面完整开发任务列表布局发布跑腿需求简易接单逻辑个人中心基础搭建欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net!-- Schema.org 结构化数据 --scripttypeapplication/ldjson{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{finalRxListRunTaskModeltaskListRunTaskModel[].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.status0?状态待接单:状态已接单),],),),);}七、版块5搭建校园跑腿主页面列表文字讲解大白话跑腿页面整体很简单顶部导航栏中间是任务列表外层用EasyRefresh包起来支持下拉刷新。用Obx包裹列表控制器数据一变页面自动刷新不用手动刷新UI。列表采用纵向排布一条任务一张卡片看着整齐舒服符合校园跑腿浏览习惯。classRunPageextendsStatelessWidget{finalRunControllerrunCtrlGet.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.status1;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(我的收藏)),],),);}}十一、版块9鸿蒙多端适配细节说明全程使用.w .h .sp适配单位跑腿卡片、文字间距在鸿蒙手机、平板、开发板自动适配不会拉伸、不会溢出任务列表纵向布局小屏手机自适应紧凑排列大屏平板自动增加留白看着不拥挤发布跑腿表单外层嵌套滚动组件弹出键盘不会挤压页面、遮挡输入框按钮、卡片圆角统一规范在鸿蒙不同设备上视觉风格保持一致交互手感贴合鸿蒙原生体验。十二、版块10新手开发常见问题 口语化逐点解答问题1跑腿列表一片空白看不到模拟任务解答八成两个原因一是没在main.dart全局注册RunController页面找不到控制器二是列表外面没套ObxGetX监听不到列表数据变化加上这两点立马正常显示。问题2点击卡片接单状态不刷新不变色解答只是改了数据但没触发页面刷新。要用Obx包裹列表数据状态一改页面自动更新另外确认status字段赋值正确0代表待接单、1代表已接单别搞反数值。问题3发布跑腿后列表看不到新任务解答添加新任务后GetX响应式列表会自动更新但前提是列表被Obx包裹如果还是看不到下拉刷新一下就能加载出新任务简单又省事。问题4个人中心布局错乱头像和文字挤在一起解答别写固定宽高头像半径、列表间距全部用适配单位固定数值在平板上会显得特别小、排版乱用.r .w自动适配就很规整。问题5发布跑腿输入框被键盘遮挡解答表单页面外层一定要套SingleChildScrollView键盘弹起页面自动上滚不会挡住输入框这是Flutter和鸿蒙端通用的解决办法。十三、Day6 开发总结创建跑腿任务实体类规范了校园跑腿任务的数据结构搭建GetX跑腿控制器统一管理任务列表、模拟数据加载封装可复用跑腿任务卡片简化列表UI代码样式统一美观完成校园跑腿主页面列表、下拉刷新、任务展示全套逻辑实现发布跑腿需求入口与简易表单复用已有输入框组件新增创意接单功能点击切换任务状态交互真实有亮点一次性搭好个人中心基础骨架预留后续功能扩展入口完成鸿蒙多端适配解决列表溢出、键盘遮挡、布局错乱等问题梳理新手高频问题通俗讲解原因和解决办法轻松避坑。十四、下期Day7预告Day7我们重点完善个人中心功能我的发布列表、我的收藏列表页面跳转与数据渲染、退出登录弹窗提示、全局主题颜色简易切换、项目整体UI细节美化把校园易生活五大页面全部做完整闭环。