鸿蒙生鲜电商页面构建：商品网格与配送档期模块详解

前言

在 HarmonyOS 6.0 应用开发中，生鲜电商页面的商品展示和配送服务是两个直接影响转化率的核心模块。本文将以“鲜选菜篮”应用中的“精选货架”商品网格和“配送档期”时间选择模块为例，深入解析如何在鸿蒙平台上构建商品瀑布流和配送时段选择界面。

背景

在即时配送场景中，用户需要快速浏览精选商品并选择合适的配送时间段。商品网格需要展示商品名称、规格、价格和视觉标识，配送档期则需要清晰展示多个可选时间段。通过 HarmonyOS 6.0 的声明式 UI 框架，GridView.builder 可以高效实现商品网格布局，而配送档期模块在深色主题卡片中同样使用网格布局展示四个配送时段。

HarmonyOS 6.0 跨端开发介绍（电商商品与配送篇）

HarmonyOS 6.0 的 ArkUI 框架在构建商品网格时，GridView.builder 配合 childAspectRatio 参数可以精确控制每个商品卡片的宽高比。精选货架模块采用2列网格，宽高比1.18（接近正方形），卡片内顶部为彩色图标容器，中间为商品名称、规格和价格。配送档期模块同样使用2列网格，但宽高比为2.0（扁平矩形），卡片内左侧显示时间图标，右侧显示时段名称和描述。

开发核心代码（分段解析）

模块一：精选货架商品网格的数据组织

商品网格模块首先定义了一个 products 列表，每个元素包含商品名称、规格、价格、占位图标和主题色：

final products = [
  ('云南蓝莓', '125g/盒', '¥16.8', Icons.circle, _purple),
  ('普罗旺斯番茄', '500g', '¥8.9', Icons.circle, _red),
  ('崇明生菜', '300g', '¥5.6', Icons.circle, _green),
  ('甜玉米', '2 根', '¥7.8', Icons.circle, _yellow),
  ('土鸡蛋', '10 枚', '¥12.9', Icons.circle, _orange),
  ('牛奶草莓', '250g', '¥18.8', Icons.circle, _roseColor),
];

六款商品覆盖了蓝莓、番茄、生菜、玉米、鸡蛋、草莓等生鲜品类，价格从¥5.6到¥18.8不等。每个商品使用不同的主题色（紫、红、绿、黄、橙、粉），在网格中形成多彩的视觉节奏。网格布局采用 GridView.builder，配置2列、间距10像素、宽高比1.18：

gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 2,
  mainAxisSpacing: 10,
  crossAxisSpacing: 10,
  childAspectRatio: 1.18,
)

childAspectRatio: 1.18 意味着卡片宽度与高度之比为1.18，卡片略高于宽度，适合商品卡片内从上到下排列图标、商品名、规格、价格四行内容。

模块二：商品卡片的内部布局与主题色编码

每个商品卡片的装饰使用了主题色叠加9%透明度的背景，圆角20。卡片内部采用 Column 垂直布局：

Container(
  height: 52,
  decoration: BoxDecoration(
    color: item.$5.withValues(alpha: 0.14),
    borderRadius: BorderRadius.circular(16),
  ),
  child: Center(child: Icon(item.$4, color: item.$5, size: 30)),
),
const Spacer(),
Text(item.$1, maxLines: 1, overflow: TextOverflow.ellipsis, ...),
const SizedBox(height: 4),
Text(item.$2, ...),
const SizedBox(height: 8),
Text(item.$3, style: TextStyle(color: item.$5, fontWeight: FontWeight.w900)),

顶部是一个52像素高的圆角容器，背景色为主题色叠加14%透明度，内部居中显示圆形图标（占位符，实际应为商品图片），图标使用主题色、大小30像素。Spacer 将图标区域和文字区域分离，确保底部文字对齐。商品名称使用深棕色加粗，限制单行并用省略号处理过长文本；规格使用次要文字色加粗700字重；价格使用主题色加粗。这种布局让每个商品卡片的信息层次清晰，价格用主题色突出显示。

模块三：配送档期模块的深色主题与网格布局

配送档期模块采用森林绿深色背景（_forest），与商品网格的白色面板形成对比，视觉上强调这是服务选择区域。标题区使用 _buildDarkTitle 显示“配送档期”主标题和“宿舍楼下”地点标识。四个配送时段定义如下：

final slots = [
  ('10:30', '最快达', _green),
  ('12:00', '午间档', _orange),
  ('17:30', '晚餐前', _blue),
  ('20:00', '夜间档', _purple),
];

网格布局配置2列、间距10像素、宽高比2.0（扁平矩形），因为每个卡片采用水平布局，不需要太多垂直空间。

模块四：配送时段卡片的水平布局与图标设计

每个配送时段卡片的内部采用 Row 水平布局：

Container(
  padding: const EdgeInsets.all(13),
  decoration: BoxDecoration(
    color: Colors.white.withValues(alpha: 0.10),
    borderRadius: BorderRadius.circular(18),
  ),
  child: Row(
    children: [
      Icon(Icons.access_time, color: slot.$3),
      const SizedBox(width: 10),
      Expanded(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(slot.$1, style: TextStyle(color: Colors.white, fontWeight: FontWeight.w900)),
            const SizedBox(height: 3),
            Text(slot.$2, style: TextStyle(color: Colors.white.withValues(alpha: 0.66), fontSize: 12, fontWeight: FontWeight.w700)),
          ],
        ),
      ),
    ],
  ),
)

左侧是时间图标，颜色使用时段对应的主题色（绿/橙/蓝/紫）。中间是弹性列显示时段时间（10:30、12:00等）和时段描述（最快达、午间档等），文字白色分层（主标题完全不透明，副标题66%透明度）。这种水平布局在2.0的宽高比下显示舒适，用户可快速扫描所有可选时段。

模块五：商品图片占位符与实际图片的替换策略

当前代码中商品卡片顶部使用的是 Icons.circle 圆形图标作为图片占位符，实际项目中应替换为 Image.network 或 Image.asset 加载商品图片。推荐使用 CachedNetworkImage 组件实现图片缓存，同时设置占位图（placeholder）和错误图（errorWidget）。图片尺寸应使用 fit: BoxFit.cover 确保填充容器，同时设置 borderRadius 与容器圆角一致。由于商品卡片高度有限，图片容器高度52像素较小，实际项目可能需要调整为更大的尺寸（如80-100像素）以更好地展示商品图。

模块六：配送时段的选择状态管理

当前配送档期模块只展示可选时段，真实场景需要支持用户点击选择某个时段，选中后高亮显示并记录选择结果。实现方案可以使用 StatefulWidget 配合 @State 变量存储当前选中的时段索引，在每个卡片外包 GestureDetector，onTap 回调中更新选中状态。选中卡片的样式可以变化——边框增加主题色、背景透明度增加、右侧显示勾选图标等。用户确认下单时，需要将选中的时段信息传递给支付页面。

心得

通过实现商品网格和配送档期这两个模块，我总结出几点经验。第一，商品网格的宽高比1.18是经过测试的值——如果宽高比太大（如1.5），卡片会过宽导致商品名称行数变多；如果太小（如1.0），卡片会过高导致下方留白过多。第二，商品卡片顶部图标容器高度52像素配合30像素图标，比例约为1.7:1，视觉上舒适且留白适中。第三，配送档期卡片使用宽高比2.0，是因为水平布局下只需要容纳一行时间加一行描述，扁平矩形更节省滚动空间。第四，深色背景下的文字透明度分层（主标题100%、副标题66%）是保证可读性的关键，副标题如果完全不透明会与主标题争夺视觉权重。第五，六个商品使用六种不同的主题色（紫、红、绿、黄、橙、粉），虽然让网格看起来丰富多彩，但在真实项目中建议根据商品品类统一色系，避免视觉混乱。最后需要强调的是，商品网格中的圆形图标占位符仅为开发阶段使用，上线前必须替换为真实商品图片，否则会影响用户购买决策。

总结

本文详细解析了“鲜选菜篮”生鲜电商应用中精选货架商品网格和配送档期两个核心模块的实现思路。商品网格模块通过2列网格展示六款生鲜商品（云南蓝莓、普罗旺斯番茄、崇明生菜、甜玉米、土鸡蛋、牛奶草莓），每个卡片使用主题色编码，包含图标容器、商品名称、规格和价格；配送档期模块在深色森林绿背景中使用2列扁平网格展示四个配送时段（10:30最快达、12:00午间档、17:30晚餐前、20:00夜间档），卡片采用水平布局左侧时间图标右侧时段信息。两个模块共同展示了 HarmonyOS 6.0 声明式 UI 在电商场景中的灵活布局能力——通过调整 childAspectRatio 适配不同信息密度的卡片，通过颜色编码区分商品品类和时段类型。后续技术博客将聚焦于农场溯源、购物车预览、营养货架和新鲜提示等剩余模块的实现，敬请期待。