前言

随着 Harmony6.0 在分布式能力、系统流畅度以及 ArkUI 渲染机制上的持续完善，越来越多开发者开始关注 Flutter × HarmonyOS 的跨端融合开发模式。对于很多移动端项目而言，单纯完成“能运行”已经远远不够，真正有价值的是：如何在保证开发效率的同时，构建具备现代化视觉风格、实时数据感知能力以及良好交互体验的业务页面。

这次我尝试实现的是一个偏“仓储库存管理”风格的业务 Dashboard 页面。相比普通列表页面，这类页面更强调数据概览、状态提醒以及信息密度控制。页面中既包含 KPI 数据卡片，也包含库存预警提示模块，整体设计更偏向企业级后台系统的移动化适配场景。

本文会结合 Flutter 在 Harmony6.0 上的页面构建实践，详细分析页面组件设计思路、Grid 布局实现方式、数据卡片封装方案以及鸿蒙设备上的 UI 表现优化。文章不会做逐行代码讲解，而是从模块拆分和界面组织角度分析实际开发中的核心思路。

---

背景

传统库存管理系统大多诞生于 PC Web 时代，因此界面通常以复杂表格、菜单树以及重信息密度为主。但移动端仓储系统的核心目标并不是“把后台搬到手机上”，而是让关键数据能够快速被查看和响应。

例如：

• 当前采购入库数量；
• 库存 SKU 总量；
• 临期商品数量；
• 缺货商品数量；
• 实时库存预警提醒。

这些数据更适合通过卡片化设计进行展示。

而在 Harmony6.0 环境下，Flutter 页面除了要保证跨端一致性，还需要兼顾：

• 不同尺寸设备适配；
• HarmonyOS 的流畅动画体验；
• 高刷新率场景下的稳定渲染；
• 多组件嵌套时的性能控制。

因此，在页面架构设计上，需要避免复杂嵌套与过度布局计算，同时保证组件具备足够高的复用性。

---

Flutter × Harmony6.0 跨端开发介绍

Flutter 本质上是一套基于 Skia 渲染引擎的跨平台 UI 框架，而 Harmony6.0 提供了更加完善的系统能力与图形渲染支持。两者结合后，一个非常明显的优势是：开发者可以通过统一组件逻辑，同时兼顾 Android、HarmonyOS 以及部分桌面端设备。

在企业类应用中，Flutter 最大的优势并不是“炫酷动画”，而是：

• UI 组件化能力强；
• 页面状态组织清晰；
• 热重载开发效率高；
• 对复杂 Dashboard 页面支持较好；
• Grid、Card、List 等布局生态成熟。

本次页面实际上采用的是典型的“信息看板式结构”。

页面分为两个核心区域：

1. KPI 数据概览区域；
2. 库存预警提示区域。

其中 KPI 模块采用 GridView.count 构建双列数据卡片布局，而库存提醒模块则采用高亮状态容器突出风险信息。

整个页面的设计重点并不在复杂业务逻辑，而在于：

• 如何降低组件耦合；
• 如何提高视觉统一性；
• 如何让页面在 Harmony6.0 上保持流畅。

---

开发核心代码

首先来看 KPI 数据区域的实现：

Widget _buildKpiGrid(ThemeData theme) {
  return GridView.count(
    crossAxisCount: 2,
    shrinkWrap: true,
    physics: const NeverScrollableScrollPhysics(),
    mainAxisSpacing: 12,
    crossAxisSpacing: 12,
    childAspectRatio: 1.85,
    children: [
      _buildKpi(theme, '采购入库', '32 单', Icons.inventory_2_outlined, _blue),
      _buildKpi(theme, '库存商品', '1,286 SKU', Icons.widgets_outlined, _green),
      _buildKpi(theme, '临期预警', '18 件', Icons.event_busy_outlined, _orange),
      _buildKpi(theme, '缺货商品', '9 项', Icons.report_problem_outlined, _red),
    ],
  );
}

这一部分实际上是整个页面的信息核心区域。

这里并没有采用传统 Column + Row 的方式进行手工排版，而是使用 GridView.count 实现固定列数布局。这种方案在 Harmony6.0 设备中会更加稳定，因为 Grid 布局对于不同屏幕宽度具有更好的自适应能力。

其中几个参数非常关键：

• crossAxisCount: 2

  表示页面固定双列布局，这也是移动端数据面板中最常见的视觉方案。

• childAspectRatio: 1.85

  用于控制卡片宽高比例。如果比例过小，页面会显得拥挤；比例过大则会导致信息区域空洞。

• shrinkWrap: true

  用于解决 GridView 嵌套滚动时高度无限扩展的问题。

• NeverScrollableScrollPhysics

  禁止内部滚动，避免与外层页面滚动产生冲突。

这一类处理在 Harmony6.0 中尤其重要，因为嵌套滚动如果处理不好，很容易导致滑动冲突与掉帧问题。

接下来是单个 KPI 卡片的实现：

Widget _buildKpi(
  ThemeData theme,
  String title,
  String value,
  IconData icon,
  Color color,
) {
  return Container(
    padding: const EdgeInsets.all(16),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(22),
    ),
    child: Row(
      children: [
        Icon(icon, color: color, size: 30),
        const SizedBox(width: 12),
        Expanded(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                value,
                style: theme.textTheme.titleMedium?.copyWith(
                  color: color,
                  fontWeight: FontWeight.w900,
                ),
              ),
              Text(
                title,
                style: theme.textTheme.bodySmall?.copyWith(
                  color: theme.colorScheme.onSurfaceVariant,
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

这里真正重要的其实不是 UI 本身，而是“组件抽象”。

很多初学者在做 Dashboard 页面时，会直接复制多个卡片组件，导致：

• 后续维护困难；
• UI 风格难统一；
• 状态修改成本极高。

这里通过 _buildKpi() 实现了统一数据卡片模板。

不同的数据：

• 图标；
• 数值；
• 标题；
• 颜色；

全部通过参数传入，从而实现真正意义上的业务复用。

整个卡片结构采用：

Container
 └── Row
      ├── Icon
      └── Column
           ├── Value
           └── Title

这种结构非常适合数据看板场景。

同时这里使用了：

borderRadius: BorderRadius.circular(22)

让页面整体更符合当前 HarmonyOS 的圆角视觉风格。

而：

fontWeight: FontWeight.w900

则强化了数据权重，让用户第一眼先关注数值，而不是文字描述。

接下来是库存预警模块：

Widget _buildStockWarning(ThemeData theme) {
  return Container(
    padding: const EdgeInsets.all(16),
    decoration: BoxDecoration(
      color: _orange.withValues(alpha: 0.12),
      borderRadius: BorderRadius.circular(22),
    ),
    child: Row(
      children: [
        const Icon(Icons.notifications_active_outlined, color: _orange),
        const SizedBox(width: 12),
        Expanded(
          child: Text(
            '低库存提醒：农夫山泉 550ml、鸡蛋、香蕉需要补货。',
            style: theme.textTheme.bodyMedium?.copyWith(
              color: _ink,
              fontWeight: FontWeight.w800,
            ),
          ),
        ),
      ],
    ),
  );
}

这个模块的设计重点是“风险强调”。

相比 KPI 卡片的纯白背景，这里采用了：

_orange.withValues(alpha: 0.12)

实现浅橙色风险提示背景。

这种做法相比纯红色警告更加柔和，不会破坏整体页面视觉平衡，同时又能让用户快速感知库存风险。

此外，预警信息采用：

Expanded(
  child: Text(...)
)

避免长文本溢出。

在 Harmony6.0 大屏设备中，这种布局会自动适配剩余空间，因此整体兼容性更高。

---

心得

这次页面开发最大的感受其实是：Harmony6.0 上的 Flutter 页面，已经逐渐进入“工程化 UI”阶段，而不再只是简单 Demo。

很多开发者会把注意力集中在：

• 动画；
• 特效；
• 复杂交互；

但真正企业项目里更重要的是：

• 组件结构是否稳定；
• 页面是否容易扩展；
• 代码是否便于维护；
• 多模块之间是否统一。

尤其在 Dashboard 场景中，一个好的页面不是“组件越多越高级”，而是：

• 信息层级清晰；
• 数据重点突出；
• 风险状态明确；
• 页面滚动流畅。

另外，Flutter 在 Harmony6.0 上的开发体验其实已经非常接近成熟商业项目开发。特别是在：

• Material3 风格；
• Grid 布局；
• 卡片式设计；
• 动态主题；

这些方面，整体开发效率非常高。

---

总结

这次基于 Harmony6.0 的 Flutter 库存管理页面实践，本质上是在探索一种更加现代化的企业移动端 UI 组织方式。相比传统后台系统的复杂表格结构，卡片化 Dashboard 更适合移动设备的数据浏览场景，也更符合当前 HarmonyOS 的视觉设计趋势。整个页面虽然代码量不算庞大，但通过 GridView、组件抽象、状态高亮以及主题化设计，已经能够构建出具备较强业务感知能力的库存管理界面。对于 Flutter × Harmony6.0 的组合而言，未来真正有价值的方向并不仅仅是“跨端”，而是如何在统一技术栈下，同时实现高性能渲染、工程化组件管理以及更贴近实际业务场景的移动应用体验。