食物列表页

一、列表页UI设计

页面的大概布局

组件在各部分的布局为

代码为

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
  onPanelShow(){
    this.amount=1
    this.value=''
this.showPanel=true
  }
  build() {
      Column() {
       //1.头部导航
       this.Header()


        //2.列表
       ItemList({showPanel:this.onPanelShow.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(24)
        .onClick(()=> router.back())
        Blank()
      Text('早餐').fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_600)
    }
    .width(CommonConstants.THOUSANDTH_940)
      .height(32)
    }
}

1. 定义build方法：这是组件的主要构建函数，用于创建组件的UI布局。在build中创建一个Column布局：Header：调用Header构建器函数，创建头部导航。ItemList：创建一个列表组件，使用onPanelShow方法作为面板显示的回调。Panel：创建一个面板组件，条件性展示基于showPanel状态。

2. 运行结果

、