Flutter开源鸿蒙实战校园易生活Day4 闲置详情页开发路由传参大图轮播收藏功能新手避坑欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net!-- Schema.org 结构化数据 --scripttypeapplication/ldjson{context:https://schema.org,type:BlogPosting,headline:Flutter开源鸿蒙实战 校园易生活Day4 闲置详情页路由传参大图轮播收藏功能新手避坑,author:{type:Person,name:鸿蒙跨端开发者},publisher:{type:Organization,name:CSDN开源鸿蒙跨平台社区},datePublished:2026-05-06,description:校园易生活Day4完整开发闲置详情页面实现路由传参接收、商品大图轮播、完整信息展示、收藏功能、联系卖家按钮附带新手常见问题解答适配鸿蒙多端设备,keywords:Flutter,开源鸿蒙,OpenHarmony,校园易生活,Day4,闲置详情页,路由传参,大图轮播,收藏功能}/script一、前言哈喽小伙伴们咱们继续肝校园易生活Day4啦回顾一下Day3咱们搞定了闲置市场的列表页——搭了网格布局、封装了商品卡片、用GetX管了数据还做了下拉刷新最后给卡片加了点击跳转的预留逻辑。今天咱们就把这个“坑”填上完整开发闲置商品详情页这一步特别关键毕竟用户点进商品肯定要看到完整信息也是毕设里“页面交互”的重点得分项咱们一步步来不着急。全程我尽量说人话不搞那些生硬的技术术语每段代码前都用大白话讲清楚“这行代码是干嘛的”新手也能看懂代码只放最核心的5-6行不冗余、不堆砌还会预判你们写代码时大概率会踩的坑口语化分点讲明白原因和解决办法保证你们跟着写能一次跑通不报错、不卡壳。另外所有功能都适配鸿蒙手机、平板的实景运行效果写完就能在真机上看到完整效果成就感拉满今日咱们要搞定的核心事儿通俗版新建详情页搭好基础架子顶部返回、主体内容区接收Day3跳转时带过来的商品数据比如标题、价格、图片做商品大图轮播支持手动滑、自动滑跟平时刷APP一样做收藏功能点击星星切换收藏/取消还会有提示加“联系卖家”按钮先做个提示后续再搞真正的拨号优化页面交互比如滑动不溢出、按钮不遮挡适配鸿蒙手机、平板保证布局不歪、不拉伸汇总新手最容易踩的坑一个个讲透怎么解决。二、今日依赖库说明省事儿版不用新增任何库不用改pubspec.yaml不用执行flutter pub get直接用前3天咱们装过的所有库flutter_screenutil、getx、flutter_easy_refresh、fluttertoast、connectivity_plus、flutter_swiper_null_safe直接上手写就行省得多余操作。三、版块1新建闲置详情页面基础骨架先搭个壳文字讲解大白话咱们先给详情页搭个最基础的架子跟之前所有页面保持一致这样看起来整齐后期维护也方便。顶部弄个导航栏加个返回按钮点一下就能回到列表页主体部分用滚动组件包起来防止内容太多看不到里面先空着后续再把轮播、商品信息、按钮填进去适配鸿蒙多端不会一上来就乱布局。classIdleDetailPageextendsStatelessWidget{constIdleDetailPage({super.key});overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText(商品详情),// 左上角返回按钮点一下回到上一页leading:IconButton(icon:constIcon(Icons.backspace),onPressed:()Get.back()),),// 滚动组件防止内容太多溢出看不到body:SingleChildScrollView(child:Column(children:const[/* 后面把轮播、信息、按钮填这 */]),),);}}四、版块2GetX路由传参接收核心拿到商品数据文字讲解大白话Day3咱们点击商品卡片时已经把商品的所有数据标题、价格、图片带过来了这一步就是“接住”这些数据。不用写复杂的代码一行Get.arguments就能拿到拿到之后就能把这些数据显示在详情页上比如把标题显示在页面里、把图片显示在轮播图里。classIdleDetailPageextendsStatelessWidget{constIdleDetailPage({super.key});overrideWidgetbuild(BuildContextcontext){// 关键代码接住Day3跳转时带过来的商品数据finalIdleModelmodelGet.arguments;returnScaffold(appBar:AppBar(title:constText(商品详情)),body:SingleChildScrollView(child:Column(children:[/* 用拿到的数据渲染页面 */])),);}}五、版块3集成商品大图轮播多图切换跟平时刷APP一样文字讲解大白话详情页最顶部肯定要放商品的大图而且很多商品不止一张图所以咱们做个轮播。这里先模拟3张图实际后期对接接口就能显示真实图片支持自动轮播、手动滑动底部加个小圆点指示器告诉咱们当前在看第几张图适配鸿蒙手机、平板图不会拉伸、不会溢出。WidgetbuildImageSwiper(IdleModelmodel){// 模拟商品多图比如商品主图细节图后期换接口数据就行finalListStringimgList[model.img,assets/images/idle2.jpg,assets/images/idle3.jpg];returnSwiper(itemCount:imgList.length,// 轮播图数量跟图片数组长度一致autoplay:true,// 自动轮播不用手动滑itemBuilder:(ctx,index)Image.asset(imgList[index],fit:BoxFit.cover),pagination:constSwiperPagination(),// 底部小圆点指示器);}六、版块4商品完整信息布局把商品详情显示出来文字讲解大白话轮播图下面就是商品的详细信息了——标题、价格、描述、发布时间按从上到下的顺序排看着清晰。价格弄成红色显眼描述和发布时间弄成灰色区分主次所有文字大小、间距都用适配单位保证在手机上不挤、在平板上不空旷鸿蒙多端都好看。WidgetbuildIdleInfo(IdleModelmodel){returnPadding(padding:EdgeInsets.all(15.w),// 四周留空白不挤child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(model.title,style:TextStyle(fontSize:16.sp,fontWeight:FontWeight.w600)),SizedBox(height:10.h),// 留一点间距不拥挤Text(¥${model.price},style:TextStyle(color:Colors.redAccent,fontSize:18.sp)),SizedBox(height:10.h),Text(商品描述${model.desc},style:TextStyle(fontSize:14.sp,color:Colors.grey[600])),Text(发布时间2026-05-06,style:TextStyle(fontSize:12.sp,color:Colors.grey)),]),);}七、版块5开发收藏功能点击星星切换状态有提示文字讲解大白话收藏功能很简单就是一个星星图标点击一下变成黄色收藏成功再点击一下变成灰色取消收藏同时弹出提示告诉用户操作成功。咱们用GetX的响应式变量管理状态不用手动刷新页面点击之后自动切换适配鸿蒙所有设备交互很流畅。classIdleDetailControllerextendsGetxController{// 收藏状态默认未收藏falseobs表示响应式变化时页面自动刷新finalRxBoolisCollectedfalse.obs;// 点击收藏/取消收藏的方法voidtoggleCollect(){isCollected.value!isCollected.value;// 切换状态true变falsefalse变true// 弹出提示告诉用户操作结果ToastUtil.show(isCollected.value?收藏成功啦:已取消收藏);}}八、版块6联系卖家按钮先做提示后续搞拨号文字讲解大白话详情页底部加一个“联系卖家”按钮颜色用咱们的主题色圆角样式看着美观。现在先做个点击提示告诉用户正在联系卖家等Day5咱们集成拨号库就能实现真正的拨号功能点击直接打给卖家。按钮放在底部适配鸿蒙手机的底部安全区不会被遮挡。WidgetbuildContactBtn(){returnPadding(padding:EdgeInsets.all(15.w),child:ElevatedButton(onPressed:(){ToastUtil.show(正在联系卖家稍等哦);// 后续Day5搞真正拨号UrlLauncher.launchUrl(Uri.parse(tel:13800138000));},child:constText(联系卖家),),);}九、版块7整合详情页所有组件拼起来完整可用文字讲解大白话现在咱们把上面写的所有组件——大图轮播、商品信息、收藏按钮、联系卖家按钮全部拼到详情页里用Column纵向排好外层还是用滚动组件包着防止内容太多看不到。这样一来一个完整的详情页就做好了点击卡片跳转过来就能看到所有内容交互也流畅。classIdleDetailPageextendsStatelessWidget{// 先拿到商品数据finalIdleModelmodelGet.arguments;// 初始化收藏控制器finalIdleDetailControllerctrlGet.put(IdleDetailController());overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText(商品详情),leading:IconButton(icon:constIcon(Icons.backspace),onPressed:()Get.back())),body:SingleChildScrollView(child:Column(children:[buildImageSwiper(model),// 大图轮播buildIdleInfo(model),// 商品信息// 收藏按钮根据状态切换颜色Obx(()IconButton(icon:Icon(Icons.star,color:ctrl.isCollected.value?Colors.yellow:Colors.grey),onPressed:()ctrl.toggleCollect())),buildContactBtn(),// 联系卖家按钮]),),);}}十、版块8鸿蒙多端适配实景运行效果肉眼可见跟大家说下实景适配效果你们写完就能在真机上看到手机端整体布局紧凑大图轮播刚好占满手机宽度文字、按钮大小适中底部按钮不会被遮挡滑动流畅平板端自动加宽轮播图商品信息区域留更多空白文字、按钮按比例放大看着不拥挤、不空旷布局很舒展小细节不管是手机还是平板所有间距、尺寸都是用的适配单位轮播图不会拉伸、文字不会重叠鸿蒙开发板运行也不会报错交互上轮播切换不卡顿点击收藏、联系按钮反馈很及时符合咱们平时用鸿蒙手机的习惯。十一、版块9新手开发常见问题口语化逐个讲透避坑我知道你们写代码的时候肯定会遇到各种小问题我把最常见的6个坑一个个讲明白你们对照着排查保证能解决问题1接收不到路由传参报错“null”最常见解答就两个原因很好排查① Day3跳转的时候没带数据——回去检查一下是不是写了Get.toNamed(“/idleDetail”, arguments: model)有没有漏写arguments② 详情页接收顺序错了——一定要先写final IdleModel model Get.arguments; 再渲染页面不能把接收代码写在后面。问题2大图轮播只显示一张图切换不了解答大概率是轮播图的itemCount设错了比如你有3张图itemCount就得设成imgList.length跟图片数组长度一致不能写死1另外检查一下是不是漏写了SwiperPagination底部小圆点没写也可能切换不了。问题3收藏按钮点击没反应状态不切换解答三个排查点逐个看① 没给收藏按钮套Obx——GetX监听不到状态变化按钮就不会变颜色一定要用Obx(() IconButton(…))② 没初始化控制器——忘了写final IdleDetailController ctrl Get.put(IdleDetailController()); 控制器没启动点击当然没反应③ 没调用toggleCollect方法——onPressed里面一定要写ctrl.toggleCollect()不能空着。问题4页面内容太多底部按钮被遮挡、看不到解答太简单了就是没给页面外层套SingleChildScrollView内容超出屏幕高度就会被挡住。只要把Column放在SingleChildScrollView里面就能上下滑动所有内容都能看到不会被遮挡。问题5联系卖家按钮点击没反应Toast不弹出解答排查两点① 按钮被其他组件遮挡了——比如padding设太大把按钮挤到屏幕外面了调整一下padding大小② 没写Toast提示——onPressed里面一定要加ToastUtil.show(…)另外确认一下fluttertoast库是不是正常集成了没有版本冲突。问题6详情页在平板上布局错乱、文字挤在一起解答新手最容易犯的错——用了固定数字比如把文字大小写成16间距写成10平板分辨率大固定数字就会显得很小、很挤。把所有固定数值全部改成.w .h .sp适配单位框架会自动适配平板尺寸布局就舒展了。十二、Day4 开发总结通俗版不搞虚的今天咱们算是把闲置模块的“闭环”搞定了总结一下咱们今天干的事儿完整开发了闲置详情页从基础架子到所有组件拼起来就能用学会了用GetX接收路由传参不用复杂代码就能拿到页面间的数据做了大图轮播支持自动、手动切换适配鸿蒙多端看着很专业搞定了收藏功能点击切换状态还有提示反馈交互很友好加了联系卖家按钮预留了拨号逻辑后续完善一下就能用适配了鸿蒙手机、平板布局不歪、不拉伸实景运行效果很好解决了新手最容易踩的6个坑以后再遇到不用慌直接对照排查完成了“闲置列表→详情页”的完整流程毕设的核心模块又完善了一步。十三、下期Day5预告提前剧透Day5咱们继续往下搞重点做这几件事完善联系卖家功能集成拨号库点击按钮真正能打电话开发闲置发布页面的基础布局让用户能发布自己的二手商品加图片选择功能支持从相册/相机选图复用之前的资源封装统一的输入框发布商品时填写标题、价格、描述完善收藏功能用缓存保存收藏状态退出APP再进来收藏不会消失。