黑马健康APP实现-食物列表页

当点击食物列表页中的食物，会跳出该食物的详细信息，如热量、碳水、蛋白质、脂肪含量，还可以选择想要添加的数量，点击提交，完成饮食记录的添加。

一、食物列表页结构分析

 

这部分用到了Tabs组件、List组件、头部Builder函数、列表组件。

import { CommonConstants } from '../common/constants/CommonConstants'
import router from '@ohos.router'
import ItemList from '../view/item/ItemList'
@Entry
@Component
struct ItemIndexPage {
  @State message: string = 'Hello World'

  build() {
      Column() {
        //头部导航
        this.Header()
        //列表
        ItemList()
      }
      .width('100%')
      .height('100%')
  }

  @Builder Header(){
    Row(){
      Image($r('app.media.ic_public_back'))
        .width(24)
        .onClick(() => router.back())
      Blank()
      Text('早餐')
        .fontSize(18)
        .fontWeight(CommonConstants.FONT_WEIGHT_600)
    }
    .height(32)
    .width(CommonConstants.THOUSANDTH_940)
  }
}

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct ItemList {
  build() {
    Tabs(){
      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('全部')

      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('主食')

      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('肉蛋奶')
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height('100%')
  }
  @Builder TabContentBuilder(){
    List({space:CommonConstants.SPACE_10}){
      ForEach([1,2,3,4,5,6],(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('91千卡/片').fontSize(14)
                .fontColor($r('app.color.light_gray'))
            }
            Blank()
            Image($r('app.media.ic_public_add_norm_filled'))
              .width(18)
              .fillColor($r('app.color.primary_color'))
          }
          .width('100%')
          .padding(CommonConstants.SPACE_6)
        }
      })
    }
    .width('100%')
    .height('100%')
  }
}

运行截图为：

二、添加饮食记录的页面

Panel

可滑动面板，提供一种轻量的内容展示窗口，方便在不同尺寸中切换。

PanelType枚举说明

名称	描述
Minibar	提供minibar和类全屏展示切换效果。
Foldable	内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。
Temporary	内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。

属性

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
type	PanelType	设置可滑动面板的类型。 默认值：PanelType.Foldable
mode	PanelMode	设置可滑动面板的初始状态。 Minibar类型默认值：PanelMode.Mini；其余类型默认值：PanelMode.Half
dragBar	boolean	设置是否存在dragbar，true表示存在，false表示不存在。 默认值：true
fullHeight	string | number	指定PanelMode.Full状态下的高度。 默认值：当前组件主轴大小减去8vp空白区 说明： 不支持设置百分比。
halfHeight	string | number	指定PanelMode.Half状态下的高度。 默认值：当前组件主轴大小的一半。 说明： 不支持设置百分比。
miniHeight	string | number	指定PanelMode.Mini状态下的高度。 默认值：48 单位：vp 说明： 不支持设置百分比。
show	boolean	当滑动面板弹出时调用。
backgroundMask9+	ResourceColor	指定Panel的背景蒙层。

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct ItemCard {
  @Prop amount:number
  build() {
    Column({space:CommonConstants.SPACE_8}){
      Image($r('app.media.toast'))
        .width(150)
      Row(){
        Text('全麦吐司')
          .fontWeight(CommonConstants.FONT_WEIGHT_600)

      }
      .backgroundColor($r('app.color.light_primary_color'))
      .padding({top:5,bottom:5,left:12,right:12})
      Divider()//下划线
        .width(CommonConstants.THOUSANDTH_940)
        .opacity(0.6)
      Row({space:CommonConstants.SPACE_8}){
        this.NutrientIfo('热量（千卡）',91.0)
        this.NutrientIfo('碳水（克）',15.5)
        this.NutrientIfo('蛋白质（克）',4.4)
        this.NutrientIfo('脂肪（克）',1.3)
      }
      Divider()//下划线
        .width(CommonConstants.THOUSANDTH_940)
        .opacity(0.6)
      Row(){
        Column({space:CommonConstants.SPACE_4}){
          Text(this.amount.toFixed(1))
            .fontSize(50)
            .fontColor($r('app.color.primary_color'))
            .fontWeight(CommonConstants.FONT_WEIGHT_600)
          Divider()
            .color($r('app.color.primary_color'))
        }
        .width(150)
        Text('片')
          .fontColor($r('app.color.light_gray'))
          .fontWeight(CommonConstants.FONT_WEIGHT_600)
      }
    }
  }

  @Builder NutrientIfo(label:string,value:number){
    Column({space:CommonConstants.SPACE_8}){
      Text(label)
        .fontSize(14)
        .fontColor($r('app.color.light_gray'))
      Text(value.toFixed(1)).fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)
    }
  }
}