基于 HarmonyOS 6.0 的智能家政预约页面实战开发：从页面构建到跨端体验优化

本文介绍了基于HarmonyOS 6.0开发智能家政预约页面的实战经验。文章重点讲解了HarmonyOS 6.0的跨端开发优势，包括声明式UI框架ArkUI、状态管理机制和组件化开发思想。通过家政预约页面的具体实现，展示了如何构建预约草稿模块、服务员推荐列表和套餐推荐模块等核心功能。开发过程中采用了数据驱动UI、组件复用、横向列表渲染等技术，体现了HarmonyOS"一次开发，多端部署"的理念。文

一键难忘

582人浏览 · 2026-05-19 22:51:19

一键难忘 · 2026-05-19 22:51:19 发布

基于 HarmonyOS 6.0 的智能家政预约页面实战开发：从页面构建到跨端体验优化

前言

随着 HarmonyOS 生态不断完善，HarmonyOS 6.0 已经不仅仅是一个移动端操作系统，而是逐渐演变为一个真正意义上的全场景分布式操作平台。对于开发者而言，HarmonyOS 6.0 最大的吸引力并不只是“国产化”，而是在于其统一生态、跨端协同以及声明式 UI 构建能力带来的开发效率提升。尤其是在 ArkUI 与 ArkTS 的持续演进之后，HarmonyOS 的页面开发已经越来越接近现代化前端工程体系。
在这里插入图片描述

本文将以一个“家政预约服务页面”为例，深入讲解 HarmonyOS 6.0 页面构建的核心思路，并结合实际代码完成从 Flutter 风格页面到 HarmonyOS ArkUI 页面逻辑的迁移与实现。文章不仅会介绍 HarmonyOS 6.0 的跨端能力，还会重点分析页面布局、组件封装、数据驱动 UI、横向列表渲染、卡片式布局以及复杂业务 UI 的拆分技巧，帮助开发者真正掌握 HarmonyOS 页面工程化开发方式。

背景

在传统移动端开发中，一个典型的问题就是“多端割裂”。Android、iOS、平板、智慧屏甚至车机往往需要分别适配，不仅开发成本高，而且 UI 风格难以统一。尤其是生活服务类 App，例如家政预约、上门维修、社区服务等，其页面往往拥有大量卡片式布局、复杂列表以及动态推荐模块，如果采用传统 Native 方式开发，组件复用率较低，维护成本会随着业务增长快速提升。

HarmonyOS 6.0 提供了声明式 UI 开发体系 ArkUI，通过组件化思想与状态驱动渲染机制，大幅降低了页面开发复杂度。同时，其“一次开发，多端部署”的理念，也让家政服务类场景天然适合 HarmonyOS 生态。

本文案例中的页面主要包含以下几个模块：

预约草稿信息展示
服务员横向推荐列表
套餐推荐模块
卡片式 UI 风格设计
多组件封装与复用
声明式布局实现

整个页面本质上是一个典型的“生活服务类信息聚合页面”，非常适合作为 HarmonyOS 6.0 UI 工程化实践案例。

HarmonyOS 6.0 跨端开发介绍

HarmonyOS 6.0 的核心理念之一，就是“统一开发范式”。开发者不再需要为不同设备分别编写 UI，而是通过 ArkUI 声明式开发框架，实现真正意义上的跨设备适配。

ArkUI 与传统 Android XML 最大的区别在于：

UI 即状态
组件即函数
页面由数据驱动
支持高度组件化
支持响应式更新

例如在传统 Android 中，一个列表更新通常需要：

Adapter
ViewHolder
RecyclerView
notifyDataSetChanged()

而在 HarmonyOS 中，仅需更新状态即可自动刷新 UI。

HarmonyOS 6.0 的页面开发主要依赖以下几个核心能力：

ArkTS：HarmonyOS 官方 TypeScript 扩展语言
ArkUI：声明式 UI 框架
State 状态管理
Builder 组件构建器
ForEach 列表渲染
自适应布局能力

相比传统移动开发，HarmonyOS 更接近 React 与 Flutter 的开发思想，因此对于现代前端开发者而言，上手成本并不高。

下面我们正式进入页面开发部分。

开发核心代码

本案例页面主要由三个核心区域组成：

预约草稿模块
服务员推荐模块
套餐推荐模块

整个页面采用卡片式布局风格，核心设计思想是：

模块解耦
UI 组件复用
数据驱动渲染
横向与纵向混合布局

首先定义页面数据结构。

interface Cleaner {
  name: string
  skill: string
  score: string
  color: string
}

interface PackageItem {
  title: string
  desc: string
  price: string
  color: string
}

这里采用接口统一描述数据结构，后续页面中的所有 UI 都通过数据驱动生成，而不是写死组件。这也是 HarmonyOS 声明式开发的核心思想之一。

接下来定义页面状态。

@State cleaners: Cleaner[] = [
  {
    name: '王阿姨',
    skill: '深洁 5 年',
    score: '4.9',
    color: '#FF7B72'
  },
  {
    name: '李师傅',
    skill: '家电清洗',
    score: '4.8',
    color: '#4A90E2'
  },
  {
    name: '小周',
    skill: '收纳整理',
    score: '5.0',
    color: '#9B59B6'
  }
]

@State packages: PackageItem[] = [
  {
    title: '搬家后开荒',
    desc: '4小时 · 厨卫玻璃重点',
    price: '¥328',
    color: '#FF7B72'
  },
  {
    title: '月度保洁卡',
    desc: '4次 · 每次2小时',
    price: '¥699',
    color: '#2ECC71'
  }
]

这里使用 @State 管理页面状态。当数据发生变化时，HarmonyOS 会自动触发 UI 更新，而不需要开发者手动刷新页面。

接下来开始构建预约草稿模块。
在这里插入图片描述

预约草稿模块构建

@Builder
buildBookingDraft() {
  Column() {
    Row() {
      Image($r('app.media.receipt'))
        .width(26)
        .height(26)

      Text('预约草稿')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .margin({ left: 10 })
    }

    this.buildDraftLine(
      '户型面积',
      '两室一厅一卫 · 86㎡'
    )

    this.buildDraftLine(
      '期望时间',
      '今天 16:00-18:00'
    )

    this.buildDraftLine(
      '服务备注',
      '厨房油烟机外侧重点清洁'
    )
  }
  .padding(18)
  .backgroundColor('#FFF5F4')
  .borderRadius(24)
}

这一部分对应原 Flutter 中的 _buildBookingDraft 方法。

HarmonyOS 中的 Column 类似 Flutter 的 Column，用于纵向布局；Row 则对应横向布局。

整个模块采用：

外层卡片容器
内部纵向排列
多行信息复用组件

这种设计方式可以极大提升 UI 可维护性。

随后将每一行抽象成独立组件。

@Builder
buildDraftLine(label: string, value: string) {
  Row() {
    Text(label)
      .width(90)
      .fontSize(15)
      .fontColor('#666')

    Text(value)
      .fontSize(16)
      .fontWeight(FontWeight.Medium)
      .maxLines(1)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
  }
  .justifyContent(FlexAlign.SpaceBetween)
  .margin({ top: 14 })
}

这里最重要的思想是“组件复用”。

如果没有抽象这一层，那么三个信息行就需要重复编写三套布局代码。而 Builder 机制让 HarmonyOS 可以像函数一样构建 UI。

这种方式在大型项目中尤为重要。

因为生活服务类页面往往存在：

地址模块
时间模块
订单模块
支付模块

它们本质上都属于“标签 + 内容”结构，因此完全可以复用这一套组件思想。

服务员推荐模块

接下来是页面中的横向推荐列表。

这也是 HarmonyOS 页面开发中的重点场景之一。

@Builder
buildCleanerShelf() {
  Column() {
    Row() {
      Text('可预约服务员')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)

      Blank()

      Text('实名认证')
        .fontSize(14)
        .fontColor('#999')
    }

    Scroll() {
      Row({ space: 12 }) {
        ForEach(this.cleaners, (item: Cleaner) => {
          this.buildCleanerCard(item)
        })
      }
    }
    .scrollable(ScrollDirection.Horizontal)
    .height(180)
    .margin({ top: 16 })
  }
}

这里涉及 HarmonyOS 6.0 中几个非常重要的组件：

Scroll
ForEach
Row 横向布局
状态驱动列表

与传统 Android RecyclerView 不同，HarmonyOS 的列表渲染更加轻量化。

开发者只需要：

提供数据
描述 UI
框架自动完成渲染

接下来是单个服务员卡片。

@Builder
buildCleanerCard(item: Cleaner) {
  Column() {
    Text(item.name.substring(0, 1))
      .width(46)
      .height(46)
      .borderRadius(23)
      .textAlign(TextAlign.Center)
      .fontColor(Color.White)
      .backgroundColor(item.color)
      .fontWeight(FontWeight.Bold)

    Blank()

    Text(item.name)
      .fontSize(18)
      .fontWeight(FontWeight.Bold)

    Text(item.skill)
      .fontSize(14)
      .fontColor('#888')
      .margin({ top: 4 })

    Row() {
      Text('★')
        .fontColor('#FFB400')

      Text(item.score)
        .fontWeight(FontWeight.Bold)
        .margin({ left: 4 })
    }
    .margin({ top: 8 })
  }
  .width(150)
  .height(160)
  .padding(16)
  .backgroundColor(Color.White)
  .borderRadius(22)
}

这一部分实际上是整个页面中最典型的“卡片组件”。

HarmonyOS 6.0 在声明式 UI 下，非常适合这种：

电商卡片
推荐卡片
用户卡片
服务卡片

因为所有布局都可以通过链式调用完成。

例如：

.width(150)
.height(160)
.padding(16)
.backgroundColor(Color.White)
.borderRadius(22)

这种写法相比传统 XML 更加直观。

同时组件结构更加清晰。

套餐推荐模块

套餐模块本质上属于纵向信息列表。

核心目标是：

强化价格视觉层级
强化服务信息展示
增强卡片分割感

先看整体结构。

@Builder
buildPackagePanel() {
  Column() {
    Text('套餐推荐')
      .fontSize(22)
      .fontWeight(FontWeight.Bold)

    this.buildPackage(
      '搬家后开荒',
      '4小时 · 厨卫玻璃重点',
      '¥328',
      '#FF7B72'
    )

    Divider()

    this.buildPackage(
      '月度保洁卡',
      '4次 · 每次2小时',
      '¥699',
      '#2ECC71'
    )

    Divider()

    this.buildPackage(
      '年末大扫除',
      '6小时 · 全屋深洁',
      '¥468',
      '#9B59B6'
    )
  }
  .padding(18)
  .backgroundColor(Color.White)
  .borderRadius(24)
}

随后封装套餐组件。

@Builder
buildPackage(
  title: string,
  desc: string,
  price: string,
  color: string
) {
  Row() {
    Column() {
      Text(title)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)

      Text(desc)
        .fontSize(14)
        .fontColor('#888')
        .margin({ top: 4 })
    }
    .alignItems(HorizontalAlign.Start)

    Blank()

    Text(price)
      .fontSize(20)
      .fontColor(color)
      .fontWeight(FontWeight.Bold)
  }
  .margin({ top: 18 })
}

这里有一个非常重要的 HarmonyOS 页面设计思想：

“Builder + 数据驱动”。

因为套餐模块本质上属于：

相同布局
不同数据

所以只需要构建一次组件。

后续所有套餐都能动态生成。

这也是 HarmonyOS 组件化开发最大的优势。

页面整合

最后将所有模块组合成完整页面。

build() {
  Column() {
    this.buildBookingDraft()

    this.buildCleanerShelf()

    this.buildPackagePanel()
  }
  .padding(20)
  .backgroundColor('#F7F8FA')
}

整个页面逻辑非常清晰：

页面负责结构组织
Builder 负责模块封装
State 负责数据驱动
ArkUI 负责自动渲染

这就是 HarmonyOS 6.0 声明式开发的核心思想。

心得

在实际开发过程中，我认为 HarmonyOS 6.0 最大的优势，并不是简单的“国产替代”，而是它真正将现代化声明式 UI 思想带入了移动端开发体系。尤其是在复杂页面开发中，ArkUI 的组件化能力非常强。

以前使用传统 Android XML 时，一个复杂页面往往会出现：

多层嵌套
Adapter 冗余
ViewHolder 复杂
状态更新繁琐

而 HarmonyOS 6.0 更像是：

“用数据描述界面”。

这种开发方式最大的变化是：

开发者不再关注“怎么刷新页面”，而是关注“页面当前是什么状态”。

例如本文中的：

服务员列表
套餐推荐
预约草稿

本质上都只是数据。

UI 会随着数据自动变化。

这种思想对于大型业务系统来说意义巨大。

此外，HarmonyOS 在跨端能力上的优势也非常明显。

同一套页面代码：

手机可以运行
平板可以运行
智慧屏可以运行
折叠屏可以运行

而开发者只需要关注响应式布局即可。

对于未来 IoT 场景来说，这种能力会越来越重要。
在这里插入图片描述

总结

HarmonyOS 6.0 的出现，让移动端开发正在从传统命令式 UI 逐渐转向声明式 UI。ArkUI 不仅降低了页面开发复杂度，也让组件复用、状态管理以及跨端适配变得更加自然。本文通过一个家政预约页面案例，完整讲解了 HarmonyOS 6.0 中卡片布局、Builder 组件封装、状态驱动渲染、横向列表以及套餐模块构建等核心开发技巧。从实际体验来看，HarmonyOS 的页面开发效率已经非常接近 Flutter 与 React Native 等现代框架，同时又具备原生级性能与分布式生态优势。对于希望进入鸿蒙生态的开发者而言，尽早掌握 ArkUI 与声明式页面开发思想，将会成为未来 HarmonyOS 应用开发的重要竞争力。