基于 HarmonyOS 6.0 的页面构建实战：打造高质感服务类应用 UI

前言

随着 HarmonyOS 生态逐渐成熟，HarmonyOS 6.0 在分布式能力、跨端 UI 构建以及 ArkUI 声明式开发方面再次进行了强化。相比传统 Android 原生开发，HarmonyOS 更强调“一次开发、多端部署”，尤其是在移动端、平板、智慧屏以及 IoT 设备协同场景中，开发效率和界面一致性得到了明显提升。对于很多前端开发者而言，HarmonyOS 6.0 不仅仅是一个新系统，更像是一套全新的跨端 UI 工程体系。

本文将结合一个“家政服务类应用页面”的真实 UI 模块开发案例，深入解析 HarmonyOS 6.0 中页面布局构建、组件封装、网格布局、卡片化设计以及主题风格统一等核心技术。文章不仅会展示完整页面模块的设计思想，还会针对代码进行模块化解析，帮助开发者理解 HarmonyOS 页面开发中的工程化思路。

---

背景

如今大量本地生活类应用开始向“轻量化 + 高颜值 + 强交互”方向发展，例如家政、洗衣、维修、保洁等服务型 App，都在追求更加现代化的页面设计。传统页面通常存在以下几个问题：

• UI 风格不统一
• 页面层级混乱
• 组件复用率低
• 大量重复代码
• 适配平板与折叠屏困难

HarmonyOS 6.0 提供的 ArkUI 声明式开发模式，非常适合构建这种卡片化、多模块、响应式布局的页面。开发者可以通过组件化方式快速搭建业务模块，并且利用状态管理与响应式布局实现真正意义上的跨端开发。

本文实现的是一个典型服务预约页面中的几个核心模块，包括：

• 服务流程展示
• 费用预估模块
• 服务说明区域
• 通用标题组件
• 深色主题标题组件

整个页面采用现代化卡片式布局，强调视觉层级与信息聚合，非常适合 HarmonyOS 中的服务类 App 开发。

---

HarmonyOS 6.0 跨端开发介绍

在 HarmonyOS 6.0 中，官方重点强化了 ArkUI 与 ArkTS 的协同能力。相比传统 XML 布局方式，ArkUI 使用声明式 UI 描述页面，代码结构更加清晰，同时具备以下几个明显优势。

首先是跨设备布局能力。HarmonyOS 的布局系统并不是简单的屏幕缩放，而是基于响应式设计理念。开发者可以针对不同屏幕尺寸动态调整组件排列方式，例如：

• 手机端使用纵向布局
• 平板端使用双栏布局
• 智慧屏端使用瀑布流布局

其次是组件化能力。HarmonyOS 鼓励开发者将 UI 抽象为独立组件，每个组件拥有自己的状态、生命周期与样式逻辑，这种模式与 Flutter 非常相似，因此很多 Flutter 开发者迁移 HarmonyOS 的成本非常低。

再者是主题统一能力。HarmonyOS 6.0 提供了完整的 Theme 管理机制，可以统一控制：

• 字体
• 圆角
• 阴影
• 配色
• 动效

这对于现代化 UI 系统尤为重要。

最后是性能优化。HarmonyOS 在渲染层面采用了高性能图形管线，在复杂卡片布局、大量列表渲染以及动画切换时，依然能够保持流畅体验。

---

页面设计思路

在正式进入代码之前，我们先分析一下整个页面的设计逻辑。

本案例中的页面采用典型“信息卡片化”设计。

整个页面由多个独立模块组成：

模块	功能
服务流程	展示预约步骤
费用预估	展示价格组成
服务提示	展示免责声明
标题组件	提升复用性

页面整体使用：

• 大圆角
• 高留白
• 柔和渐变色
• 卡片嵌套
• 深浅主题对比

这样的 UI 风格非常符合 HarmonyOS 当前倡导的沉浸式设计理念。

---

开发核心代码

服务流程模块构建

服务流程模块是整个页面中最核心的区域之一。

该模块使用 GridView 构建双列流程卡片，每个卡片展示：

• 图标
• 标题
• 描述
• 主题色

核心代码如下：

Widget _buildProcessBoard(ThemeData theme) {
  final steps = [
    (Icons.edit_calendar_outlined, '选择服务', '填写面积与备注', _blue),
    (Icons.assignment_ind_outlined, '匹配人员', '展示认证信息', _green),
    (Icons.cleaning_services_outlined, '上门服务', '拍照验收记录', _coral),
    (Icons.rate_review_outlined, '评价售后', '48小时保障', _purple),
  ];

  return Container(
    padding: const EdgeInsets.all(18),
    decoration: BoxDecoration(
      color: _coffee,
      borderRadius: BorderRadius.circular(24),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildDarkTitle(theme, '服务流程', '四步完成'),
        const SizedBox(height: 14),
        GridView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          itemCount: steps.length,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
            childAspectRatio: 1.58,
          ),
          itemBuilder: (context, index) {
            final step = steps[index];
            return Container(
              padding: const EdgeInsets.all(13),
              decoration: BoxDecoration(
                color: Colors.white.withValues(alpha: 0.10),
                borderRadius: BorderRadius.circular(18),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Icon(step.$1, color: step.$4, size: 25),
                  const Spacer(),
                  Text(
                    step.$2,
                    style: const TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.w900,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    step.$3,
                    style: TextStyle(
                      color: Colors.white.withValues(alpha: 0.66),
                      fontSize: 12,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ],
    ),
  );
}

这个模块最值得关注的地方并不是 GridView 本身，而是整体组件化思想。

首先，通过 steps 数组统一管理流程数据，实现了页面与数据的解耦。后续如果新增流程步骤，只需要修改数据源即可，不需要改动 UI 逻辑。

其次，GridView.builder 采用动态生成方式，相比手动编写多个 Container，可维护性明显更强。

这里：

crossAxisCount: 2

表示每行两个卡片。

而：

childAspectRatio: 1.58

则用于控制卡片宽高比。

很多 HarmonyOS 页面之所以“高级感不足”，原因就在于比例失衡。合理的宽高比能够显著提升视觉舒适度。

另外这里还使用：

NeverScrollableScrollPhysics()

禁止内部滚动，避免嵌套滚动冲突。

---

费用预估模块实现

费用模块是典型的信息聚合卡片。

代码如下：

Widget _buildPriceSummary(ThemeData theme) {
  return Container(
    padding: const EdgeInsets.all(18),
    decoration: BoxDecoration(
      color: _amber.withValues(alpha: 0.18),
      border: Border.all(color: _amber.withValues(alpha: 0.34)),
      borderRadius: BorderRadius.circular(24),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            const Icon(Icons.payments_outlined, color: _amber, size: 28),
            const SizedBox(width: 10),
            Text(
              '费用预估',
              style: theme.textTheme.titleMedium?.copyWith(
                color: _ink,
                fontWeight: FontWeight.w900,
              ),
            ),
          ],
        ),
        const SizedBox(height: 14),
        Row(
          children: [
            Expanded(child: _buildPriceBox(theme, '基础服务', '¥159')),
            const SizedBox(width: 10),
            Expanded(child: _buildPriceBox(theme, '优惠券', '-¥20')),
          ],
        ),
        const SizedBox(height: 10),
        Row(
          children: [
            Expanded(child: _buildPriceBox(theme, '耗材费', '¥12')),
            const SizedBox(width: 10),
            Expanded(child: _buildPriceBox(theme, '预估合计', '¥151')),
          ],
        ),
      ],
    ),
  );
}

整个费用模块采用“双层卡片嵌套结构”。

外层负责：

• 背景色
• 圆角
• 边框
• 间距

内层负责：

• 价格展示
• 标签说明
• 信息排列

这里最重要的是 Expanded 的使用。

Expanded(child: _buildPriceBox(...))

它能够让两个价格卡片自动均分宽度，在 HarmonyOS 多端适配时非常关键。

如果不使用弹性布局，在平板设备中极容易出现：

• 布局错位
• 空白过大
• 内容不均匀的问题。
  

---

价格卡片组件封装

接下来是价格卡片。

Widget _buildPriceBox(ThemeData theme, String label, String value) {
  return Container(
    padding: const EdgeInsets.all(13),
    decoration: BoxDecoration(
      color: Colors.white.withValues(alpha: 0.76),
      borderRadius: BorderRadius.circular(16),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          value,
          style: theme.textTheme.titleMedium?.copyWith(
            color: _ink,
            fontWeight: FontWeight.w900,
          ),
        ),
        const SizedBox(height: 4),
        Text(
          label,
          style: theme.textTheme.bodySmall?.copyWith(
            color: theme.colorScheme.onSurfaceVariant,
            fontWeight: FontWeight.w700,
          ),
        ),
      ],
    ),
  );
}

这个组件虽然简单，但体现了非常重要的“设计系统思想”。

很多初学者喜欢把所有 TextStyle 写死：

fontSize: 18
color: Colors.black

这种写法在大型项目中几乎不可维护。

这里：

theme.textTheme.titleMedium

实际上是在使用全局主题。

好处包括：

• 自动适配深色模式
• 保持字体统一
• 方便全局换肤
• 统一视觉规范

HarmonyOS 6.0 中，主题系统是非常重要的组成部分。真正成熟的 UI 开发，核心并不是“写页面”，而是“构建设计系统”。

---

服务提示模块

接下来是说明提示区域。

Widget _buildServiceNotice(ThemeData theme) {
  return Container(
    padding: const EdgeInsets.all(18),
    decoration: BoxDecoration(
      color: _green.withValues(alpha: 0.11),
      border: Border.all(color: _green.withValues(alpha: 0.26)),
      borderRadius: BorderRadius.circular(22),
    ),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Icon(Icons.verified_user_outlined, color: _green, size: 30),
        const SizedBox(width: 12),
        Expanded(
          child: Text(
            '服务提示：页面为静态 UI 示例。真实下单前应核对服务范围、上门时间、人员认证、售后规则和收费明细。',
            style: theme.textTheme.bodyMedium?.copyWith(
              color: _ink,
              height: 1.48,
              fontWeight: FontWeight.w800,
            ),
          ),
        ),
      ],
    ),
  );
}

这个区域的核心目标是增强页面可信度。

很多商业 App 中都会加入：

• 安全提示
• 风险说明
• 售后声明
• 服务保障

而在 UI 层面，这种区域通常会使用：

• 浅绿色
• 浅黄色
• 描边边框
• 图标强调

来增强用户心理安全感。

这里：

height: 1.48

用于控制行高。

这一点非常关键。

大量 HarmonyOS 页面之所以阅读体验差，就是因为文本行高过低导致压迫感严重。

---

通用标题组件设计

页面中还封装了两个标题组件：

Widget _buildTitle(...)

和：

Widget _buildDarkTitle(...)

代码如下：

Widget _buildTitle(ThemeData theme, String title, String action) {
  return Row(
    children: [
      Expanded(
        child: Text(
          title,
          style: theme.textTheme.titleMedium?.copyWith(
            color: _ink,
            fontWeight: FontWeight.w900,
          ),
        ),
      ),
      Text(
        action,
        style: const TextStyle(
          color: _coral,
          fontWeight: FontWeight.w900,
        ),
      ),
    ],
  );
}

这种组件封装在大型项目中极其重要。

因为：

• 标题样式统一
• 代码复用率高
• 后续维护方便
• UI 修改成本低

尤其 HarmonyOS 多页面应用中，如果没有组件化思想，后期 UI 调整会非常痛苦。

---

HarmonyOS 6.0 页面开发核心思想

通过整个案例，其实可以总结出 HarmonyOS 页面开发中的几个核心理念。

第一是“数据驱动 UI”。

页面不应该写死，而应该由数据动态生成。

第二是“组件化”。

所有 UI 都应该尽可能抽象为可复用组件。

第三是“主题系统”。

不要把颜色与字体硬编码到页面中。

第四是“卡片化布局”。

HarmonyOS 非常强调信息聚合与层级结构。

第五是“响应式适配”。

开发者必须从一开始就考虑：

• 手机
• 平板
• 折叠屏
• 智慧屏

不同设备的布局逻辑。

---

心得

在实际 HarmonyOS 6.0 开发过程中，我最大的感受是：HarmonyOS 正在逐渐形成属于自己的 UI 工程体系。

以前很多开发者只是把 HarmonyOS 当作“另一个 Android”，但实际上它的设计理念已经明显不同。

HarmonyOS 更强调：

• 分布式协同
• 多设备统一体验
• 声明式 UI
• 组件化架构
• 响应式布局

尤其在 ArkUI 的开发体验上，已经越来越接近 Flutter 与 React 的现代化开发模式。

另外我认为 HarmonyOS 最大的优势，并不仅仅是国产化，而是其未来在 IoT 场景中的扩展能力。传统移动应用的边界正在消失，未来应用可能同时运行在：

• 手机
• 手表
• 车机
• 平板
• 智慧屏
• 家居设备

而 HarmonyOS 的跨端能力，恰好是为这种未来形态而设计的。

---

总结

本文基于 HarmonyOS 6.0 的页面开发实践，完整分析了服务类应用中多个核心 UI 模块的实现思路，包括服务流程卡片、费用预估区域、服务说明模块以及标题组件封装等内容。通过这些案例可以看到，HarmonyOS 页面开发已经不再只是简单的布局拼接，而是逐渐向“组件化 + 响应式 + 设计系统化”方向发展。对于开发者而言，真正重要的并不是会写几个页面，而是能否建立一套可复用、可维护、可扩展的 UI 工程体系。随着 HarmonyOS 生态持续完善，未来在跨端开发、多设备协同以及高性能 UI 渲染领域，HarmonyOS 6.0 很可能会成为国产应用开发的重要技术方向。