黑马健康软件开发二

最新推荐文章于 2024-11-16 11:50:05 发布

牧苏苏

最新推荐文章于 2024-11-16 11:50:05 发布

阅读量883

点赞数 15

文章标签： harmonyos

本文链接：https://blog.csdn.net/qq_67806121/article/details/139854254

版权

首页Tabs

Tabs具体代码：

struct Index {
  @State currnIndex:number=0
  @Builder TabBar(title:ResourceStr,img:ResourceStr,index:number){
    Column({space:CommonConstants.SPACE_8}){
      Image(img)
        .width(22)
        .fillColor(this.currnIndex===index?$r('app.color.primary_color'):$r('app.color.gray'))
      Text(title)
        .fontSize(14)
        .fontColor(this.currnIndex===index?$r('app.color.primary_color'):$r('app.color.gray'))
    }
  }
  build() {
    Tabs({barPosition:BarPosition.End}){
      TabContent(){
        Recordindex()
      }
      .tabBar(this.TabBar($r('app.string.tab_record'),$r('app.media.ic_calendar'),0))

      TabContent(){
        Text('yinshijilu')
      }
      .tabBar(this.TabBar($r('app.string.tab_discover'),$r('app.media.discover'),1))

      TabContent(){
        Text('yinshijilu')
      }
      .tabBar(this.TabBar($r('app.string.tab_user'),$r('app.media.ic_user_portrait'),2))
    }
    .width('100%')
    .height('100%')
    .onChange(index=>this.currnIndex=index)
  }
}

对首页内容模块化，放在Recordindex()函数里，具体分为头部代码模块，饮食记录模块和记录列表模块。

头部搜索代码模块：

// src/main/ets/view/record/RecordIndex.ets
import RecordList from './RecordList'
import SearchHeader from './SearchHeader'
import StatsCard from './StatsCard'

@Component
export default struct RecordIndex {
build() {
Column(){
// 1.头部搜索栏
SearchHeader()
// 2.统计卡片
StatsCard()
// 3.记录列表
RecordList()
.layoutWeight(1)
}
.width('100%')
.height('100%')
.backgroundColor($r('app.color.index_page_background'))
}
}
饮食UI设计模块：

// src/main/ets/view/record/NutrientStats.ets

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct NutrientStats {
// 碳水化合物
carbon: number = 10
// 蛋白质
protein: number = 20
// 脂肪
fat: number = 20

// 推荐摄入的碳水化合物，蛋白质，脂肪
recommendCarbon: 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.recommendCarbon,
$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(95)
.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'))
}
}
}

// src/main/ets/view/record/NutrientStats.ets

build() {
Row({space: CommonConstants.SPACE_6}){
this.StatsBuilder(
'碳水化合物',
this.carbon,
this.recommendCarbon,
$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})
}

记录列表模块：

// src/main/ets/view/record/RecordIndex.ets
import RecordList from './RecordList'
import SearchHeader from './SearchHeader'
import StatsCard from './StatsCard'

// src/main/ets/view/record/RecordList.ets

import { CommonConstants } from '../../common/constants/CommonConstants'

@Extend(Text) function grayText() {
.fontSize(14)
.fontColor($r('app.color.light_gray'))
}

@Component
export default struct RecordList {
build() {
List({space: CommonConstants.SPACE_10}){
ForEach([1,2,3,4,5,6], (item) => {
ListItem() {
Column({ space: CommonConstants.SPACE_8 }) {
// 1.分组的标题
Row({space: CommonConstants.SPACE_4}){
Image($r('app.media.ic_breakfast')).width(24)
Text('早餐').fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)
Text('建议423-592千卡').grayText()
Blank()
Text('190').fontSize(14).fontColor($r('app.color.primary_color'))
Text('千卡').grayText()
Image($r('app.media.ic_public_add_norm_filled'))
.width(20)
.fillColor($r('app.color.primary_color'))
}
.width('100%')
// 2.组内记录列表
List(){
ForEach([1,2], (item) => {
ListItem(){
Row({space: CommonConstants.SPACE_6}){
Image($r('app.media.toast')).width(50)
Column({space: CommonConstants.SPACE_4}){
Text('全麦土司').fontWeight(CommonConstants.FONT_WEIGHT_500)
Text(`1片`).grayText()
}
Blank()
Text('91千卡').grayText()
}
.width('100%')
.padding(CommonConstants.SPACE_6)
}.swipeAction({end: this.deleteButton.bind(this)})
})
}
.width('100%')
}
.width('100%')
.backgroundColor(Color.White)
.borderRadius(CommonConstants.DEFAULT_18)
.padding(CommonConstants.SPACE_12)
}
})
}
.width(CommonConstants.THOUSANDTH_940)
.height('100%')
.margin({top: 10})
}