02 HarmonyOS Next仪表盘案例详解（一）：基础篇原创

全栈若城

发布于 2025-3-26 09:00

3588浏览

0收藏

02 HarmonyOS Next仪表盘案例详解（一）：基础篇-鸿蒙开发者社区

温馨提示：本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦！

1. 项目概述

本文将详细分析 HarmonyOS 应用中的仪表盘(Dashboard)示例，该示例展示了一个业务数据概览页面，包含数据卡片和趋势图表区域。通过这个案例，我们可以学习 HarmonyOS 应用开发的核心技术和最佳实践。

2. 技术架构

2.1 文件结构

仪表盘示例位于entry/src/main/ets/pages/StudyHo/DashboardExample.ets，是一个完整的页面组件。该组件引用了自定义的 Navbar 组件，展示了 HarmonyOS 组件化开发的思想。

import { router } from '@kit.ArkUI';
import { Navbar as MyNavbar } from "../../components/NavBar"
1.
2.

2.2 ArkTS 语言特性

该案例充分利用了 ArkTS 语言的特性，主要包括：

装饰器的使用

@Entry  // 标记组件为页面入口
@Component  // 定义自定义组件
struct DashboardExample {
    @State desc: string = '';  // 组件内部状态变量
    @State title: string = ''
    // ...
}
1.
2.
3.
4.
5.
6.
7.

@Entry：标记 DashboardExample 为页面入口组件
@Component：声明 DashboardExample 为自定义组件
@State：定义组件内部状态变量，当这些变量发生变化时，UI 会自动刷新

3. 数据结构设计

3.1 接口定义

案例中定义了DashboardCardItem接口，用于描述仪表盘数据卡片的数据结构：

export interface DashboardCardItem {
    /**
     * 卡片标题
     */
    title: string;

    /**
     * 数值内容
     */
    value: string;

    /**
     * 数值单位
     */
    unit: string;

    /**
     * 趋势变化，如'+12.5%'或'-0.3s'
     */
    trend: string;

    /**
     * 卡片主题颜色，十六进制颜色代码
     */
    color: string;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

这种接口定义方式体现了 TypeScript 的类型系统优势，使代码更加健壮，同时提高了开发效率和代码可维护性。

3.2 数据初始化

组件内部使用@State 装饰器定义了 dataCards 数组，初始化了四个数据卡片：

@State dataCards:DashboardCardItem[] = [
    {title: '今日销售额', value: '8,846', unit: '元', trend: '+12.5%', color: '#2A9D8F'},
    {title: '活跃用户数', value: '1,286', unit: '人', trend: '+6.8%', color: '#E9C46A'},
    {title: '订单完成率', value: '92.6', unit: '%', trend: '+2.4%', color: '#F4A261'},
    {title: '平均响应时间', value: '1.2', unit: '秒', trend: '-0.3s', color: '#E76F51'}
]
1.
2.
3.
4.
5.
6.

每个卡片都有不同的主题颜色，使界面更加丰富多彩，同时通过 trend 字段显示数据的变化趋势。

4. 生命周期与页面路由

4.1 组件生命周期

aboutToAppear() {
    // 获取屏幕宽度，用于响应式布局
    this.screenWidth = px2vp(AppStorage.Get<number>('windowWidth') || 720)
}
1.
2.
3.
4.

aboutToAppear()是组件的生命周期函数，在组件即将出现时调用。这里用于获取屏幕宽度，为响应式布局做准备。

4.2 页面参数传递

onPageShow(): void {
    // 获取传递过来的参数对象
    const params = router.getParams() as Record<string, string>;
    //   获取传递的值
    if (params) {
        this.desc = params.desc as string
        this.title = params.value as string
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

onPageShow()在页面显示时调用，用于接收页面路由传递的参数。这里通过router.getParams()获取参数，并将参数值赋给组件的状态变量。

5. UI 布局与组件

5.1 整体布局结构

DashboardExample 的 UI 结构如下：

Column (根容器)
├── MyNavbar (导航栏)
├── Flex (顶部标题栏)
│   ├── Text (标题文本)
│   └── Flex (筛选器)
├── Flex (数据卡片网格)
│   └── ForEach (循环渲染数据卡片)
└── Column (图表区域)
    ├── Flex (图表标题栏)
    └── Column (图表占位区域)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

这种嵌套结构清晰地展示了 HarmonyOS 声明式 UI 的特点，通过组合不同的容器组件和基础组件，构建复杂的界面。

5.2 基础组件使用

案例中使用了多种基础 UI 组件：

Text：文本显示组件，用于显示标题、数值等
Image：图片显示组件，用于显示图标
Column：垂直布局容器
Flex：弹性布局容器，支持更灵活的布局方式
ForEach：循环渲染组件，用于批量创建数据卡片

5.3 样式与主题

ArkTS 支持链式调用设置组件样式，使 UI 代码更加简洁：

Text(card.value)
    .fontSize(28)
    .fontWeight(FontWeight.Bold)
    .fontColor(card.color)
1.
2.
3.
4.

数据卡片的样式设置：

.width(this.screenWidth > 600 ? '22%' : '45%')
.height(120)
.padding(16)
.margin(8)
.borderRadius(12)
.backgroundColor(Color.White)
// 添加卡片阴影效果
.shadow({radius: 4, color: '#1A000000', offsetY: 2})
1.
2.
3.
4.
5.
6.
7.
8.

这种链式调用方式使代码更加简洁易读，同时通过设置 borderRadius、shadow 等属性实现丰富的视觉效果。

总结

本文介绍了 HarmonyOS 仪表盘示例的基础部分，包括项目概述、技术架构、数据结构设计、生命周期与页面路由以及 UI 布局与组件等内容。通过这些基础知识，开发者可以了解 HarmonyOS 应用开发的核心概念和基本结构。在下一篇文章中，我们将继续探讨响应式设计、数据展示与交互、事件处理机制、性能优化技巧、数据流管理和最佳实践等高级内容。

分类

HarmonyOS

标签

harmonyos next