Openharmony应用开发–健康饮食APP分解

Openharmony应用开发--健康饮食APP分解

​想了解更多关于开源的内容,请访问:​

​51CTO 开源基础软件社区​

​https://ost.51cto.com​

前言

此处健康生活实战课程,个人觉得非常值得学习,里面普及到的ArkUI知识点很多,从中学到常见基础组件的使用和页面布局、自定义组件使用、属性动画,显示动画、转场动画、绑定手势方法、图表绘制、状态变量、国际化、一次开发多端部署等等知识,我把饮食APP界面各各组件分开文件来写,然后再引用组装,对于初学者,把每个组件都单独弄懂了,然后再通过下面的导图,就清晰的组装成一个完整APP。

Openharmony应用开发--健康饮食APP分解

效果图

清晰效果图请移步到B站观看https://www.bilibili.com/video/BV1de4y1n7qc/?spm_id_from=333.999.0.0。

Openharmony应用开发--健康饮食APP分解

项目结构图

Openharmony应用开发--健康饮食APP分解Openharmony应用开发--健康饮食APP分解

开发流程

先从简单组件开始,从也是视频里的课后作业,当自己一个个简单的组件做出来了,组成一个完整APP也就不难了,这里我以记录饮食对话框开始,对话框有用餐时间,比如早餐、午餐、晚餐、宵夜,有用餐食物重量,而用餐时间是固定的,可以在资源文件定义好国际化,然后在组件上引用。资源文件定义用餐Label,使用的是字符串数组strarray.json来定义。

{
"strarray": [
{
"name": "mealTime_labels",
"value": [
{
"value": "Breakfast"
},
{
"value": "Lunch"
},
{
"value": "Dinner"
},
{
"value": "Supper"
}
]
}
]
}
{
"strarray": [
{
"name": "mealTime_labels",
"value": [
{
"value": "早餐"
},
{
"value": "午餐"
},
{
"value": "晚餐"
},
{
"value": "宵夜"
}
]
}
]
}

关键代码:

@CustomDialog
export struct Record {
private foodInfo: FoodInfo
private controller: CustomDialogController
private select: number = 1
private mileTime: Resource = $r('app.strarray.mealTime_labels')
private foodWeight: string[] = ['25', '50', '100', '150', '200', '250', '300', '350', '400', '450', '500']
private mealTimeId: MealTimeEnum = MealTimeEnum.Lunch
private mealWeight: number = Number(this.foodWeight[this.select])
build() {
Column() {
Row({ space: 6 }) {
Column() {
Text(this.foodInfo.name)
.minFontSize(18)
.maxFontSize(30)
.maxLines(1)
Text($r('app.string.calorie_with_kcal_unit', this.foodInfo.calories.toString()))
.fontSize(16)
.fontColor('rgba(0,0,0,0.4)')
.margin({ top: 2 })
}
.layoutWeight(1)
.justifyContent(FlexAlign.Center)

TextPicker({ range: this.mileTime, selected: this.select })
.layoutWeight(1)
.linearGradient({
angle: 0,
direction: GradientDirection.Top,
colors: [[0xfdfdfd, 0.0], [0xe0e0e0, 0.5], [0xfdfdfd, 1]],
})
.onChange((value: string, index: number) => {
this.mealTimeId = index
})

TextPicker({ range: this.foodWeight, selected: this.select })
.layoutWeight(1)
.linearGradient({
angle: 0,
direction: GradientDirection.Top,
colors: [[0xfdfdfd, 0.0], [0xe0e0e0, 0.5], [0xfdfdfd, 1]],
})
.onChange((value: string) => {
this.mealWeight = Number(value)
})
}
.height(128)
Button($r('app.string.button_food_detail_complete'), { type: ButtonType.Capsule, stateEffect: true })
.height(43)
.width('100%')
.margin({ top: 33, left: 72, right: 72 })
.backgroundColor($r('app.color.theme_color_green'))
.onClick(() => {
let dietRecordsList = AppStorage.Get<Array<DietRecord>>('dietRecords')
if (dietRecordsList == undefined || dietRecordsList.length === 0) {
dietRecordsList = new Array<DietRecord>()
}
let dietRecordData = new DietRecord(dietRecordsList.length, this.foodInfo.id, new MealTime(this.mealTimeId), this.mealWeight)
dietRecordsList.push(dietRecordData)
AppStorage.SetOrCreate<Array<DietRecord>>('dietRecords', dietRecordsList)
this.controller.close()
})
}
.cardStyle()
.height(254)
.width('90%')
}
}

对话框效果图。

Openharmony应用开发--健康饮食APP分解
Openharmony应用开发--健康饮食APP分解

总结

根据导图列出的各组件,像写对话框一样,一个个组件功能完成,对于初始者来说,一下子写一个小组件,比一开始就写一个Demo简单多了,组件写多了,经验丰富了,那时要写什么样的APP,就看个人创意了,我也打算,下来有空把这个饮食APP用到的各组件,每个组件写一个帖子,把用到的知识都总结出来,这样对以后的学习也有一定的帮助,谢谢这次活动的实例,让我学到了更多的知识,我也会一直在学习路上。

​想了解更多关于开源的内容,请访问:​

​51CTO 开源基础软件社区​

​https://ost.51cto.com​​。

文章版权声明

 1 原创文章作者:tw,如若转载,请注明出处: https://www.52hwl.com/108019.html

 2 温馨提示:软件侵权请联系469472785#qq.com(三天内删除相关链接)资源失效请留言反馈

 3 下载提示:如遇蓝奏云无法访问,请修改lanzous(把s修改成x)

 免责声明:本站为个人博客,所有软件信息均来自网络 修改版软件,加群广告提示为修改者自留,非本站信息,注意鉴别

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2024年1月17日 下午9:41
下一篇 2024年1月17日 下午9:41