基于 HarmonyOS 6.0 的跨端页面构建实战：停车管理系统开发解析

前言

随着智能设备和物联网的快速发展，用户对应用体验的要求也在不断提升，尤其是在车务管理、停车导航等场景中，用户希望能够通过统一的应用界面实现多设备、多终端的无缝操作。鸿蒙系统（HarmonyOS）作为面向全场景、跨终端的操作系统，为开发者提供了跨端开发的能力，让同一套代码可以在手机、平板、智能屏甚至车载设备上运行。这种跨端开发模式不仅降低了开发成本，也极大提升了用户体验的一致性和流畅性。
在这里插入图片描述
本文将围绕 HarmonyOS 6.0 的跨端开发特性，结合一个停车管理应用的页面构建案例，详细解析如何通过 HarmonyOS 的 UI 构建与组件体系，实现一个包含车位占用率、停车月卡、费用记录、附近停车场及车务提醒等功能的高质量页面。在此过程中，我会结合代码分段讲解每个模块的核心设计思路、布局实现与交互细节，并分享我的开发心得，帮助读者快速掌握 HarmonyOS 页面开发的实用技巧。

背景

停车管理系统在现代城市中扮演着重要角色，尤其是在商业中心、写字楼、医院等人流密集区域。传统的停车管理往往依赖线下指示牌、人工巡检以及简单的移动端应用，而用户在使用这些服务时往往面临信息滞后、交互复杂以及界面单一的问题。如何在应用中实时展示车位占用、支持月卡管理、记录缴费信息，并提供友好的交互体验，是停车管理应用设计的核心挑战。

在这一背景下，鸿蒙系统的跨端开发能力显得尤为关键。开发者可以通过 HarmonyOS 6.0 的 ArkUI 框架，使用一套代码构建响应式界面，同时适配不同屏幕尺寸与设备类型。尤其在车务应用场景中，数据实时性、视觉层次感以及用户操作的便捷性，是用户体验的核心指标。

本文案例中的应用主要实现了以下功能模块：

  1. 车位占用率展示：通过柱状条和文字比例展示不同车场区域的实时占用情况。
  2. 停车月卡信息管理：提供月卡有效期、节省金额、绑定车辆数量和可用车场信息。
  3. 费用记录与缴费信息：展示最近的缴费记录及状态，支持不同费用类型的标识。
  4. 附近停车场推荐：按距离、剩余车位和收费标准展示周边可用停车场信息。
  5. 车务提示与提醒：为用户提供注意事项和提示信息，确保数据仅供参考。

HarmonyOS 6.0 跨端开发介绍

HarmonyOS 6.0 作为鸿蒙系统的最新版本，在跨端开发上提供了诸多便捷特性。开发者可以通过 ArkUI（支持 Java/Kotlin、JS 及 DSL 方式）进行界面开发，并利用 FA、Composable Widgets、Positioned 与 Container 等组件，实现响应式、可扩展的 UI 布局。其核心优势包括：

  1. 跨终端统一组件体系：无论是在手机、平板还是大屏设备上，开发者可以使用相同的 Widget 体系实现界面布局。
  2. 声明式 UI 构建：通过类似 Flutter 的声明式方式，使用函数构建组件，界面逻辑清晰，便于维护。
  3. 高性能渲染：HarmonyOS 通过 ArkUI 的高效渲染管线，实现复杂界面下的平滑滚动和动画效果。
  4. 状态管理与响应式编程：支持数据绑定和状态刷新，当车位占用率或缴费信息发生变化时，界面可以自动更新，无需手动刷新。
  5. 可扩展性与可组合性：支持通过函数组合或嵌套 Widget，实现复杂布局的拆分和复用，例如月卡信息、费用记录列表、附近停车场卡片等均可独立构建并组合使用。
    在这里插入图片描述

开发核心代码解析

在我们的停车管理应用中，核心界面构建主要围绕 车位占用率、月卡信息、费用记录、附近停车场及车务提示 五个模块展开。以下将结合代码进行模块解析，展示如何通过 Harmony6.0 的 Widget 构建复杂界面。

1. 车位占用率模块

车位占用率模块通过 _buildGarageOccupancy 函数实现。模块核心思想是将不同停车区域的信息（名称、占用比例、颜色）封装成列表，通过循环生成每一条占用记录，并使用 LinearProgressIndicator 展示占用比例。

Widget _buildGarageOccupancy(ThemeData theme) {
  final lots = [
    ('P1 地面', 0.88, _red),
    ('P2 地下', 0.64, _amber),
    ('P3 充电', 0.42, _green),
    ('访客区', 0.56, _blue),
  ];

  return Container(
    padding: const EdgeInsets.all(18),
    decoration: BoxDecoration(
      color: _panel,
      border: Border.all(color: _line),
      borderRadius: BorderRadius.circular(22),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildTitle(theme, '车位占用率', '实时示意'),
        const SizedBox(height: 16),
        ...lots.map(
          (lot) => Padding(
            padding: const EdgeInsets.only(bottom: 14),
            child: _buildLotLine(theme, lot.$1, lot.$2, lot.$3),
          ),
        ),
      ],
    ),
  );
}

其中 _buildLotLine 函数是每条车位占用记录的细节构建器，通过 Row 显示文字和占用百分比，并用圆角 LinearProgressIndicator 实现可视化效果，强化视觉层次感。
在这里插入图片描述

2. 停车月卡模块

停车月卡模块通过 _buildMonthlyPass 构建，核心是通过 Row 和 Column 嵌套，将月卡有效期、本月节省、绑定车辆和可用车场信息以卡片形式展示。每个信息项通过 _buildPassBox 封装，便于复用和样式统一。

Widget _buildMonthlyPass(ThemeData theme) {
  return Container(
    padding: const EdgeInsets.all(18),
    decoration: BoxDecoration(
      color: _teal.withValues(alpha: 0.11),
      border: Border.all(color: _teal.withValues(alpha: 0.26)),
      borderRadius: BorderRadius.circular(22),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            const Icon(Icons.card_membership_outlined,
                color: _teal, 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: _buildPassBox(theme, '有效期', '7 天')),
            const SizedBox(width: 10),
            Expanded(child: _buildPassBox(theme, '本月节省', '¥126')),
          ],
        ),
        const SizedBox(height: 10),
        Row(
          children: [
            Expanded(child: _buildPassBox(theme, '绑定车辆', '1 辆')),
            const SizedBox(width: 10),
            Expanded(child: _buildPassBox(theme, '可用车场', '4 个')),
          ],
        ),
      ],
    ),
  );
}

通过 Expanded 组件，卡片在水平方向上均分空间，实现自适应布局，兼容不同屏幕宽度。同时使用带透明度的背景和边框，增加层次感和质感。
在这里插入图片描述

3. 费用记录模块

费用记录模块 _buildPaymentTimeline 展示了近三笔缴费记录，每条记录通过 _buildPayment 构建。模块设计思路是将每条记录的时间、描述和金额信息分离，并用不同颜色标识状态或类型。通过 Divider 分割，实现视觉清晰的列表结构。

Widget _buildPaymentTimeline(ThemeData theme) {
  return Container(
    padding: const

EdgeInsets.all(18),
decoration: BoxDecoration(
color: _panel,
border: Border.all(color: _line),
borderRadius: BorderRadius.circular(22),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildTitle(theme, ‘费用记录’, ‘近 3 笔’),
const SizedBox(height: 14),
_buildPayment(theme, ‘今天 08:42’, ‘西门地下 P2 入场’, ‘计费中’, _amber),
const Divider(height: 24, color: _line),
_buildPayment(theme, ‘昨天 19:18’, ‘东门访客区停车 2h’, ‘¥8.0’, _green),
const Divider(height: 24, color: _line),
_buildPayment(theme, ‘5月15日 12:30’, ‘充电停车联动优惠’, ‘-¥6.0’, _blue),
],
),
);
}


每条记录左侧图标与右侧金额通过 `Row` 分开排列，增强信息对比度，同时通过圆角背景提升视觉层次。结合 `LinearProgressIndicator`、颜色标识和字体加粗等手段，使信息传递直观且易读。

### 4. 附近停车场模块

`_buildNearbyLots` 模块展示附近停车场信息，通过水平滚动的卡片列表展示，卡片内包含停车场名称、距离及剩余车位、价格信息。利用 `ListView.separated` 实现水平滚动和间距控制，并用统一风格的圆角卡片包裹内容，实现视觉一致性。

```dart
Widget _buildNearbyLots(ThemeData theme) {
  final lots = [
    ('西门地下库', '126m · 余 82 位', '¥4/小时', _teal),
    ('综合楼地面', '390m · 余 16 位', '¥3/小时', _amber),
    ('访客临停区', '620m · 余 28 位', '前 30 分钟免费', _blue),
  ];

  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      _buildTitle(theme, '附近停车场', '3 个'),
      const SizedBox(height: 12),
      SizedBox(
        height: 160,
        child: ListView.separated(
          scrollDirection: Axis.horizontal,
          itemBuilder: (context, index) {
            final lot = lots[index];
            return Container(
              width: 170,
              padding: const EdgeInsets.all(15),
              decoration: BoxDecoration(
                color: _panel,
                border: Border.all(color: _line),
                borderRadius: BorderRadius.circular(20),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Icon(Icons.local_parking, color: lot.$4, size: 30),
                  const Spacer(),
                  Text(
                    lot.$1,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: theme.textTheme.titleSmall?.copyWith(
                      color: _ink,
                      fontWeight: FontWeight.w900,
                    ),
                  ),
                  const SizedBox(height: 5),
                  Text(
                    lot.$2,
                    style: theme.textTheme.bodySmall?.copyWith(
                      color: theme.colorScheme.onSurfaceVariant,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                  const SizedBox(height: 6),
                  Text(
                    lot.$3,
                    style: TextStyle(color: lot.$4, fontWeight: FontWeight.w900),
                  ),
                ],
              ),
            );
          },
          separatorBuilder: (_, __) => const SizedBox(width: 10),
          itemCount: lots.length,
        ),
      ),
    ],
  );
}

模块核心在于通过 卡片组合 + 列表滚动 实现信息密集但界面整洁的展示方式，这种设计在移动端尤其适用。
在这里插入图片描述

5. 车务提醒模块

车务提醒模块 _buildReminderCard 通过红色底色提示用户注意事项，结合 Row 布局将图标与文字分开，文字部分使用高行高和加粗字体，确保重要信息易读。模块设计简洁但信息明确，兼具视觉提示效果。

Widget _buildReminderCard(ThemeData theme) {
  return Container(
    padding: const EdgeInsets.all(18),
    decoration: BoxDecoration(
      color: _red.withValues(alpha: 0.10),
      border: Border.all(color: _red.withValues(alpha: 0.24)),
      borderRadius: BorderRadius.circular(20),
    ),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Icon(Icons.shield_outlined, color: _red, size: 30),
        const SizedBox(width: 12),
        Expanded(
          child: Text(
            '车务提示：违章、计费和车位数据为页面示意。真实办理请以交管平台、停车场公示和现场设备信息为准。',
            style: theme.textTheme.bodyMedium?.copyWith(
              color: _ink,
              height: 1.48,
              fontWeight: FontWeight.w800,
            ),
          ),
        ),
      ],
    ),
  );
}

这种提示模块在停车类应用中非常必要，它不仅告知用户信息可能仅供参考，还提升了界面的可信度与专业感。

心得

在开发过程中，我深刻体会到 HarmonyOS 跨端开发的优势所在。首先，声明式 UI 与 Widget 体系让复杂页面的构建变得直观，通过组合不同 Widget，我们可以实现灵活布局、动态数据绑定以及复用性强的组件体系。例如，_buildPassBox、_buildLotLine 等小模块可以在不同页面复用，无需重复编写布局和样式逻辑。其次，跨端适配能力使得应用在手机、平板或车载屏幕上表现一致，通过灵活使用 Expanded、SizedBox、Container 等布局组件，确保界面自适应不同屏幕尺寸。再次，颜色和样式管理在提升用户体验中起到关键作用，通过透明度、边框、圆角和字体加粗的组合，使界面既具有层次感，又保持信息的可读性和易操作性。

开发过程中我还注意到，HarmonyOS 的 响应式更新机制对实时数据展示至关重要。在车位占用率或费用记录需要实时更新的场景中，通过数据绑定和状态管理，可以实现界面自动刷新，无需手动控制刷新逻辑，从而减少了开发复杂度，提高了代码可维护性。
在这里插入图片描述

总结

通过 HarmonyOS 6.0 的跨端开发能力，我们可以在单一代码基础上构建高性能、多终端适配的停车管理应用页面。本文通过详细解析车位占用率、月卡管理、费用记录、附近停车场及车务提醒等模块，展示了如何利用 Widget 组合、布局嵌套和样式管理实现复杂界面。结合透明度、边框、圆角、进度条和水平滚动卡片等视觉设计手段，最终呈现出信息清晰、视觉层次丰富且操作便捷的用户界面。对于开发者而言，HarmonyOS 的声明式 UI 与跨端特性不仅降低了开发成本，还提供了极大的灵活性和可维护性，为全场景应用开发提供了可靠方案。

# harmonyos # 华为
Logo
EazyDevelop社区

一站式 AI 云服务平台

更多推荐

cover

基于 HarmonyOS 6.0 的页面构建实践：违章记录与停车场可视化

avatar EazyDevelop社区
cover

基于 HarmonyOS 6.0 的应用开发实践——鸿蒙页面构建解析

avatar EazyDevelop社区
cover

鸿蒙页面构建实战：基于 HarmonyOS 6.0 的跨端开发与界面实现

avatar EazyDevelop社区