鸿蒙实战案例（3）——黑马健康应用食物列表页的实现

2301_80336707

已于 2024-06-26 08:45:58 修改

阅读量181

点赞数 3

文章标签：鸿蒙 harmonyos

于 2024-06-26 07:54:33 首次发布

本文链接：https://blog.csdn.net/2301_80336707/article/details/139975092

版权

一、预实现图片

二、代码实现

import router from '@ohos.router'
import { CommonConstants } from '../common/constants/CommonConstants'
import ItemCard from '../view/item/ItemCard'
import ItemList from '../view/item/ItemList'
import ItemPanelHeader from '../view/item/ItemPanelHeader'
import NumberKeyboard from '../view/item/NumberKeyboard'
@Entry
@Component
struct ItemIndex {
  @State amount : number = 1
  @State value : string = ''
  @State showPanel: boolean = false

  onPageShow(){
    this.showPanel = true
    this.amount = 1
    this.value = ' '
  }

  build() {
    Column(){
      //1.头部导航
      this.Header()
      //2.列表
      ItemList({showPanel: this.onPageShow.bind(this)})
        .layoutWeight(1)
      //3.底部面板
      Panel(this.showPanel){
        //3.1 顶部日期
        ItemPanelHeader()
        //3.2 记录项卡片
        ItemCard({amount: this.amount})
        //3.3 数字键盘
        NumberKeyboard({amount: $amount,value : $value})
        //3.4 按钮
        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(() => this.showPanel = false)
        }
        .margin({top: 10})
      }
      .mode(PanelMode.Full)
      .dragBar(false)
      .backgroundMask($r('app.color.light_gray'))
      .backgroundColor(Color.White)
    }
    .width('100%')
    .height('100%')
  }

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

运行截图：