首先是头部搜索:
Row({space:CommonConstants.SPACE_6}){//搜索栏
Search({placeholder:'搜索饮食或运动信息'})
.textFont({size:18})
.layoutWeight(1)
Badge({count:1,position:BadgePosition.RightTop,style:{fontSize:14}}){//角标
Image($r('app.media.ic_public_email'))
.width(24)
}
}
.width(CommonConstants.THOUSANDTH_940)
实现效果:
饮食卡片记录:
StatsCard 用来显示记录页面:
export default struct StatsCard {//统计卡片
/*@StorageProp('selectedDate') selectedDate:number = DateUtil.beginTimeOfDay(new Date())
controller:CustomDialogController=new CustomDialogController({
builder:DatePickDialog({selectedDate:new Date(this.selectedDate)})
})
*/
build() {
Column() {
//1.日期
Text('2024-06-20')
.fontColor($r('app.color.secondary_color'))
/*
Row(){
Text(DateUtil.formatDate(this.selectedDate)) //格式化
.fontColor($r('app.color.secondary_color'))
Image($r('app.media.ic_public_spinner'))
.width(20)
.fillColor($r('app.color.secondary_color'))
}
.padding(CommonConstants.SPACE_8)//内边距
.onClick(()=>this.controller.open())
* */
//2.统计信息
Swiper(){
//2.1热量统计
CalorieStats()
//2.2营养素统计
NutrientStats()
}
.width('100%')
.backgroundColor(Color.White)
.borderRadius(CommonConstants.DEFAULT_18)
.indicatorStyle({selectedColor:$r('app.color.primary_color')})//穿梭框样式
}
.width(CommonConstants.THOUSANDTH_940)
.backgroundColor($r('app.color.stats_title_bgc'))
.borderRadius(CommonConstants.DEFAULT_18)//弧度
}
}
实现效果:
其中热量和营养素的统计也分别实现:
export default struct CalorieStats {//热量
intake:number = 192//摄入
expend:number = 150//消耗
recommend:number = CommonConstants.RECOMMEND_CALORIE//推荐
remainCalorie(){
return this.recommend - this.intake + this.expend
}
build() {
Row({space:CommonConstants.SPACE_6}){
//1.饮食摄入
this.StatsBuilder('饮食摄入',this.intake)
//2.还可以吃
Stack(){//在外部,层叠关系
//2.1进度条
Progress({
value:this.intake,
total:this.recommend,
type:ProgressType.Ring//环形
})
.width(135)
.style({strokeWidth:CommonConstants.DEFAULT_10})
.color($r('app.color.primary_color'))
//2.2统计数据
this.StatsBuilder('还可以吃',this.remainCalorie(),`推荐${this.recommend}`)
}
//3.运动消耗
this.StatsBuilder('运动消耗',this.expend)
}
.width('100%')
.justifyContent(FlexAlign.SpaceEvenly)
.padding({top:30,bottom:35})
}
@Builder StatsBuilder(label:string,value:number,tips?:string){
Column({space:CommonConstants.SPACE_6}) {
Text(label)
.fontColor($r('app.color.gray'))
.fontWeight(CommonConstants.FONT_WEIGHT_600)
Text(value.toFixed(0))
.fontSize(20)
.fontWeight(CommonConstants.FONT_WEIGHT_700)
if (tips){//判断tips是否有值
Text(tips)
.fontSize(12)
.fontColor($r('app.color.light_gray'))
}
}
}
}
export default struct NutrientStats {//营养素统计
carbon:number=23//碳水
protein:number=9//蛋白质
fat:number=7//脂肪
recommendCaron: number = CommonConstants.RECOMMEND_CARBON
recommendProtein: number = CommonConstants.RECOMMEND_PROTEIN
recommendFat: number = CommonConstants.RECOMMEND_FAT
build() {
Row({space:CommonConstants.SPACE_6}){
this.StatsBuilder(
'碳水化合物',
this.carbon,
this.recommendCaron,$r('app.color.carbon_color'))
this.StatsBuilder(
'蛋白质',
this.protein,
this.recommendProtein,$r('app.color.protein_color'))
this.StatsBuilder(
'脂肪',
this.fat,
this.recommendFat,$r('app.color.fat_color'))
}
.width('100%')
.justifyContent(FlexAlign.SpaceEvenly)
.padding({top:30,bottom:35})
}
@Builder StatsBuilder(label:string,value:number,recommend:number,color:ResourceStr){
Column({space:CommonConstants.SPACE_6}) {
Stack(){
Progress({
value:value,
total:recommend,
type:ProgressType.Ring//环形
})
.width(90)
.style({strokeWidth:CommonConstants.DEFAULT_6})
.color(color)
Column({space:CommonConstants.SPACE_6}){
Text('摄入推荐')
.fontSize(12)
.fontColor($r('app.color.gray'))
Text(`${value.toFixed(0)}/${recommend.toFixed(0)}`)
.fontSize(18)
.fontWeight(CommonConstants.FONT_WEIGHT_600)
}
}
Text(`${label}(克)`)
.fontSize(12)
.fontColor($r('app.color.light_gray'))
.fontWeight(CommonConstants.FONT_WEIGHT_600)
}
}
显示页面的实现:
export default struct RecordIndex {
@StorageProp('selectedDate')
selectedDate:number = DateUtil.beginTimeOfDay(new Date())
build() {
Column(){
//1.头部搜索栏
SearchHeader()//引用组件
//2.统计卡片
StatsCard()
//3.记录列表
RecordIndex()
.layoutWeight(1)
}
.width('100%')
.height('100%')
.backgroundColor($r('app.color.index_page_background'))
}
}