Flutter+开源鸿蒙实战｜校园易生活Day3 闲置市场页面搭建+卡片封装+GetX状态管理+新手避坑指南

本文介绍了Flutter与开源鸿蒙结合的校园闲置市场页面开发实战，主要包含以下内容：1）创建商品数据实体类统一数据结构；2）使用GetX状态管理控制器处理列表数据；3）封装可复用的自定义商品卡片组件；4）实现网格布局和下拉刷新功能；5）添加卡片点击跳转逻辑；6）适配鸿蒙多端设备；7）提供新手常见问题解答。文章采用模块化开发思路，注重代码规范性和多端适配性，适合初学者学习跨平台应用开发。

xmdy5866

24人浏览 · 2026-05-07 15:09:17

xmdy5866 · 2026-05-07 15:09:17 发布

Flutter+开源鸿蒙实战｜校园易生活Day3 闲置市场页面搭建+卡片封装+GetX状态管理+新手避坑指南

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

<!-- Schema.org 结构化数据 -->
<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"BlogPosting",
  "headline":"Flutter+开源鸿蒙实战 校园易生活Day3 闲置市场页面+自定义卡片+GetX+下拉刷新+新手避坑",
  "author":{"@type":"Person","name":"鸿蒙跨端开发者"},
  "publisher":{"@type":"Organization","name":"CSDN开源鸿蒙跨平台社区"},
  "description":"校园易生活Day3完整开发闲置市场页面，自定义卡片封装、GetX控制器、模拟数据、下拉刷新、页面跳转，附带新手最容易遇到的问题详细解答",
  "keywords":"Flutter,开源鸿蒙,OpenHarmony,校园易生活,Day3,闲置市场,自定义卡片,GetX,下拉刷新,鸿蒙适配"
}
</script>

一、前言

哈喽小伙伴们，我们来到校园易生活Day3！

Day1我们搭好了项目骨架、底部导航和多端适配基础；
Day2批量集成常用第三方库，完成全局Toast提示、网络状态监听、首页轮播图与资讯卡片布局。

今天Day3正式开发校园闲置跳蚤市场核心页面，也是同学们做毕设最核心、最常用的模块。
我不仅带大家一步步实现功能，还在每段代码前加通俗文字讲解，新手也能看懂逻辑；同时预判大家写代码时容易踩的坑，分点口语化解析原因和解决办法，逻辑清晰、有条理。
在这里插入图片描述

今日核心学习目标：

理清闲置市场页面整体布局结构；
创建闲置商品数据实体类，统一数据格式；
借助GetX编写状态控制器，统一管理列表数据；
封装可全局复用的自定义闲置商品卡片；
实现网格列表布局+下拉刷新功能；
完成卡片点击路由跳转，预留详情页入口；
适配鸿蒙手机、平板、开发板多端布局；
汇总新手高频报错问题，逐点清晰解答。

二、今日依赖库说明

无需新增任何第三方库，直接复用Day1、Day2已配置依赖：
flutter_screenutil、getx、flutter_easy_refresh、fluttertoast、connectivity_plus、flutter_swiper_null_safe
不用修改pubspec.yaml，无需执行依赖安装，直接开发业务即可。

三、版块1：创建闲置商品数据实体类

文字讲解

我们先要定义一个闲置商品实体类，作用是统一规范每条二手商品的数据结构，固定包含标题、价格、描述、图片路径几个核心字段。后续创建模拟数据、接收接口数据，都必须遵循这个格式，避免字段混乱、传参出错，也是正规项目必备写法。

class IdleModel {
  final String title;
  final String price;
  final String desc;
  final String img;

  IdleModel({
    required this.title,
    required this.price,
    required this.desc,
    required this.img,
  });
}

四、版块2：编写GetX闲置状态控制器

文字讲解

用GetX控制器专门管理闲置列表数据，把商品列表定义成可监听响应式数组。页面初始化时自动加载模拟测试数据，后续下拉刷新、数据更新都在这个控制器里统一处理，页面只负责UI展示，做到逻辑和界面分离，不用频繁调用setState刷新页面。

class IdleController extends GetxController {
  final RxList<IdleModel> idleList = <IdleModel>[].obs;

  @override
  void onInit() {
    super.onInit();
    loadTestData();
  }

  void loadTestData() {
    idleList.addAll([
      IdleModel(title: "大学专业教材", price: "15元", desc: "九成新无笔记", img: "assets/images/idle1.jpg"),
    ]);
  }
}

在这里插入图片描述

五、版块3：全局懒加载注册控制器

文字讲解

想要在项目任意页面都能调用闲置控制器，就需要在项目入口main.dart全局注册。采用懒加载方式，用到时才初始化，节省内存，注册之后所有页面都可以通过Get.find直接获取控制器实例。

void main() {
  Get.lazyPut(() => IdleController());
  runApp(const MyApp());
}

六、版块4：封装全局自定义闲置商品卡片

文字讲解

把闲置列表里重复用到的商品布局单独抽离封装成公共组件，只保留图片、标题、价格核心模块。统一设置圆角、阴影和适配尺寸，后续多处页面复用不用重复写UI代码，后期改样式只改这一处就行。

Widget buildIdleCard(IdleModel model) {
  return Card(
    elevation: 2,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.r)),
    child: Column(
      children: [
        Image.asset(model.img, height: 130.h, fit: BoxFit.cover),
        Text(model.title, style: TextStyle(fontSize: 14.sp)),
        Text("¥${model.price}", style: TextStyle(color: Colors.redAccent)),
      ],
    ),
  );
}

七、版块5：搭建闲置市场主页面骨架

文字讲解

闲置页面采用标准脚手架结构，通过Get.find获取全局闲置控制器。用Obx包裹列表组件，作用是监听控制器数据变化，数据更新页面自动刷新；采用GridView网格布局，一行展示两个商品卡片，符合校园闲置市场浏览习惯。

class IdlePage extends StatelessWidget {
  final IdleController idleCtrl = Get.find();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("校园闲置市场")),
      body: Obx(() => GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        itemCount: idleCtrl.idleList.length,
        itemBuilder: (ctx, index) => buildIdleCard(idleCtrl.idleList[index]),
      )),
    );
  }
}

八、版块6：集成下拉刷新功能

文字讲解

在外层嵌套EasyRefresh下拉刷新组件，绑定刷新控制器。手指下拉页面时触发onRefresh方法，重新加载模拟数据，刷新完成自动收起加载动画，适配鸿蒙系统滑动手感，交互更流畅自然。

EasyRefresh(
  controller: EasyRefreshController(),
  onRefresh: () => idleCtrl.loadTestData(),
  child: GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
    itemCount: idleCtrl.idleList.length,
    itemBuilder: (ctx, index) => buildIdleCard(idleCtrl.idleCtrl.idleList[index]),
  ),
)

九、版块7：卡片添加点击路由跳转

文字讲解

给商品卡片外层包裹手势监听组件，点击后通过Get路由无上下文跳转，携带商品数据预留传给详情页，同时弹出Toast提示交互反馈。不用原生Navigator复杂写法，GetX一行代码就能实现页面跳转。

GestureDetector(
  onTap: () {
    Get.toNamed("/idleDetail", arguments: model);
    ToastUtil.show("正在进入商品详情");
  },
  child: buildIdleCard(model),
)