Openharmony應用開發--健康飲食APP分解
作者：狼哥Army
我把飲食APP界面各各組件分開文件來寫，然后再引用組裝，對于初學者，把每個組件都單獨弄懂了，然后再通過下面的導圖，就清晰的組裝成一個完整APP。
前言
此處健康生活實戰課程，個人覺得非常值得學習，里面普及到的ArkUI知識點很多，從中學到常見基礎組件的使用和頁面布局、自定義組件使用、屬性動畫，顯示動畫、轉場動畫、綁定手勢方法、圖表繪制、狀態變量、國際化、一次開發多端部署等等知識，我把飲食APP界面各各組件分開文件來寫，然后再引用組裝，對于初學者，把每個組件都單獨弄懂了，然后再通過下面的導圖，就清晰的組裝成一個完整APP。
效果圖
清晰效果圖請移步到B站觀看https://www.bilibili.com/video/BV1de4y1n7qc/?spm_id_from=333.999.0.0。
項目結構圖
開發流程
先從簡單組件開始，從也是視頻里的課后作業，當自己一個個簡單的組件做出來了，組成一個完整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%')
}
}
對話框效果圖。
總結
根據導圖列出的各組件，像寫對話框一樣，一個個組件功能完成，對于初始者來說，一下子寫一個小組件，比一開始就寫一個Demo簡單多了，組件寫多了，經驗豐富了，那時要寫什么樣的APP，就看個人創意了，我也打算，下來有空把這個飲食APP用到的各組件，每個組件寫一個帖子，把用到的知識都總結出來，這樣對以后的學習也有一定的幫助，謝謝這次活動的實例，讓我學到了更多的知識，我也會一直在學習路上。
責任編輯：jianghua
來源：
51CTO開源基礎軟件社區
