鸿蒙期末-黑马健康6

食物列表页

---

思维导图:

---

该页面整体为两部分，第一部分为头部顶部工具由Row内Image和Text构成，第二部分为列表栏由Row内Tabs构成。

---

代码实现：

import { CommonConstants } from '../common/constants/CommonConstants'
import router from '@ohos.router'
import ItemList from '../view/item/ItemList'
import ItemPanelHeader from '../view/item/ItemPanelHeader'
import ItemCard from '../view/item/ItemCard'
import NumberKeyboard from '../view/item/NumberKeyboard'
import RecordItem from '../viewmodel/RecordItem'
import RecordType from '../viewmodel/RecordType'
import { RecordTypeEnum, RecordTypes } from '../model/RecordTypeModel'
import RecordService from '../service/RecordService'
@Entry
@Component
struct ItemIndex {
  @State amount:number=1
  @State showPanel:boolean =false
  @State value:string=''//用户按的内容
  @State item:RecordItem=null
  @State type:RecordType=RecordTypes[0]
  @State isFood:boolean=true

  onPanelShow(item:RecordItem){
    this.amount=1
    this.value=''
    this.item=item
    this.showPanel = true
  }

  onPageShow(){
    //1 获取跳转时的参数
    let params:any = router.getParams()
    //2 点击的饮食记录类型
    this.type = params.type
    this.isFood=this.type.id!==RecordTypeEnum.WORKOUT
  }

  build() {
    Column() {
      //1 头部导航
      this.Header()
      //2 列表
      ItemList({showPanel:this.onPanelShow.bind(this),isFood:this.isFood})
        .layoutWeight(1)//设置一个高度
      //3 底部面板
      Panel(this.showPanel) {
        //3.1 顶部日期
        ItemPanelHeader()
        //3.2 记录条目卡片
        if (this.item){
          ItemCard({ amount: this.amount,item:$item })
        }
        //3.3 数字键盘
        NumberKeyboard({ amount: $amount, value: $value })
        //3.4 按钮
        this.PanelButton()
      }
      .mode(PanelMode.Full)//Full 弹窗默认占全屏
      .dragBar(false)//想不想调高度  false 不调
      .backgroundMask($r('app.color.light_gray'))//蒙版颜色
      .backgroundColor(Color.White)
    }
    .width('100%')
    .height('100%')
  }
  @Builder PanelButton() {
    Row({ space: CommonConstants.SPACE_6 }) {
      Button('取消')
        .width(120)
        .backgroundColor($r('app.color.light_gray'))
        .type(ButtonType.Normal)
        .borderRadius(6)
        .onClick(() => this.showPanel = false)
      Button('提交')
        .width(120)
        .backgroundColor($r('app.color.primary_color'))
        .type(ButtonType.Normal)
        .borderRadius(6)
        .onClick(() => {
          //1 持久化保存
          RecordService.insert(this.type.id,this.item.id,this.amount)
            .then(()=>{
              //2 关闭弹窗
              this.showPanel = false
            })
        })

    }.margin({ top: 10 })

  }

  @Builder Header(){
    Row(){
      Image($r('app.media.ic_public_back'))//返回图片
        .width(24)
        .onClick(()=>router.back())
      Blank()
      Text(this.type.name).fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_600)
    }
    .height(32)
    .width(CommonConstants.THOUSANDTH_940)
  }
}

 

---

运行截图：

---

总结

        上述代码主要存在ItemIndex中的页面，用于显示列表主页。