Flutter开源鸿蒙实战校园易生活Day5 闲置发布页搭建相册选图表单输入一键发布本地收藏缓存创意校园求助入口欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net!-- Schema.org 结构化数据 --scripttypeapplication/ldjson{context:https://schema.org,type:BlogPosting,headline:Flutter开源鸿蒙实战 校园易生活Day5 闲置发布页相册选图表单提交本地缓存创意求助入口,author:{type:Person,name:鸿蒙跨端开发者},publisher:{type:Organization,name:CSDN开源鸿蒙跨平台社区},description:校园易生活Day5全新开发闲置商品发布页面集成相册相机选图、表单多输入框、一键发布上架、本地收藏数据持久化额外新增创意校园随手求助快捷入口适配开源鸿蒙多端新手友好带避坑讲解,keywords:Flutter,开源鸿蒙,OpenHarmony,校园易生活,Day5,闲置发布,相册选图,表单提交,本地缓存,校园求助}/script一、前言哈喽小伙伴们咱们校园易生活来到Day5啦前面Day1搭好项目整体骨架、Day2做了首页轮播和基础工具封装、Day3写完闲置市场列表、Day4完善了商品详情和收藏交互。到今天闲置模块还差最后一块关键拼图自己发布闲置商品。这次我不光带你做常规的发布页面、相册选图、表单填写、一键发布还额外加了两个创意小功能一个是收藏状态本地缓存退出APP再进来收藏过的商品还在不会重置另一个是校园随手求助快捷入口临时帮取快递、代买饭菜可以快速发求助非常贴合真实校园生活做毕设特别加分、有创意。整篇文章依旧保持口语化讲解不机械生硬每段代码前面都用大白话讲清作用代码精简只放核心几行同时提前帮你预判新手容易踩的坑一步步跟着写就能直接在鸿蒙手机、平板上跑通。今日咱们要完成的内容新增闲置发布页面搭建完整表单布局集成图片选择第三方库支持相册选图、相机拍照封装统一输入框实现标题、价格、商品描述录入实现一键发布功能模拟把商品加入列表接入本地缓存实现收藏状态永久保存重启不丢失额外新增创意功能校园随手求助快捷入口小模块适配鸿蒙多端布局解决输入框弹出遮挡页面问题整理新手高频报错问题口语化逐点解答。二、版块1新增第三方库配置文字讲解今天要用到图片选择和本地缓存两个新功能所以需要新增两个常用库一个负责调相册、拍照片一个负责把收藏数据存在本地APP关掉再打开也不会清空。打开pubspec.yaml追加依赖image_picker:^1.0.4shared_preferences:^2.2.2改完之后终端执行flutter pub get鸿蒙端会自动适配权限后面我们会讲到权限配置的注意事项。三、版块2封装全局通用输入框组件文字讲解发布页面要写标题、价格、描述要用到好几个输入框。咱们没必要每一处都重复写代码直接封装一个通用输入框以后整个项目都能复用样式统一、整洁省事。WidgetbuildInputField(Stringhint,TextEditingControllerctrl){returnTextField(controller:ctrl,hintText:hint,padding:EdgeInsets.symmetric(horizontal:12.w,vertical:8.h),decoration:OutlineInputBorder(borderRadius:BorderRadius.circular(8.r)),);}简单好懂传一个提示文字、传一个输入控制器就能直接用。四、版块3图片选择功能封装相册相机文字讲解发布闲置肯定要上传商品图片咱们封装一个工具方法点击按钮可以从相册选一张也可以现场拍照选好之后立马在页面预览显示适配鸿蒙设备权限调用。FuturevoidpickImage(Function(String)onPath)async{finalXFile?fileawaitImagePicker().pickImage(source:ImageSource.gallery);if(file!null){onPath(file.path);}}我这里默认先写相册选择想加相机只需要把gallery改成camera就行非常灵活。五、版块4新建闲置发布页面基础布局文字讲解咱们单独建一个发布页面布局从上到下依次是选择图片预览区、商品标题输入、价格输入、详情描述输入、底部发布按钮。整体用滚动组件包起来防止弹出键盘把页面挤变形、遮挡输入框鸿蒙手机和平板都能自适应。classPublishIdlePageextendsStatefulWidget{constPublishIdlePage({super.key});overrideStatePublishIdlePagecreateState()_PublishIdlePageState();}class_PublishIdlePageStateextendsStatePublishIdlePage{String?imgPath;finaltitleCtrlTextEditingController();finalpriceCtrlTextEditingController();finaldescCtrlTextEditingController();// 后续绑定选图、发布逻辑}六、版块5一键发布功能逻辑实现文字讲解填完信息、选好图片点发布按钮就能把数据临时加到闲置列表里。先做简单判空标题和价格不能为空空了就弹窗提示不为空就模拟添加一条新商品然后自动返回列表页刷新展示刚发布的内容交互很完整。voidsubmitPublish(){if(titleCtrl.text.isEmpty||priceCtrl.text.isEmpty){ToastUtil.show(标题和价格不能为空哦);return;}// 模拟添加新商品到全局列表Get.findIdleController().idleList.add(IdleModel(title:titleCtrl.text,price:priceCtrl.text,desc:descCtrl.text,img:imgPath??assets/images/default.jpg));ToastUtil.show(发布成功);Get.back();}七、版块6创意功能一收藏本地缓存持久化文字讲解之前Day4做的收藏退出APP再进来就重置了今天咱们升级一下用shared_preferences把收藏状态存在手机本地。就算关掉APP、重启鸿蒙设备之前收藏的商品依旧是点亮状态这个小优化特别提升体验毕设做出来很加分。简单核心存储逻辑FuturevoidsaveCollectStatus(bool status)async{finalspawaitSharedPreferences.getInstance();awaitsp.setBool(collect_status,status);}页面初始化时再读取一次自动恢复上次收藏状态。八、版块7创意功能二新增校园随手求助入口文字讲解这是我额外给你加的原创创意小功能普通毕设很少有人做显得项目更贴近真实校园生活。在首页加一个「校园随手求助」快捷入口专门发代取快递、代买三餐、帮忙占座、代办校园小事点进去可以快速发布简短求助不用走闲置发布复杂表单简单快捷。布局就用一个圆角小卡片放在首页功能区旁边图标文字风格和整体APP统一简洁又实用。九、版块8鸿蒙多端适配与键盘适配优化页面全部用SingleChildScrollView包裹鸿蒙手机弹出键盘不会挤压页面、遮挡输入框选图预览自动适配屏幕宽度平板上自动放大预览尺寸不变形输入框、按钮全部用.w .h .sp适配一套代码兼容手机、平板、DAYU开发板图片相册权限适配鸿蒙系统首次调用会自动申请权限不用额外复杂配置。十、版块9新手常见问题 口语化逐点解答问题1调用相册没反应、一片空白解答大概率是鸿蒙权限没给去手机设置给APP开相册、存储权限另外检查image_picker库有没有正常引入路径书写不要带中文空格。问题2输入框弹出键盘页面直接挤乱变形解答就是没套滚动组件内容超出屏幕就会被键盘硬挤压。在外层包一个SingleChildScrollView键盘弹出页面自动往上滚不会乱布局。问题3发布之后列表不刷新看不到新商品解答因为没有用Obx监听列表添加完新数据后GetX列表要被Obx包裹才能自动刷新加上之后发布完立马就能看到新商品。问题4缓存存不住重启APP收藏就重置解答一是保存的key名字写错读取和存储key必须一模一样二是没有在页面初始化的时候调用读取方法只存了没读自然恢复不了状态。问题5表单输入容易为空怎么简单校验解答就做最简单判空就行标题、价格不能为空描述可以为空空了直接Toast提示用户补齐新手不用写复杂正则校验够用、简洁就好。十一、Day5 开发总结新增图片选择、本地缓存两大核心依赖库封装全局通用输入框整个项目可复用简化代码完成闲置发布页面完整布局支持选图、填表实现一键发布、表单判空、自动返回刷新列表升级收藏功能加入本地持久化缓存重启不丢失新增创意功能校园随手求助快捷入口项目更有亮点解决鸿蒙键盘遮挡、多端布局适配、权限适配等细节梳理新手常见报错对照就能快速排查解决。十二、下期Day6预告Day6我们重点做校园跑腿页面完整开发、跑腿任务列表布局、发布跑腿需求、接单简易逻辑、个人中心页面基础搭建逐步把校园易生活五大模块全部做闭环。