鸿蒙实战案例（个人期末项目）-----黑马康健（源自黑马步伐员）#3 ...

三，饮食记载

1，顶部搜刮栏

（1）.实现结果图

（2）.实现原理

起首，我们必要在视图目次下创建一个新的文件夹，定名为`record`，用于存放记载干系的组件。在这个文件夹中，我们将创建一个名为`RecordIndex.ets`的文件，该文件将作为记载首页的组件。
正如前文所述，Tabs组件目前仅包含一个体现文本内容的Text组件。在实际开发中，我们将这三个部门都封装成组件，以便进行调用。
接下来，我们将创建一个名为`SearchHeader`的组件，它将作为顶部的搜刮栏。这个搜刮栏不但仅是一个简朴的文本输入框，而是带有一个小图标的搜刮框。鸿蒙操作系统已经提供了一个专门的搜刮栏组件`Search`，我们可以通过将鼠标悬停在`Search`组件上来检察其详细的书写格式。
至于消息通知的数目，我们可以使用一个名为`Badge`的组件来实现小红点的结果。`Badge`是一个容器型组件，我们可以通过将必要添加小红点的组件直接复制（CV）进去。详细的数字必要我们通过参数传递来设置。我们还可以通过`position`属性来控制小红点的位置。此外，我们还可以通过`style`属性来自界说小红点的样式。
（3）.SearchHeader.ets

1. import { CommonConstants } from '../../common/constants/CommonConstants'
2. @Component
3. export  default struct SearchHeader {
4.   build() {
5.     Row({space:CommonConstants.SPACE_6}){
6.       Search({placeholder: '搜索饮食或运动信息'})
7.         .textFont({size:18})
8.         .layoutWeight(1)
9.       Badge({count: 1,position:BadgePosition.RightTop,style:{fontSize: 14}}){
10.         Image($r('app.media.ic_public_email'))
11.           .width(24)
12.       }
13.     }
14.     .width(CommonConstants.THOUSANDTH_940)
15.   }
16. }

复制代码

2，统计卡片

（1）.实现结果图

（2）.实现原理

1. **日期选择组件**：
   - 我们将实现一个日期展示组件，它包含一个下拉框。用户点击下拉框时，将弹出一个日期选择器`DatePicker`。
   - 用户在日期选择器中选择不同的日期后，页面将展示所选日期以及与该日期干系的统计信息。
   - 选择日期后，我们可以使用ArkUI提供的组件功能，在日期选择弹窗中包含一个“生存”按钮。
   - 当用户点击生存按钮，我们使用`SetOrCreate`命令将用户选择的时间进行全局存储，确保用户的选择可以被应用和保留。
2. **统计信息展示**：
   - **热量统计**：我们将采取行式布局来展示热量摄入的统计信息，这包括饮食摄入、推荐摄入和活动消耗三个部门。推荐摄入部门将特别展示一个环形进度条，以直观体现用户的实际摄入与推荐值之间的差异。
   - **营养素统计**：同样使用行式布局，展示碳水化合物、蛋白质和脂肪的摄入情况，每部门旁边也将展示一个环形进度条，帮助用户相识各类营养素的摄入比例。
3. **穿梭切换卡片**：
   - 用户可以通过左右滑动在热量统计卡片和营养素统计卡片之间进行切换。这将通过`Swiper`滑块视图容器实现，它允许子组件在滑动时进行轮播体现。
   - `Swiper`滑块视图容器是我们在布局分析中提到的穿梭切换卡片部门的关键组件，它为用户界面提供了流畅的滑动体验和动态的视图切换本领。
在设计这些组件时，我们必要确保它们不但功能齐全，而且用户友爱，易于操作。此外，全局存储用户的选择对于保持应用状态的一致性至关重要，因此`SetOrCreate`命令的使用必要审慎以确保数据的正确性和完备性。
（3）.DatePickDiaLog.ets，CalorieStats.ets和NutrientStats.ets

1. import { CommonConstants } from '../../common/constants/CommonConstants'
2. @CustomDialog
3. export  default struct DatePickDialog {
4.   controller: CustomDialogController
5.   selectedDate: Date = new Date()
6.   build() {
7.     Column({space:CommonConstants.SPACE_12}){
8.       //1.日期选择器
9.       DatePicker({
10.         start: new Date('2020-01-01'),
11.         end: new Date(),
12.         selected: this.selectedDate
13.       })
14.         .onChange((value: DatePickerResult) => {
15.           this.selectedDate.setFullYear(value.year, value.month, value.day)
16.         })
17.       //2.按钮
18.       Row({space:CommonConstants.SPACE_12}){
19.         Button('取消')
20.           .width(120)
21.           .backgroundColor($r('app.color.light_gray'))
22.           .onClick(() => this.controller.close())
23.         Button('确定')
24.           .width(120)
25.           .backgroundColor($r('app.color.primary_color'))
26.           .onClick(() => {
27.             //1.保存日期到全局储存
28.             AppStorage.SetOrCreate('selectDate',this.selectedDate.getTime())
29.             //2.关闭窗口
30.             this.controller.close()
31.           })
32.       }
33.     }
34.     .padding(CommonConstants.SPACE_12)
35.   }
36. }

复制代码

1. import { WindowMode } from '@ohos.UiTest'
2. import { CommonConstants } from '../../common/constants/CommonConstants'
3. @Component
4. export  default struct CalorieStats {
5.   intake: number = 192
6.   expend: number = 150
7.   recommend: number = CommonConstants.RECOMMEND_CALORIE
9.   remainCalorie(){
10.     return this.recommend - this.intake + this.expend
11.   }
13.   build() {
14.     Row({space:CommonConstants.SPACE_6}){
15.       //1.饮食摄入
16.       this.StatsBuilder('饮食摄入', this.intake)
17.       //2.还可以吃
18.       Stack(){
19.         //2.1进度条
20.         Progress({
21.           value:this.intake,
22.           total:this.recommend,
23.           type:ProgressType.Ring
24.         })
25.           .width(120)
26.           .style({strokeWidth:CommonConstants.DEFAULT_10})
27.           .color($r('app.color.primary_color'))
28.         //2.2统计数据
29.         this.StatsBuilder('还可以吃',this.remainCalorie(),`推荐${this.recommend}`)
30.       }
32.       //3.运动消耗
33.       this.StatsBuilder('饮食摄入', this.expend)
35.     }
36.     .width('100%')
37.     .justifyContent(FlexAlign.SpaceEvenly)
38.     .padding({top:30,bottom:35})
39.   }
41.   @Builder StatsBuilder(label:string,value:number,tips?:string){
42.     Column({space:CommonConstants.SPACE_6}){
43.       Text(label)
44.         .fontColor($r('app.color.gray'))
45.         .fontWeight(CommonConstants.FONT_WEIGHT_600)
46.       Text(value.toFixed(0 ))
47.         .fontSize(20)
48.         .fontWeight(CommonConstants.FONT_WEIGHT_700)
49.       if (tips){
50.         Text(tips)
51.           .fontSize(14)
52.           .fontColor($r('app.color.light_gray'))
53.       }
54.     }
55.   }
56. }

复制代码

1. import { CommonConstants } from '../../common/constants/CommonConstants'
2. @Component
3. export  default struct NutrientStats {
5.   carbon :number=24
6.   protein:number=10
7.   fat:number=5
9.   recommendCarbon :number=CommonConstants.RECOMMEND_CARBON
10.   recommendProtein :number=CommonConstants.RECOMMEND_PROTEIN
11.   recommendFat :number=CommonConstants.RECOMMEND_FAT
13.   build() {
14.     Row({space:6}){
16.       this.StatsBuilder('碳水化合物',this.carbon,this.recommendCarbon,$r('app.color.carbon_color'))
18.       this.StatsBuilder('蛋白质',this.protein,this.recommendProtein,$r('app.color.protein_color'))
20.       this.StatsBuilder('脂肪',this.carbon,this.recommendFat,$r('app.color.fat_color'))
21.     }
22.     .width('100%')
23.     .justifyContent(FlexAlign.SpaceEvenly)
24.     .padding({top:30,bottom:35})
25.   }
27.   @Builder StatsBuilder(label: string, value: number, recommend:number,color:ResourceColor){
28.     Column({space: CommonConstants.SPACE_6}){
29.       Stack() { //层叠关系
30.         // 进度条
31.         Progress({
32.           value: value,
33.           total: recommend,
34.           type: ProgressType.Ring
35.         })
36.           .width(95)
37.           .style({ strokeWidth: CommonConstants.DEFAULT_6 })
38.           .color(color)
39.         Column({space:6}){
40.           Text('摄入推荐')
41.             .fontColor($r('app.color.gray'))
42.             .fontSize(12)
43.           Text(`${value.toFixed(0)}/${recommend.toFixed(0)}`)
44.             .fontSize(18)
45.             .fontWeight(CommonConstants.FONT_WEIGHT_600)
46.         }
48.       }
49.       Text(`${label} (克)`)
50.         .fontSize(12)
51.         .fontColor($r('app.color.light_gray'))
53.     }
54.   }
55. }

复制代码

3，记载列表

（1）.实现结果图

（2）.实现原理

实际上，这是一个由图片和文字构成的list列表，每个列表项都配有相应的图像和形貌文本，而且这些列表项被构造在不同的分组中。整个布局采取垂直的列式排列方式，使得内容展示清楚有序。
（3）.RecordList.ets

1. import router from '@ohos.router'
2. @Extend(Text) function  grayText(){
3.   .fontSize(14)
4.   .fontColor($r('app.color.light_gray'))
5. }
7. @Component
8. export default struct RecordList {
9.   build() {
10.     List({space:10}){
11.       ForEach([1,2,3,4,5],(item) =>{
12.         ListItem(){
13.           Column(){
14.             //1.分组的标题
15.             Row({space:4}){
16.               Image($r('app.media.ic_breakfast'))
17.                 .width(24)
18.               Text('早餐')
19.                 .fontSize(18)
20.                 .fontWeight(700)
21.               Text('建议423-592千卡').grayText()
22.               Blank()
23.               Text('190')
24.                 .fontSize(14)
25.                 .fontColor($r('app.color.primary_color'))
26.               Text('千卡').grayText()
27.               Image($r('app.media.ic_public_add_norm_filled'))
28.                 .width(20)
29.                 .fillColor($r('app.color.primary_color'))
30.             }
31.             .width('100%')
32.             //2.组内纪录列表
33.             List(){
34.               ForEach([1,2],(item)=>{
35.                 ListItem(){
36.                   Row({space:6}){
37.                     Image($r('app.media.toast')).width(50)
38.                     Column({space:4}) {
39.                       Text('全麦吐司').fontWeight(500)
40.                       Text('1片').grayText()
41.                     }
42.                     Blank()
43.                     Text('91千卡')
44.                       .grayText()
45.                   }
46.                   .width('100%')
47.                   .padding(6)
49.                 }.swipeAction({end:this.deleteButton.bind(this)})
50.                 .onClick(()=>this.ToitemList())
53.               })
54.             }
55.             .width('100%')
57.           }
58.           .backgroundColor(Color.White)
59.           .width('100%')
60.           .borderRadius(18)
61.           .padding(12)
62.         }
63.         .width('100%')
66.       })
68.     }
69.     .width('94%')
70.     .margin({top:10})
71.     .height('100%')
73.   }
74.   @Builder deleteButton() {
75.     Image($r('app.media.ic_public_delete_filled'))
76.       .width(20)
77.       .fillColor(Color.Red)
78.       .margin(5)
79.   }
80.   ToitemList(){
81.     setTimeout(()=>{
82.       router.replaceUrl({
83.         url:'pages/ItemIndex'
84.       })
85.     },1000)
86.   }
87. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。