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 按钮参数

二、按钮位置布局

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 按钮样式对比

四、添加记录流程

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 个原则：

1. 位置明确：放在标题行右侧，与标题并列
2. 视觉区分：使用浅色背景 + 橙色文字，与标题区分
3. 文案清晰：+ 记录明确表示“添加“操作
4. 内联样式：紧凑的内边距，不占用过多空间
5. 操作引导：点击后弹出添加表单，引导用户操作

8.2 萌宠日记添加按钮总结

总结

本文从萌宠日记的添加记录按钮实现出发，深入解析了内联标签按钮的完整设计：

1. 按钮样式：内联标签风格，浅橙背景 + 橙色文字
2. 位置布局：标题行右侧，Blank() 弹性占位
3. 添加流程：点击弹出添加面板
4. 数据处理：添加新记录到列表头部
5. 交互反馈：点击涟漪效果
6. 无障碍适配：accessibilityText 描述

下一篇我们将深入查看更多交互，解析健康记录页中“查看更多“链接的实现。

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

相关资源：

• Button 组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-button
• AlertDialog 对话框：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-methods-alert-dialog-box
• TextInput 组件：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