开发鸿蒙项目黑马健康APP的系列随笔-CSDN博客

本文链接：https://blog.csdn.net/m0_74217039/article/details/139975696

一、工作主要介绍

今天的主要工作是对实物列表的底部弹窗进行初步的界面设计和弹窗逻辑的功能实现，确保用户在点击食物列表中的加号后能顺利弹出底部弹窗。

二、运行效果及主要设计思路的介绍

先看一下最终的运行效果截图：

由上面的最终效果图可以看出，这次我在设计布局时还是一行列容器的嵌套为主，当然在热量等其他营养素的上下两部分各有一个分割线，这里用到了一个新的UI组件，后面会详细介绍，其余的在界面布局方面都和前面是一样的，这里就不再详细赘述了，同时在进行弹窗设计时，也是用了新的组件，这点也会在后面详细说明。

三、在设计过程中遇到的一些问题

（1）关于在这界面设计时的分割线：

在进行界面设计时，为了能让用户拥有更加清晰的视觉体验，我采用了一些分割线，这里采用的是鸿蒙开发当中的Divider组件，这个组件就可以解决弹窗内部的分割线问题。

（2）关于底部弹窗的设计

关于这个底部弹窗，这里我采用的是一种panel组件，这个组件就可以解决是鸿蒙当中的一个可滑动的窗口，编辑者可以根据自身需求对窗口的样式做出不同的设计。起初我在设计时遇到了点击应用中的加号按钮弹窗无法弹出的问题，经过我的学习了解到panel面板要求它所在的容器的高度以及容器内其它元素的高度必须是固定的，这就找到了问题所在，起初在设计时Itemlist的高度是动态的，这里我们将itemlist的布局权重设为1,确定其高度就可以了。

四、最终实验代码

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.lightest_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.NutrientInfo('热量（千卡）',91.0)
        this.NutrientInfo('碳水（克）',15.0)
        this.NutrientInfo('蛋白质（克）',4.4)
        this.NutrientInfo('脂肪（克）',1.3)
      }
      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.light_primary_color'))

      }

      Text('片')
        .fontColor($r('app.color.light_gray'))
        .fontWeight(CommonConstants.FONT_WEIGHT_600)

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

    }
  }
}