企业官网建设流程全解析

HarmonyOS应用开发实战：萌宠日记 - Y 轴与 X 轴标签布局

前言

坐标轴标签是图表中不可或缺的辅助元素，它们帮助用户读取数据值、理解数据范围。在萌宠日记的体重折线图中，Y 轴标签显示体重值（4.0-6.0kg），X 轴标签显示年龄或日期，两者通过精确的布局对齐，与图表数据点形成清晰的对应关系。

本文将从萌宠日记中坐标轴标签的布局实现出发，深入解析 Y 轴标签与 X 轴标签的对齐机制、间距计算、样式设计，以及如何确保标签与图表数据的精确对应。

一、坐标轴标签整体布局

1.1 布局结构

┌─────────────────────────────────────┐ │ 6.0 ───────────────────────────── │ │ 5.5 ───────────────────────────── │ │ 5.0 ───────────────────────────── │ │ 4.5 ─────●───────●───────●─────── │ │ 4.0 ───────────────────────────── │ │ 2.0 2.0 2.0 2.0 2.0 │ └─────────────────────────────────────┘

1.2 核心代码

// Y 轴标签 + 图表区域 + X 轴标签 Row() { // Y 轴标签（左侧） Column() { ForEach(['6.0', '5.5', '5.0', '4.5', '4.0'], (label: string) => { Text(label) .fontSize(10) .fontColor('#999999') .height(36) // 与网格线间距一致 .textAlign(TextAlign.End) // 右对齐 .width(30) // 固定宽度 }) } // 图表区域（中间） Column() { Stack() { // 网格线和数据点 } .width('100%') .height(180) } .layoutWeight(1) // 撑满剩余宽度 // X 轴标签（底部） Row() { Text('').width(30) // 占位，与 Y 轴标签对齐 ForEach(['2.0', '2.0', '2.0', '2.0', '2.0'], (label: string) => { Text(label) .fontSize(10) .fontColor('#999999') .layoutWeight(1) // 与数据点对齐 .textAlign(TextAlign.Center) }) } .width('100%') }

提示：Y 轴标签和 X 轴标签通过精确的宽度和高度匹配实现对齐。Y 轴标签的height(36)与网格线的y: i * 36保持一致，X 轴标签的layoutWeight(1)与数据点的x: i * 50对应。

二、Y 轴标签设计

2.1 标签样式

Text(label) .fontSize(10) // 小字号 .fontColor('#999999') // 灰色 .height(36) // 与网格线间距一致 .textAlign(TextAlign.End) // 右对齐 .width(30) // 固定宽度

2.2 标签参数

2.3 Y 轴标签列表

三、X 轴标签设计

3.1 标签样式

Text(label) .fontSize(10) // 小字号 .fontColor('#999999') // 灰色 .layoutWeight(1) // 与数据点等宽对齐 .textAlign(TextAlign.Center) // 居中对齐

3.2 标签参数

四、Y 轴与 X 轴的对齐机制

4.1 垂直对齐

Y 轴标签的height(36)与网格线的y: i * 36对应：

Y 轴标签高度 = 36vp 网格线间距 = 36vp 两者一致 → 标签与网格线对齐

4.2 水平对齐

X 轴标签的layoutWeight(1)与数据点的x: i * 50对应，通过等分宽度实现对齐：

图表区域宽度 = 父容器宽度 - 30vp(Y轴标签宽度) 数据点间距 = 图表宽度 / 5 X 轴标签宽度 = 图表宽度 / 5 两者一致 → 标签与数据点对齐

五、Y 轴标签与图表区域的布局

5.1 Row 布局

Row() { // Y 轴标签（固定宽度 30vp） Column() { // 5 个标签 } // 图表区域（撑满剩余宽度） Column() { Stack() { // 网格线和数据点 } } .layoutWeight(1) // 撑满剩余空间 }

5.2 宽度分配

Row 总宽度 = 父容器宽度 - 图表内边距 ↓ Y 轴标签宽度 = 30vp（固定） ↓ 图表区域宽度 = 剩余宽度（layoutWeight(1)）

六、X 轴标签的占位列

6.1 占位元素

Row() { Text('').width(30) // 占位 Column，宽度与 Y 轴标签一致 ForEach(['2.0', '2.0', '2.0', '2.0', '2.0'], (label: string) => { Text(label) .layoutWeight(1) // 与数据点等宽 }) }

6.2 对齐原理

Text('').width(30)占位 Column 的宽度与 Y 轴标签的width(30)一致，确保 X 轴标签的起始位置与图表区域的左边缘对齐。

七、标签的字体设计

7.1 字体大小

// Y 轴和 X 轴标签统一使用 10fp .fontSize(10)

7.2 字体选择

八、标签颜色设计

8.1 颜色选择

// 坐标轴标签使用灰色 .fontColor('#999999')

8.2 颜色层级

九、无障碍适配

// 为坐标轴标签添加无障碍描述 Column() { ForEach(['6.0', '5.5', '5.0', '4.5', '4.0'], (label: string) => { Text(label) .fontSize(10) .accessibilityText(`体重 ${label} 公斤`) }) } .accessibilityText('体重坐标轴，从4.0到6.0公斤')

十、最佳实践

10.1 坐标轴标签设计原则

有序列表 — 坐标轴标签设计的 5 个原则：

1. 字号最小：坐标轴标签使用 10fp，辅助阅读，不抢眼
2. 颜色柔和：使用#999999灰色，与图表数据点区分
3. 精确对齐：Y 轴标签高度与网格线间距一致，X 轴标签与数据点等宽
4. 固定宽度：Y 轴标签使用固定宽度，确保对齐稳定
5. 占位对齐：X 轴标签使用占位元素与 Y 轴标签对齐

10.2 萌宠日记坐标轴标签总结

总结

本文从萌宠日记的坐标轴标签布局实现出发，深入解析了 Y 轴与 X 轴标签的完整设计：

1. 整体布局：Row 包含 Y 轴标签 + 图表区域 + X 轴标签
2. Y 轴标签：固定宽度 30vp，高度 36vp，右对齐
3. X 轴标签：layoutWeight(1) 等宽，居中对齐
4. 对齐机制：高度/宽度匹配实现精确对齐
5. 占位元素：X 轴标签的占位列确保与 Y 轴标签对齐
6. 字体颜色：10fp 灰色，辅助阅读
7. 无障碍适配：accessibilityText 描述坐标轴

精确的坐标轴标签布局，是图表可读性的基础。通过固定宽度和高度匹配，萌宠日记实现了轻量级图表中标签与数据的清晰对应。

下一篇我们将深入记录列表与状态标签，解析健康记录页中记录列表的实现。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• Row 组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row
• Column 组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-column
• Text 组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text
• layoutWeight 属性：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-layout-constraints
• 数据可视化：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/data-visualization
• 字体排版：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/typography
• 颜色使用规范：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/color-usage
• 无障碍开发：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/accessibility-kit