鸿蒙 HarmonyOS 6.0 页面代码构建实战解析

前言

随着移动互联网和物联网的发展，应用的跨端能力已经成为软件开发的重要趋势。华为的 HarmonyOS 作为一个真正意义上的跨设备操作系统，从手机到平板、从智能手表到车机，提供了统一的应用开发能力。HarmonyOS 6.0 在此前版本基础上进一步优化了多端适配和 UI 构建能力，使得开发者可以通过一套代码，实现多设备、多屏幕的统一体验。在这里插入图片描述
本文将以一个典型的“习惯打卡 + 健康教练”页面为例，详细解析 HarmonyOS 6.0 页面构建过程，帮助开发者理解其核心原理与开发思路。

背景

在日常生活中，用户健康管理类应用越来越受到关注。例如，通过每日打卡记录运动、饮食和作息习惯，不仅能提供个性化建议，还能增强用户粘性。在移动端实现这一功能时，通常涉及多种 UI 元素：打卡日历、习惯清单、今日建议等模块。传统开发模式需要针对不同设备单独实现界面，而 HarmonyOS 6.0 提供的跨端组件和自适应布局机制，使得同一套代码即可在手机、平板甚至大屏智能设备上流畅运行，从而大幅降低开发成本并提升用户体验。

本文展示的页面功能主要包括三个模块：

  1. 连续打卡日历（Week Strip）：以周为单位展示用户打卡情况，用不同颜色和图标区分已打卡和未打卡状态。
  2. 习惯清单（Habit Checklist）：列出用户每日习惯事项，并显示完成状态和进度。
  3. 教练卡片（Coach Card）：提供每日健康建议，结合图标与文字呈现清晰的指导信息。

通过对这些模块的拆解与分析，可以帮助开发者快速掌握 HarmonyOS 6.0 页面构建的核心方法。

HarmonyOS 6.0 跨端开发介绍

HarmonyOS 6.0 跨端开发的核心理念是“一套逻辑，多端适配”，即通过 Ability + FA（Feature Ability） 架构，将 UI 构建与业务逻辑解耦，并结合 ArkUI 框架 和 JS/TS 逻辑绑定 实现灵活布局。在页面构建中，常用的 Widget 体系包括 Container、Row、Column、Expanded、Icon、Text 等，这些 Widget 提供了类似 Flutter 的声明式布局方式，同时通过 主题（Theme） 和 自定义样式（Color、BorderRadius、Padding） 实现统一的视觉风格。

跨端开发的优势主要体现在以下几点：

  1. 组件复用性强：同一个 Widget 可以在不同屏幕尺寸下自适应布局。
  2. 状态管理统一：通过 State/Provider 等机制维护组件状态，实现界面实时更新。
  3. 高性能渲染：ArkUI 渲染引擎经过深度优化，实现复杂页面的平滑滚动和动画。

在本案例中，我们通过三个核心模块展示 HarmonyOS 6.0 的页面构建能力，同时结合主题管理和状态控制，实现动态更新和可视化反馈。
在这里插入图片描述

开发核心代码解析

1. 连续打卡模块（Week Strip）

这一模块展示了用户一周内的打卡情况，通过 Row + Column 组合实现横向天数排列和垂直图标排列。

Widget _buildWeekStrip(ThemeData theme) {
    final days = [
      ('一', true),
      ('二', true),
      ('三', false),
      ('四', true),
      ('五', true),
      ('六', false),
      ('日', false),
    ];

    return Container(
      padding: const EdgeInsets.all(18),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(30),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildTitle(theme, '连续打卡', '第 12 天'),
          const SizedBox(height: 16),
          Row(
            children: days.map((day) {
              final checked = day.$2;
              return Expanded(
                child: Column(
                  children: [
                    Container(
                      width: 36,
                      height: 36,
                      decoration: BoxDecoration(
                        color: checked ? _mint : _mint.withValues(alpha: 0.12),
                        shape: BoxShape.circle,
                      ),
                      child: Icon(
                        checked ? Icons.check : Icons.more_horiz,
                        color: checked ? Colors.white : _mint,
                        size: 18,
                      ),
                    ),
                    const SizedBox(height: 8),
                    Text(
                      day.$1,
                      style: theme.textTheme.bodySmall?.copyWith(
                        color: _ink,
                        fontWeight: FontWeight.w800,
                      ),
                    ),
                  ],
                ),
              );
            }).toList(),
          ),
        ],
      ),
    );
}

解析：

  • Container 用于包裹整个模块，设置圆角和内边距以提升视觉舒适度。
  • Column 和 Row 结合实现二维布局，将星期显示在水平轴，图标与文字在垂直轴。
  • Expanded 保证每一天占据等分宽度，实现响应式布局。
  • BoxDecoration 与 Icon 配合，根据打卡状态动态显示颜色和图标，提供清晰的视觉反馈。

2. 习惯清单模块（Habit Checklist）

这一模块展示用户每日习惯完成情况，结合 Row、Icon 和 Text 实现可视化的进度与状态提示。

Widget _buildHabitChecklist(ThemeData theme) {
    return Container(
      padding: const EdgeInsets.all(18),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(30),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildTitle(theme, '习惯清单', '4 / 6'),
          const SizedBox(height: 14),
          _buildHabit(theme, '早餐不空腹', true, _mint),
          const Divider(height: 24),
          _buildHabit(theme, '午后步行 15 分钟', true, _teal),
          const Divider(height: 24),
          _buildHabit(theme, '晚餐少油少盐', false, _orange),
          const Divider(height: 24),
          _buildHabit(theme, '睡前拉伸', false, _rose),
        ],
      ),
    );
}

Widget _buildHabit(ThemeData theme, String text, bool done, Color color) {
    return Row(
      children: [
        Icon(
          done ? Icons.check_circle : Icons.radio_button_unchecked,
          color: color,
        ),
        const SizedBox(width: 12),
        Expanded(
          child: Text(
            text,
            style: theme.textTheme.bodyLarge?.copyWith(
              color: _ink,
              fontWeight: FontWeight.w900,
            ),
          ),
        ),
        Text(
          done ? '完成' : '待打卡',
          style: TextStyle(color: color, fontWeight: FontWeight.w900),
        ),
      ],
    );
}

解析：

  • _buildHabitChecklist 作为模块容器，设置圆角和白底风格，保证模块在页面中清晰独立。
  • _buildHabit 内部通过 Row 实现图标、文本、状态标签的水平排列。
  • Expanded 让文本占据剩余空间，保证状态标签在右端对齐。
  • Divider 用于分隔每一条习惯，增加信息层次感。
    在这里插入图片描述

3. 健康教练模块（Coach Card）

教练卡片用于展示每日建议，通过背景色区分模块类型，并结合 Icon 提升信息传递效率。

Widget _buildCoachCard(ThemeData theme) {
    return Container(
      padding: const EdgeInsets.all(18),
      decoration: BoxDecoration(
        color: _teal,
        borderRadius: BorderRadius.circular(30),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: 48,
            height: 48,
            decoration: BoxDecoration(
              color: Colors.white.withValues(alpha: 0.16),
              borderRadius: BorderRadius.circular(18),
            ),
            child: const Icon(Icons.monitor_heart_outlined,
                color: Colors.white, size: 26),
          ),
          const SizedBox(width: 14),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '今日建议',
                  style: theme.text

Theme.titleMedium?.copyWith(
color: Colors.white,
fontWeight: FontWeight.w900,
),
),
const SizedBox(height: 8),
Text(
‘晚间安排 20 分钟低强度有氧即可，不需要再叠加强度训练。睡前减少咖啡因摄入。’,
style: TextStyle(
color: Colors.white.withValues(alpha: 0.78),
height: 1.48,
fontWeight: FontWeight.w700,
),
),
],
),
),
],
),
);
}


**解析**：  
- 使用 `Container` 设置背景色为主色 `_teal`，与白色图标形成对比。  
- `Row` 布局让图标与文本并列，`Expanded` 保证文本占据剩余宽度。  
- 内部文本通过 `TextStyle` 调整颜色透明度和行间距，提升可读性和视觉层次。  

### 4. 通用标题组件  

在多个模块中，标题栏都是一致的布局形式，通过 `_buildTitle` 和 `_buildDarkTitle` 封装，避免重复代码。  

```dart
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: _teal, fontWeight: FontWeight.w900),
        ),
      ],
    );
}

解析：

  • 通过 Row + Expanded 保证标题占据左侧剩余空间，操作文案右对齐。
  • 主题化样式与自定义颜色结合，保证与模块背景协调统一。
    在这里插入图片描述

心得

通过本次 HarmonyOS 6.0 页面构建实践，我深刻体会到跨端开发的便利性和设计灵活性。首先，Widget 的声明式布局方式让页面结构直观、易于维护；其次，主题管理和颜色体系的统一，让多模块页面在视觉上保持一致，同时方便后期修改；再次，Container + Row/Column + Expanded 的组合，使得复杂布局可以简单组合，实现响应式适配；最后，状态管理与 UI 渲染的分离，降低了模块间耦合度，提高了开发效率。

在开发过程中，我特别感受到 ArkUI 渲染引擎的高性能优势，即使在多模块复杂布局中，页面滚动和状态切换依然流畅无卡顿，这对于提升用户体验非常关键。此外，跨端适配机制让代码能够在手机、平板甚至车机上直接运行，极大地节省了多端开发成本。
在这里插入图片描述

总结

HarmonyOS 6.0 为开发者提供了强大且高效的跨端开发能力，通过灵活的 Widget 构建和统一的主题管理，可以快速实现复杂的多模块页面。在本文示例中，我们构建了“连续打卡 + 习惯清单 + 健康教练”三个模块的完整页面，并解析了关键组件和布局思路。通过实践可见，掌握 HarmonyOS 6.0 的布局和组件体系，不仅可以提升开发效率，还能确保多端用户获得一致、流畅的操作体验。未来，随着 HarmonyOS 生态不断完善，跨端应用开发将成为主流，而深入理解其页面构建方法，将帮助开发者在智能设备生态中抢占先机。

# harmonyos # 华为
Logo
EazyDevelop社区

一站式 AI 云服务平台

更多推荐

cover

告别命令行！OpenClaw Windows一键部署包，小白也能养出专属AI助手

avatar EazyDevelop社区
cover

用CodeBuddy零代码部署OpenClaw

avatar EazyDevelop社区
cover

鸿蒙页面构建实战：HarmonyOS 6.0 跨端应用开发解析

avatar EazyDevelop社区