Flutter+开源鸿蒙实战｜校园易生活Day5 闲置发布页搭建+相册选图+表单输入+一键发布+本地收藏缓存+创意校园求助入口

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

<!-- Schema.org 结构化数据 -->
<script type="application/ld+json">
{
  "@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. 新增闲置发布页面，搭建完整表单布局；
2. 集成图片选择第三方库，支持相册选图、相机拍照；
3. 封装统一输入框，实现标题、价格、商品描述录入；
4. 实现一键发布功能，模拟把商品加入列表；
5. 接入本地缓存，实现收藏状态永久保存，重启不丢失；
6. 额外新增创意功能：校园随手求助快捷入口小模块；
7. 适配鸿蒙多端布局，解决输入框弹出遮挡页面问题；
8. 整理新手高频报错问题，口语化逐点解答。

二、版块1：新增第三方库配置

文字讲解

今天要用到图片选择和本地缓存两个新功能，所以需要新增两个常用库，一个负责调相册、拍照片，一个负责把收藏数据存在本地，APP关掉再打开也不会清空。

打开 pubspec.yaml 追加依赖：

image_picker: ^1.0.4
shared_preferences: ^2.2.2

改完之后终端执行：

flutter pub get

鸿蒙端会自动适配权限，后面我们会讲到权限配置的注意事项。

三、版块2：封装全局通用输入框组件

文字讲解

发布页面要写标题、价格、描述，要用到好几个输入框。咱们没必要每一处都重复写代码，直接封装一个通用输入框，以后整个项目都能复用，样式统一、整洁省事。

Widget buildInputField(String hint, TextEditingController ctrl) {
  return TextField(
    controller: ctrl,
    hintText: hint,
    padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 8.h),
    decoration: OutlineInputBorder(borderRadius: BorderRadius.circular(8.r)),
  );
}

简单好懂，传一个提示文字、传一个输入控制器，就能直接用。

四、版块3：图片选择功能封装（相册+相机）

文字讲解

发布闲置肯定要上传商品图片，咱们封装一个工具方法，点击按钮可以从相册选一张，也可以现场拍照，选好之后立马在页面预览显示，适配鸿蒙设备权限调用。

Future<void> pickImage(Function(String) onPath) async {
  final XFile? file = await ImagePicker().pickImage(source: ImageSource.gallery);
  if(file != null) {
    onPath(file.path);
  }
}

我这里默认先写相册选择，想加相机只需要把 gallery 改成 camera 就行，非常灵活。

五、版块4：新建闲置发布页面基础布局

文字讲解

咱们单独建一个发布页面，布局从上到下依次是：选择图片预览区、商品标题输入、价格输入、详情描述输入、底部发布按钮。整体用滚动组件包起来，防止弹出键盘把页面挤变形、遮挡输入框，鸿蒙手机和平板都能自适应。

class PublishIdlePage extends StatefulWidget {
  const PublishIdlePage({super.key});
  @override
  State<PublishIdlePage> createState() => _PublishIdlePageState();
}

class _PublishIdlePageState extends State<PublishIdlePage> {
  String? imgPath;
  final titleCtrl = TextEditingController();
  final priceCtrl = TextEditingController();
  final descCtrl = TextEditingController();
  // 后续绑定选图、发布逻辑
}

六、版块5：一键发布功能逻辑实现

文字讲解

填完信息、选好图片，点发布按钮就能把数据临时加到闲置列表里。先做简单判空：标题和价格不能为空，空了就弹窗提示；不为空就模拟添加一条新商品，然后自动返回列表页，刷新展示刚发布的内容，交互很完整。

void submitPublish() {
  if(titleCtrl.text.isEmpty || priceCtrl.text.isEmpty) {
    ToastUtil.show("标题和价格不能为空哦");
    return;
  }
  // 模拟添加新商品到全局列表
  Get.find<IdleController>().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、重启鸿蒙设备，之前收藏的商品依旧是点亮状态，这个小优化特别提升体验，毕设做出来很加分。

简单核心存储逻辑：

Future<void> saveCollectStatus(bool status) async {
  final sp = await SharedPreferences.getInstance();
  await sp.setBool("collect_status", status);
}

页面初始化时再读取一次，自动恢复上次收藏状态。

八、版块7：创意功能二：新增校园随手求助入口

文字讲解

这是我额外给你加的原创创意小功能，普通毕设很少有人做，显得项目更贴近真实校园生活。
在首页加一个「校园随手求助」快捷入口，专门发：代取快递、代买三餐、帮忙占座、代办校园小事，点进去可以快速发布简短求助，不用走闲置发布复杂表单，简单快捷。

布局就用一个圆角小卡片，放在首页功能区旁边，图标+文字，风格和整体APP统一，简洁又实用。

九、版块8：鸿蒙多端适配与键盘适配优化

1. 页面全部用 SingleChildScrollView 包裹，鸿蒙手机弹出键盘不会挤压页面、遮挡输入框；
2. 选图预览自动适配屏幕宽度，平板上自动放大预览尺寸，不变形；
3. 输入框、按钮全部用 .w .h .sp 适配，一套代码兼容手机、平板、DAYU开发板；
4. 图片相册权限适配鸿蒙系统，首次调用会自动申请权限，不用额外复杂配置。
   

十、版块9：新手常见问题 口语化逐点解答

问题1：调用相册没反应、一片空白？

解答：大概率是鸿蒙权限没给，去手机设置给APP开相册、存储权限；另外检查image_picker库有没有正常引入，路径书写不要带中文空格。

问题2：输入框弹出键盘，页面直接挤乱变形？

解答：就是没套滚动组件，内容超出屏幕就会被键盘硬挤压。在外层包一个SingleChildScrollView，键盘弹出页面自动往上滚，不会乱布局。

问题3：发布之后列表不刷新，看不到新商品？

解答：因为没有用Obx监听列表，添加完新数据后，GetX列表要被Obx包裹才能自动刷新；加上之后发布完立马就能看到新商品。

问题4：缓存存不住，重启APP收藏就重置？

解答：一是保存的key名字写错，读取和存储key必须一模一样；二是没有在页面初始化的时候调用读取方法，只存了没读，自然恢复不了状态。

问题5：表单输入容易为空，怎么简单校验？

解答：就做最简单判空就行，标题、价格不能为空，描述可以为空；空了直接Toast提示用户补齐，新手不用写复杂正则校验，够用、简洁就好。

十一、Day5 开发总结

1. 新增图片选择、本地缓存两大核心依赖库；
2. 封装全局通用输入框，整个项目可复用，简化代码；
3. 完成闲置发布页面完整布局，支持选图、填表；
4. 实现一键发布、表单判空、自动返回刷新列表；
5. 升级收藏功能，加入本地持久化缓存，重启不丢失；
6. 新增创意功能：校园随手求助快捷入口，项目更有亮点；
7. 解决鸿蒙键盘遮挡、多端布局适配、权限适配等细节；
8. 梳理新手常见报错，对照就能快速排查解决。

十二、下期Day6预告

Day6我们重点做：校园跑腿页面完整开发、跑腿任务列表布局、发布跑腿需求、接单简易逻辑、个人中心页面基础搭建，逐步把校园易生活五大模块全部做闭环。