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

HarmonyOS应用开发实战萌宠日记 - Y 轴与 X 轴标签布局前言坐标轴标签是图表中不可或缺的辅助元素它们帮助用户读取数据值、理解数据范围。在萌宠日记的体重折线图中Y 轴标签显示体重值4.0-6.0kgX 轴标签显示年龄或日期两者通过精确的布局对齐与图表数据点形成清晰的对应关系。本文将从萌宠日记中坐标轴标签的布局实现出发深入解析 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 标签参数参数值说明fontSize10fp最小字号辅助阅读fontColor#999999灰色不抢眼height36vp与网格线间距一致textAlignTextAlign.End右对齐贴近图表width30vp固定宽度保证对齐2.3 Y 轴标签列表标签值对应网格线 Y 位置说明第 1 行6.00vp最大值第 2 行5.536vp中间值第 3 行5.072vp中间值第 4 行4.5108vp中间值第 5 行4.0144vp最小值三、X 轴标签设计3.1 标签样式Text(label) .fontSize(10) // 小字号 .fontColor(#999999) // 灰色 .layoutWeight(1) // 与数据点等宽对齐 .textAlign(TextAlign.Center) // 居中对齐3.2 标签参数参数值说明fontSize10fp最小字号fontColor#999999灰色layoutWeight1与数据点等宽textAlignTextAlign.Center居中在数据点下方四、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 字体选择字号使用场景说明10fp坐标轴标签辅助信息最小字号12fp图表标题辅助文字单位说明16fp图表标题主要标题八、标签颜色设计8.1 颜色选择// 坐标轴标签使用灰色 .fontColor(#999999)8.2 颜色层级颜色使用场景说明#333333图表标题主要文字#999999坐标轴标签辅助文字九、无障碍适配// 为坐标轴标签添加无障碍描述 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 个原则字号最小坐标轴标签使用 10fp辅助阅读不抢眼颜色柔和使用#999999灰色与图表数据点区分精确对齐Y 轴标签高度与网格线间距一致X 轴标签与数据点等宽固定宽度Y 轴标签使用固定宽度确保对齐稳定占位对齐X 轴标签使用占位元素与 Y 轴标签对齐10.2 萌宠日记坐标轴标签总结设计要素Y 轴标签X 轴标签字号10fp10fp颜色#999999#999999对齐右对齐居中对齐宽度/高度30vp 宽 × 36vp 高layoutWeight(1) 等宽数量5 个5 个内容4.0-6.02.0年龄总结本文从萌宠日记的坐标轴标签布局实现出发深入解析了 Y 轴与 X 轴标签的完整设计整体布局Row 包含 Y 轴标签 图表区域 X 轴标签Y 轴标签固定宽度 30vp高度 36vp右对齐X 轴标签layoutWeight(1) 等宽居中对齐对齐机制高度/宽度匹配实现精确对齐占位元素X 轴标签的占位列确保与 Y 轴标签对齐字体颜色10fp 灰色辅助阅读无障碍适配accessibilityText 描述坐标轴精确的坐标轴标签布局是图表可读性的基础。通过固定宽度和高度匹配萌宠日记实现了轻量级图表中标签与数据的清晰对应。下一篇我们将深入记录列表与状态标签解析健康记录页中记录列表的实现。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Row 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-rowColumn 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-columnText 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textlayoutWeight 属性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