HarmonyOS鸿蒙项目实战

1.源码地点

源码地点：https://gitee.com/lyj-bc-cn/harmonyos_demo.git
devecostudio汗青版本：DevEco Studio汗青版本下载-华为开辟者同盟 (huawei.com)
此项目所用的情况为api9、DevEco Studio 3.1.1 Release，在api10以上的deveco studio中会无法运行而且爆出一堆错误。如果你使用的是DevEco Studio NEXT Developer Beta1或更高的版本，那照旧自求多福吧，由于bug是真的多啊。发起运行从堆栈下载的代码的时间使用较低的汗青版本编译器，但我头铁，就要死磕ArkTS API10 !!!
关于新版本的语法优化可以参考这篇文章：https://blog.csdn.net/u010274449/article/details/135618012

https://blog.csdn.net/u010274449/article/details/135618012
2.结果图

现在已完成的结果图如下，但由于我用的最新版的编译器，以是数据渲染的部门会有bug。现在展示部门结果，等改完了bug再更一篇,堆栈的源码随后奉上。

3.部门组件源码

1.弹窗组件

1. CustomDialog
2. export default struct UserPrivacyDialog {
3.   controller: CustomDialogController
4.   confirm: () => void
5.   cancel: () => void
7.   build() {
8.     Column({space: CommonConstants.SPACE_10}){
9.       // 1.标题
10.       Text($r('app.string.user_privacy_title'))
11.         .fontSize(20)
12.         .fontWeight(CommonConstants.FONT_WEIGHT_700)
13.       // 2.内容
14.       Text($r('app.string.user_privacy_content'))
15.       // 3.按钮
16.       Button($r('app.string.agree_label'))
17.         .width(150)
18.         .backgroundColor($r('app.color.primary_color'))
19.         .onClick(() => {
20.           this.confirm()
21.           this.controller.close()
22.         })
23.       Button($r('app.string.refuse_label'))
24.         .width(150)
25.         .backgroundColor($r('app.color.lightest_primary_color'))
26.         .fontColor($r('app.color.light_gray'))
27.         .onClick(() => {
28.           this.cancel()
29.           this.controller.close()
30.         })
32.     }
33.     .width('100%')
34.     .padding(10)
35.   }
36. }

复制代码

2.键盘组件

1. @Component
2. export default struct KeyBoard {
3.   @Link amount:number
4.   @Link value:string
5.   @Styles keyBoxStyle(){
6.     .backgroundColor(Color.White)
7.     .height(60)
8.     .borderRadius(8)
10. }
11.   numbers:string[]=['1','2','3','4','5','6','7','8','9','0','.']
12.   build() {
13.     Grid(){
14.       ForEach(this.numbers,(num:number)=>{
15.         GridItem(){
16.           Text(`${num}`)
17.             .fontSize(20)
18.             .fontWeight(CommonConstants.FONT_WEIGHT_900)
19.         }
20.         .keyBoxStyle()
21.         .onClick(()=>this.clickNumber(`${num}`))
22.       })
23.       GridItem(){
24.         Text('删除')
25.           .fontSize(20)
26.           .fontWeight(CommonConstants.FONT_WEIGHT_900)
27.       }
28.       .keyBoxStyle()
29.       .onClick(()=>this.clickDelete())
30.     }
31.     .width('100%')
32.     .height(280)
33.     .backgroundColor($r('app.color.index_page_background'))
34.     .columnsTemplate('1fr 1fr 1fr')
35.     .columnsGap(8)
36.     .rowsGap(8)
37.     .padding(8)
38.     .margin({top:10})
39.   }
40.   //函数
41.   clickNumber(num:string){
42.     //1.拼接用户输入的内容
43.     let val=this.value+num
44.     //2.校验输入格式
45.     let firstIndex=val.indexOf('.')
46.     let lastIndex=val.lastIndexOf('.')
47.     if(firstIndex!==lastIndex||(lastIndex!==-1&&lastIndex<val.length-2)){
48.       //非法输入
49.       return
50.     }
51.     //3.转为数值保存
52.     let amount=this.parseFloat(val)
53.     if(amount>99.9){
54.       this.amount=99.0
55.       this.value='99'
56.     }else{
57.       this.amount=amount
58.       this.value=val
59.     }
60.   }
61.   clickDelete(){
62.       if(this.value.length<=0){
63.         this.value=''
64.         this.amount=0
65.         return
66.       }
67.       this.value=this.value.substring(0,this.value.length-1)
68.       this.amount=this.parseFloat(this.value)
70.   }
72.   parseFloat(str:string){
73.   if(!str){
74.     return 0
75.   }
76.   if(str.endsWith('.')){
77.     str=str.substring(0,str.length-1)
78.   }
79.   return parseFloat(str)
80.   }
81. }

复制代码

3.日期卡片组件

1. @Component
2. export default struct StatsCard {
4.   @StorageProp('selectedDate') selectedDate: number = DateUtil.beginTimeOfDay(new Date())
5.   @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM
7.   @Consume @Watch('handleRecordsChange') records: RecordVO[]
8.   @State info: StatsInfo = new StatsInfo()
10.   handleRecordsChange(){
11.     this.info = RecordService.calculateStatsInfo(this.records)
12.   }
14.   controller: CustomDialogController = new CustomDialogController({
15.     builder: DatePickDialog({selectedDate: new Date(this.selectedDate)})
16.   })
17.   build() {
18.     Column(){
19.       // 1.日期信息
20.       Row(){
21.         Text(DateUtil.formatDate(this.selectedDate))
22.           .fontColor($r('app.color.secondary_color'))
23.         Image($r('app.media.ic_public_spinner'))
24.           .width(20)
25.           .fillColor($r('app.color.secondary_color'))
26.       }
27.       .padding(CommonConstants.SPACE_8)
28.       .onClick(() => this.controller.open())
30.       // 2.统计信息
31.       Swiper(){
32.         // 2.1.热量统计
33.         CalorieStats({intake: this.info.intake, expend: this.info.expend})
34.         // 2.2.营养素统计
35.         NutrientStats({carbon: this.info.carbon, protein: this.info.protein, fat: this.info.fat})
36.       }
37.       .width('100%')
38.       .backgroundColor(Color.White)
39.       .borderRadius(CommonConstants.DEFAULT_18)
40.       .indicatorStyle({selectedColor: $r('app.color.primary_color')})
41.       .displayCount(new BreakpointType({
42.         sm: 1,
43.         md: 1,
44.         lg: 2
45.       }).getValue(this.currentBreakpoint))
46.     }
47.     .width(CommonConstants.THOUSANDTH_940)
48.     .backgroundColor($r('app.color.stats_title_bgc'))
49.     .borderRadius(CommonConstants.DEFAULT_18)
50.   }
51. }

复制代码

4.首页列表组件

1. @Extend(Text) function grayText(){
2.   .fontSize(14)
3.   .fontColor($r('app.color.light_gray'))
4. }
6. @Component
7. export default struct RecordList {
9.   @Consume @Watch('handleRecordsChange') records: RecordVO[]
10.   @State groups: GroupInfo<RecordType, RecordVO>[] = []
12.   handleRecordsChange(){
13.     this.groups = RecordService.calculateGroupInfo(this.records)
14.   }
16.   build() {
17.     List({space: CommonConstants.SPACE_10}){
18.       ForEach(this.groups, (group: GroupInfo<RecordType, RecordVO>) => {
19.         ListItem(){
20.           Column({space: CommonConstants.SPACE_8}){
21.             // 1.分组的标题
22.             Row({space: CommonConstants.SPACE_4}){
23.               Image(group.type.icon).width(24)
24.               Text(group.type.name).fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)
25.               Text(`建议${group.type.min}~${group.type.max}千卡`).grayText()
26.               Blank()
27.               Text(group.calorie.toFixed(0)).fontSize(14).fontColor($r('app.color.primary_color'))
28.               Text('千卡').grayText()
29.               Image($r('app.media.ic_public_add_norm_filled'))
30.                 .width(20)
31.                 .fillColor($r('app.color.primary_color'))
32.             }
33.             .width('100%')
34.             .onClick(() => {
35.               router.pushUrl({
36.                 url: 'pages/ItemIndex',
37.                 params: {type: group.type}
38.               })
39.             })
40.             // 2.组内记录列表
41.             List(){
42.               ForEach(group.items, (item: RecordVO) => {
43.                 ListItem(){
44.                   Row({space: CommonConstants.SPACE_6}){
45.                     Image(item.recordItem.image).width(50)
46.                     Column({space: CommonConstants.SPACE_4}){
47.                       Text(item.recordItem.name).fontWeight(CommonConstants.FONT_WEIGHT_500)
48.                       Text(`${item.amount}${item.recordItem.unit}`).grayText()
49.                     }
50.                     Blank()
51.                     Text(`${item.calorie.toFixed(0)}千卡`).grayText()
52.                   }
53.                   .width('100%')
54.                   .padding(CommonConstants.SPACE_6)
55.                 }.swipeAction({end: this.deleteButton.bind(this)})
56.               })
57.             }
58.             .width('100%')
59.           }
60.           .width('100%')
61.           .backgroundColor(Color.White)
62.           .borderRadius(CommonConstants.DEFAULT_18)
63.           .padding(CommonConstants.SPACE_12)
64.         }
65.       })
66.     }
67.     .width(CommonConstants.THOUSANDTH_940)
68.     .height('100%')
69.     .margin({top: 10})
70.   }
72.   @Builder deleteButton(){
73.     Image($r('app.media.ic_public_delete_filled'))
74.       .width(20)
75.       .fillColor(Color.Red)
76.       .margin(5)
77.   }
78. }

复制代码

5.食品列表组件

1. @Component
2. export default struct ItemList {
3.   showPanel: (item: RecordItem) => void
4.   @Prop isFood: boolean
6.   build() {
7.     Tabs() {
8.       TabContent() {
9.         this.TabContentBuilder(ItemModel.list(this.isFood))
10.       }
11.       .tabBar('全部')
13.       ForEach(
14.         ItemModel.listItemGroupByCategory(this.isFood),
15.         (group: GroupInfo<ItemCategory, RecordItem>) => {
16.           TabContent() {
17.             this.TabContentBuilder(group.items)
18.           }
19.           .tabBar(group.type.name)
20.         })
21.     }
22.     .width(CommonConstants.THOUSANDTH_940)
23.     .height('100%')
24.     .barMode(BarMode.Scrollable)
25.   }
27.   @Builder TabContentBuilder(items: RecordItem[]) {
28.     List({ space: CommonConstants.SPACE_10 }) {
29.       ForEach(items, (item: RecordItem) => {
30.         ListItem() {
31.           Row({ space: CommonConstants.SPACE_6 }) {
32.             Image(item.image).width(50)
33.             Column({ space: CommonConstants.SPACE_4 }) {
34.               Text(item.name).fontWeight(CommonConstants.FONT_WEIGHT_500)
35.               Text(`${item.calorie}千卡/${item.unit}`).fontSize(14).fontColor($r('app.color.light_gray'))
36.             }.alignItems(HorizontalAlign.Start)
38.             Blank()
39.             Image($r('app.media.ic_public_add_norm_filled'))
40.               .width(18)
41.               .fillColor($r('app.color.primary_color'))
42.           }
43.           .width('100%')
44.           .padding(CommonConstants.SPACE_6)
45.         }
46.         .onClick(() => this.showPanel(item))
47.       })
48.     }
49.     .width('100%')
50.     .height('100%')
51.   }
52. }

复制代码

6.itemPage

1. @Extend(Button) function panelButtonStyle(){
2.   .width(120)
3.   .type(ButtonType.Normal)
4.   .borderRadius(6)
5. }
7. @Entry
8. @Component
9. struct ItemIndex {
10.   @State amount: number = 1
11.   @State value: string = ''
12.   @State showPanel: boolean = false
13.   @State item: RecordItem = null
14.   @State type: RecordType = RecordTypes[0]
15.   @State isFood: boolean = true
17.   onPanelShow(item: RecordItem) {
18.     this.amount = 1
19.     this.value = ''
20.     this.item = item
21.     this.showPanel = true
22.   }
24.   onPageShow(){
25.     // 1.获取跳转时的参数
26.     let params: any = router.getParams()
27.     // 2.获取点击的饮食记录类型
28.     this.type = params.type
29.     this.isFood = this.type.id !== RecordTypeEnum.WORKOUT
30.   }
32.   build() {
33.     Column() {
34.       // 1.头部导航
35.       this.Header()
36.       // 2.列表
37.       ItemList({ showPanel: this.onPanelShow.bind(this), isFood: this.isFood })
38.         .layoutWeight(1)
39.       // 3.底部面板
40.       Panel(this.showPanel) {
41.         // 3.1.顶部日期
42.         ItemPanelHeader()
43.         // 3.2.记录项卡片
44.         if(this.item){
45.           ItemCard({amount: this.amount, item: $item})
46.         }
47.         // 3.3.数字键盘
48.         NumberKeyboard({amount: $amount, value: $value})
49.         // 3.4.按钮
50.         this.PanelButton()
51.       }
52.       .mode(PanelMode.Full)
53.       .dragBar(false)
54.       .backgroundMask($r('app.color.light_gray'))
55.       .backgroundColor(Color.White)
56.     }
57.     .width('100%')
58.     .height('100%')
59.   }
61.   @Builder PanelButton(){
62.     Row({space: CommonConstants.SPACE_6}){
63.       Button('取消')
64.         .panelButtonStyle()
65.         .backgroundColor($r('app.color.light_gray'))
66.         .onClick(() => this.showPanel = false)
67.       Button('提交')
68.         .panelButtonStyle()
69.         .backgroundColor($r('app.color.primary_color'))
70.         .onClick(() => {
71.           // 1.持久化保存
72.           RecordService.insert(this.type.id, this.item.id, this.amount)
73.             .then(() => {
74.               // 2.关闭弹窗
75.               this.showPanel = false
76.             })
77.         })
78.     }
79.     .margin({top: 10})
80.   }
82.   @Builder Header() {
83.     Row() {
84.       Image($r('app.media.ic_public_back'))
85.         .width(24)
86.         .onClick(() => router.back())
87.       Blank()
88.       Text(this.type.name).fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_600)
89.     }
90.     .width(CommonConstants.THOUSANDTH_940)
91.     .height(32)
92.   }
93. }

复制代码

感爱好的小同伴可以把去堆栈把源码下载下来运行看结果。由于篇幅过长，现在只展示部门源码。键盘组件、列表组件终极结果图如图3、4所示，弹窗组件结果见图1，首页结果见图2。