HarmonyOS应用开发实战：萌宠日记 - 添加记录按钮设计

HarmonyOS应用开发实战萌宠日记 - 添加记录按钮设计前言添加记录按钮是健康记录页中触发新增数据的核心操作入口。在萌宠日记的 HealthRecordPage 中添加按钮采用内联标签样式使用 记录文字 橙色主题色放置在记录列表标题行右侧与标题形成清晰的操作引导。本文将从萌宠日记中添加记录按钮的设计与实现出发深入解析内联标签按钮的样式设计、位置布局、交互反馈以及添加记录的完整流程。一、添加按钮设计1.1 按钮样式// HealthRecordPage.ets — 添加记录按钮 Button( 记录) .fontSize(13) // 小字号 .fontColor(#F5A623) // 品牌橙色文字 .backgroundColor(#FFF3E0) // 浅橙色背景 .borderRadius(16) // 胶囊形圆角 .padding({ left: 12, right: 12, top: 4, bottom: 4 }) // 内边距 .onClick(() { this.showAddRecordDialog() // 点击弹出添加面板 })1.2 按钮参数参数值说明文字 记录加号 动词明确操作字号13fp小号与标题层级区分文字色#F5A623品牌橙色背景色#FFF3E0浅橙与文字色同色系圆角16vp胶囊形柔和内边距左右 12vp上下 4vp紧凑二、按钮位置布局2.1 标题行布局Row() { Text(记录列表) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(#333333) Blank() Button( 记录) .fontSize(13) .fontColor(#F5A623) .backgroundColor(#FFF3E0) .borderRadius(16) .padding({ left: 12, right: 12, top: 4, bottom: 4 }) } .width(100%)2.2 布局结构┌─────────────────────────────────────┐ │ 记录列表 [ 记录] │ │ ← 标题权重高 → ← 按钮操作 → │ └─────────────────────────────────────┘三、按钮样式设计3.1 内联标签样式// 内联标签按钮风格 Button( 记录) .fontSize(13) .fontColor(#F5A623) .backgroundColor(#FFF3E0) .borderRadius(16) .padding({ left: 12, right: 12, top: 4, bottom: 4 })3.2 按钮样式对比对比维度内联标签按钮普通按钮字号13fp15-18fp背景色浅色实色圆角16vp20vp内边距紧凑宽松适用场景标题行内底部操作栏四、添加记录流程4.1 弹出添加面板// 显示添加记录对话框 showAddRecordDialog(): void { AlertDialog.show({ title: 添加体重记录, message: 请输入体重值, primaryButton: { value: 取消, action: () {} }, secondaryButton: { value: 保存, action: () { this.addWeightRecord(2024-05-05, 4.5, 正常) } } }) }4.2 自定义添加面板// 自定义添加记录面板替代 AlertDialog State showAddPanel: boolean false // 添加面板 if (this.showAddPanel) { Column() { Text(添加记录) .fontSize(18).fontWeight(FontWeight.Bold) // 体重输入 TextInput({ placeholder: 请输入体重 (kg) }) .width(100%).height(44) .backgroundColor(#F5F5F5).borderRadius(8) // 日期选择 Text(2024-05-05) .fontSize(14).fontColor(#333333) // 保存按钮 Button(保存) .width(100%).height(44) .backgroundColor(#F5A623).borderRadius(22) .fontColor(Color.White) .onClick(() { this.addWeightRecord() this.showAddPanel false }) } .width(100%) .padding(24) .backgroundColor(#FFFFFF) .borderRadius(16) .shadow({ radius: 8, color: #20000000, offsetY: 4 }) }五、添加记录的数据处理5.1 添加逻辑// 添加体重记录 addWeightRecord(): void { const newRecord: WeightRecord { date: this.getCurrentDate(), weight: ${this.weightValue} kg, status: this.getWeightStatus(this.weightValue), statusColor: this.getStatusColor(this.weightValue) } // 插入到列表头部 this.weightRecords [newRecord, ...this.weightRecords] } // 获取当前日期 getCurrentDate(): string { const now new Date() return ${now.getFullYear()}-${String(now.getMonth() 1).padStart(2, 0)}-${String(now.getDate()).padStart(2, 0)} }六、按钮交互反馈6.1 点击反馈Button( 记录) .fontSize(13) .fontColor(#F5A623) .backgroundColor(#FFF3E0) .borderRadius(16) .clickEffect({ level: ClickEffectLevel.LIGHT }) .onClick(() { this.showAddRecordDialog() })七、按钮的无障碍Button( 记录) .fontSize(13) .fontColor(#F5A623) .backgroundColor(#FFF3E0) .borderRadius(16) .accessibilityText(添加体重记录)八、最佳实践8.1 添加按钮设计原则有序列表 — 添加按钮设计的 5 个原则位置明确放在标题行右侧与标题并列视觉区分使用浅色背景 橙色文字与标题区分文案清晰 记录明确表示“添加“操作内联样式紧凑的内边距不占用过多空间操作引导点击后弹出添加表单引导用户操作8.2 萌宠日记添加按钮总结设计要素值说明文案 记录加号 动词字号13fp小号文字色#F5A623品牌橙色背景色#FFF3E0浅橙圆角16vp胶囊形位置标题行右侧与标题并列总结本文从萌宠日记的添加记录按钮实现出发深入解析了内联标签按钮的完整设计按钮样式内联标签风格浅橙背景 橙色文字位置布局标题行右侧Blank() 弹性占位添加流程点击弹出添加面板数据处理添加新记录到列表头部交互反馈点击涟漪效果无障碍适配accessibilityText 描述下一篇我们将深入查看更多交互解析健康记录页中“查看更多“链接的实现。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Button 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-buttonAlertDialog 对话框https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-methods-alert-dialog-boxTextInput 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput点击效果https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-click-effect数据持久化https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/app-data-persistence无障碍开发https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/accessibility-kit交互反馈https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/interaction-feedback表单设计https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/form-design