目录
前言
综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新性的移动应用软件。
一、项目介绍
黑马健康应用程序是一个综合性的健康监控和管理工具，它具备一系列定制化功能，旨在帮助用户轻松地跟踪和管理自己的健康状况。通过个性化的饮食追踪记录和全面的健康评估机制，该应用能够根据用户的具体情况提供针对性的建议和指导。无论是对于追求体型改善和体重管理的用户，还是那些希望优化日常饮食以满足营养需求的用户，黑马健康都能提供一套量身打造的解决方案。它通过简化健康管理流程，使用户能够以一种更加直观和易于操作的方式，实现健康目标的达成。此外，黑马健康应用程序还强调了用户日常生活习惯的改善，通过持续的健康教育和行为指导，鼓励用户形成更加健康的生活方式。通过这种方式，该应用程序不仅帮助用户在短期内实现健康目标，更致力于长期促进用户的身体健康和生活质量的提升。
二、应用运行
1.饮食记录-顶部搜索栏
（1）页面整体架构分析
（2）运行效果
（3）详细代码
RecordIndex.ets:
.layoutWeight(1) 方法可能是设置组件在布局中的权重，使得该组件能够根据权重分配空间。Column() 可能是创建一个垂直布局容器的函数，用于组织子组件的排列。.width 和 .height 方法用于设置组件的尺寸。
import RecordList from './RecordList' // 导入当前目录下的 RecordList 组件模块
import SearchHeader from './SearchHeader' // 导入当前目录下的 SearchHeader 组件模块
import StatsCard from './StatsCard' // 导入当前目录下的 StatsCard 组件模块
@Component // 声明 RecordIndex 结构为一个组件，这可能是 OHOS 语言中用于声明组件的语法
export default struct RecordIndex { // 定义一个默认导出的结构体 RecordIndex
build() { // 组件的构建函数，用于定义组件的布局和样式
Column() { // 创建一个 Column 容器，用于垂直排列子组件
// 1.头部搜索栏
SearchHeader() // 调用 SearchHeader 组件，将其添加到 Column 容器中
// 2.统计卡片
StatsCard() // 调用 StatsCard 组件，将其添加到 Column 容器中
// 3.记录列表
RecordList() // 调用 RecordList 组件，将其添加到 Column 容器中
.layoutWeight(1) // 设置 RecordList 组件的布局权重为1，使其占据剩余空间
}
.width('100%') // 设置组件的宽度为100%，占满其父容器的宽度
.height('100%') // 设置组件的高度为100%，占满其父容器的高度
.backgroundColor($r('app.color.index_page_background')) // 设置组件的背景颜色，使用资源引用
}
}SearchHeader.ets:
这段代码定义了一个名为 SearchHeader 的组件，它包含一个水平布局的 Row 容器，容器中有两个子组件：一个搜索框 Search 和一个带有角标的 Badge 组件。Search 组件用于输入搜索内容，Badge 组件通常用于显示数字或其他信息，例如未读消息数量。Image 组件用于显示图标，这里显示的是一个邮箱图标。.layoutWeight(1) 表示 Search 组件将占据 Row 容器中剩余的所有水平空间。CommonConstants 常量用于定义布局参数，如间距和宽度等。
import { CommonConstants } from '../../common/constants/CommonConstants' // 导入 CommonConstants 常量模块
@Component // 声明 SearchHeader 结构为一个组件
export default struct SearchHeader { // 定义 SearchHeader 结构体并将其作为默认导出
build() { // 组件的构建函数
Row({space:CommonConstants.SPACE_6}){ // 创建一个水平布局的 Row 容器，并设置其间距为 CommonConstants.SPACE_6 定义的值
Search({placeholder:'搜索饮食或运动信息'}) // 创建一个 Search 搜索组件，设置占位符为 "搜索饮食或运动信息"
.textFont({size:18}) // 设置搜索框内文本的字体大小为18
.layoutWeight(1) // 设置搜索组件的布局权重为1，使其填充剩余空间
// 容器型组件，邮箱上方有小数字 Badge 角标，位于右上方
Badge({count:1,position:BadgePosition.RightTop,style:{fontSize:12}}){ // 创建一个 Badge 角标组件，设置显示数字为1，位置为右上方，字体大小为12
Image($r('app.media.ic_public_email')) // 插入一个图片组件，图片资源引用自 $r 函数，路径为 'app.media.ic_public_email'
.width(22) // 设置图片的宽度为22
}
}
.width(CommonConstants.THOUSANDTH_940) // 设置 Row 容器的宽度为 CommonConstants.THOUSANDTH_940 定义的值
}
}2.饮食记录-统计卡片
（1）页面整体架构分析
（2）运行效果
（3）详细代码及分析
这段代码定义了一个日期选择对话框，用户可以通过这个对话框选择日期。对话框包含一个日期选择器和两个按钮："取消" 和 "确定"。当用户点击 "确定" 时，选择的日期会被保存到全局存储中，并且对话框会被关闭。CommonConstants 常量用于定义布局参数，如间距和尺寸等。AppStorage 可能是 OHOS 提供的全局存储API，用于跨组件持久化数据。
import { CommonConstants } from '../../common/constants/CommonConstants' // 导入 CommonConstants 常量模块
@CustomDialog // 使用 CustomDialog 装饰器，这可能是用于定义对话框组件的特殊标记
export default struct DatePickDialog { // 定义 DatePickDialog 结构体并将其作为默认导出
controller: CustomDialogController // 定义 controller 属性，用于控制对话框的行为，如关闭等
selectedDate: Date = new Date() // 定义 selectedDate 属性，初始化为当前日期
build() { // 组件的构建函数
Column({space: CommonConstants.SPACE_12}) { // 创建一个垂直布局的 Column 容器，设置间距为 CommonConstants.SPACE_12 定义的值
// 1.日期选择器
DatePicker({ // 创建 DatePicker 日期选择器组件
start: new Date('2020-01-01'), // 设置开始日期为 2020年1月1日
end: new Date(), // 设置结束日期为当前日期
selected: this.selectedDate // 设置选中的日期为 selectedDate 属性的值
})
.onChange((value: DatePickerResult) => { // 为 DatePicker 组件添加 onChange 事件处理函数
this.selectedDate.setFullYear(value.year, value.month, value.day) // 更新 selectedDate 属性的值为用户选择的日期
console.info('select current date is: ' + JSON.stringify(value)) // 打印选择的日期信息
})
// 2.按钮
Row({space: CommonConstants.SPACE_12}) { // 创建一个水平布局的 Row 容器，设置间距
Button('取消') // 创建一个标记为 "取消" 的按钮
.width(120) // 设置按钮宽度为120
.backgroundColor($r('app.color.light_gray')) // 设置按钮背景颜色为 light_gray
.onClick(() => this.controller.close()) // 为按钮添加点击事件，点击时调用 controller 的 close 方法关闭对话框
Button('确定') // 创建一个标记为 "确定" 的按钮
.width(120) // 设置按钮宽度为120
.backgroundColor($r('app.color.primary_color')) // 设置按钮背景颜色为主色调，这里假设是绿色
.onClick(() => { // 为 "确定" 按钮添加点击事件
// 1.保存日期到全局存储
// 将日期转换为毫秒值并保存到全局存储，不直接保存 Date 对象以避免状态监控问题
AppStorage.SetOrCreate('selectedDate', this.selectedDate.getTime()) // 调用全局存储方法保存日期
// 2.关闭窗口
this.controller.close() // 调用 controller 的 close 方法关闭对话框
})
}
}
.padding(CommonConstants.SPACE_12) // 设置 Column 容器的内边距
}
}3.饮食记录-记录列表
（1）页面整体架构分析
（2）运行效果
（3）详细代码及分析
这段代码定义了一个列表组件，其中使用了ForEach来遍历数组并生成列表项。列表项中包含分组标题和组内记录列表。每个列表项都有特定的布局和样式设置，例如字体大小、颜色、间距等。grayText函数用于设置文本的灰色样式，delectButton方法定义了滑动操作后的删除按钮样式。CommonConstants常量用于定义布局参数和颜色值。
import { CommonConstants } from '../../common/constants/CommonConstants' // 导入 CommonConstants 常量模块
@Extend(Text) function grayText() { // 使用 @Extend 装饰器扩展 Text 组件，创建 grayText 函数，用于设置文本样式
.fontSize(14) // 设置字体大小为 14
.fontColor($r('app.color.light_gray')) // 设置字体颜色为 light_gray
}
@Component // 声明 RecordList 结构为一个组件
export default struct RecordList { // 定义 RecordList 结构体并将其作为默认导出
build() { // 组件的构建函数
List({space: CommonConstants.SPACE_10}) { // 创建 List 列表组件，设置列表项之间的间距
ForEach([1, 2, 3, 4, 5], (item) => { // 对数组 [1, 2, 3, 4, 5] 进行遍历
ListItem() { // 创建列表项
Column() { // 创建 Column 垂直布局容器
// 1.分组的标题
Row({ space: CommonConstants.SPACE_4 }) { // 创建 Row 水平布局容器，设置间距
Image($r('app.media.ic_breakfast')).width(24) // 插入图片资源，设置宽度
Text('早餐').fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700) // 创建文本，设置字体大小和权重
Text('建议423-592千卡').grayText() // 创建文本，使用 grayText 函数设置样式
Blank() // 创建空白组件，用于调整布局间距
Text('190').fontSize(14).fontColor($r('app.color.light_primary_color')) // 创建文本，设置样式
Text('千卡').grayText() // 创建文本，使用 grayText 函数设置样式
Image($r('app.media.ic_public_add_norm_filled')) // 插入图片资源
.width(20)
.fillColor($r('app.color.primary_color')) // 设置图片填充颜色
}
.width('100%') // 设置 Row 容器宽度为 100%
// 2.组内记录列表
List() { // 创建内部 List 列表组件
ForEach([1, 2], (item) => { // 对数组 [1, 2] 进行遍历
ListItem() { // 创建列表项
Row({space: CommonConstants.SPACE_4}) { // 创建 Row 水平布局容器，设置间距
Image($r('app.media.toast')).width(50) // 插入图片资源，设置宽度
Column({space: CommonConstants.SPACE_4}) { // 创建 Column 垂直布局容器，设置间距
Text('全麦吐司').fontWeight(CommonConstants.FONT_WEIGHT_500) // 创建文本，设置字体权重
Text('1片').grayText() // 创建文本，使用 grayText 函数设置样式
}
Blank() // 创建空白组件
Text('91千克').grayText() // 创建文本，使用 grayText 函数设置样式
}
.width('100%') // 设置 Row 容器宽度为 100%
.padding(CommonConstants.SPACE_6) // 设置内边距
}
}.swipeAction({end: this.delectButton.bind(this)})) // 为列表项添加滑动操作，绑定 delectButton 方法
}
.width('100%') // 设置 Column 容器宽度为 100%
.backgroundColor(Color.White) // 设置背景颜色为白色
.borderRadius(CommonConstants.DEFAULT_18) // 设置边框圆角
.padding(CommonConstants.SPACE_12) // 设置外边距
}
})
}
.width(CommonConstants.THOUSANDTH_940) // 设置 List 组件宽度
.margin({top: 10}) // 设置上边距
.height('100%') // 设置 List 组件高度为 100%
}
@Builder delectButton() { // 使用 @Builder 装饰器定义 delectButton 方法
Image($r('app.media.ic_public_delete_filled')) // 插入图片资源
.width(20) // 设置图片宽度
.fillColor(Color.Red) // 设置图片填充颜色为红色
.margin(5) // 设置外边距
}
}总结
在开发过程中，构建了一个基于华为OHOS操作系统的应用程序界面。设计了`RecordIndex`作为主界面，整合了搜索、统计和记录列表功能。`SearchHeader`组件提供了一个直观的搜索界面，而`StatsCard`则用于展示关键数据。此外，还实现了一个`DatePickDialog`日期选择对话框，允许用户选择日期并将其保存至全局存储，以便应用其他部分使用。
还开发了`RecordList`组件，以列表形式展示详细信息，并支持滑动删除操作，增强了用户交互。为了保持界面风格的一致性，创建了`grayText`函数来统一文本样式，并在`RecordList`中应用了响应式布局设计。
整个开发过程中，注重组件的可重用性和界面的响应式设计，通过集中管理布局参数和颜色值，简化了样式维护。通过这些设计，为用户提供了一个既美观又实用的应用体验。
1626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
