基于鸿蒙操作———制作健康App(实现Panel底部面板与数字键盘)

君莫笑几人回

已于 2024-06-27 12:13:40 修改

阅读量506

点赞数 16

文章标签： harmonyos 华为

于 2024-06-18 18:21:15 首次发布

本文链接：https://blog.csdn.net/qq_65992643/article/details/139779817

版权

前言

通过设置完食物记录面板，在食物记录面板的基础上面，如果进行添加食物的数量以及产生的能量，脂肪，碳水，蛋白质等等详细的信息，最后通过取消或者是确定按钮进行更改，了解组件之间的相互搭配以及修饰符的修饰信息。

项目实现效果

项目框架

Panel底部面板

代码

 Panel(this.showPanel){
          // Button('关闭').onClick(()=>this.showPanel = false)
          //3.1顶部日期
          ItemPanelHeader()
          //3.2记录项卡片
          ItemCard({amount:this.amount,})
          //3.3数字键盘
          NumberKeyboard({amount:$amount,value:$value})
          //3.4按钮
          Row(){
            Button('取消')
              .width(120)
              .backgroundColor($r('app.color.light_gray'))
              .type(ButtonType.Normal)
              .borderRadius(6)
              .onClick(()=>this.showPanel = false)
              .margin({right:10})
            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)


// 顶部日期
import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct ItemPanelHeader {
  build() {
    Row(){
      Text('2024年1月25日 早餐')
        .fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_600)
      Image($r('app.media.ic_public_spinner'))
        .width(20)
        .fillColor(Color.Black)
    }
    // 不进行设置宽度就会显示的是，按照文字的长度
    // .width(CommonConstants.THOUSANDTH_940)
  }
}

小结

（1）先是通过在顶部创建showPanel属性类型为布尔型，来控制底部面板的关闭还是跳转；

（2）然后通过ItemPanelHeader()类来添加上面的日期

（3）通过记录卡片来进行对底部面板中的上面显示的内容进行定义；

（4）设置数字面板来进行输入数字然后计算能量脂肪以及蛋白质等等的蕴含的属性是多少。

数字面板项目

代码

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct NumberKeyboard {
  numbers:String[] = ['1','2','3','4','5','6','7','8','9','0','.']
  @Link amount:number
  @Link value:string

  // 将样式通过修饰符号进行提取出来
  @Styles keyBoxStyle(){
    .backgroundColor(Color.White)
    .borderRadius(8)
    .height(60)

  }

  build() {
    Grid(){
      ForEach(this.numbers,num=>{
        GridItem(){
          Text(num).fontSize(20).fontWeight(CommonConstants.FONT_WEIGHT_900)
        }
        .keyBoxStyle()
        .onClick(()=>this.clickNumber(num))

      })
      GridItem(){
        Text('删除').fontSize(20).fontWeight(CommonConstants.FONT_WEIGHT_900)
      }
      .keyBoxStyle()
      .onClick(()=>this.clickDelete())
    }
    .width('100%')
    // 设置高度
    .height(280)
    .backgroundColor($r('app.color.index_page_background'))
    .columnsTemplate('1fr 1fr 1fr')
    // 设置行边距
    .columnsGap(8)
    // 设置列边距
    .rowsGap(8)
    .padding(8)
    .margin(10)
  }
  // 创建添加和删除的按钮属性
  clickNumber(num:string){
    //1.拼接用户输入的内容
    let val= this.value+num
    //2.校验输入的格式是否正确
    let firstIndex = val.indexOf('.')
    let lastIndex = val.lastIndexOf('.')
    if(firstIndex != lastIndex || (lastIndex != -1 && lastIndex < val.length-2)){
      // 非法输入
      return
    }
    //3.将字符串转为数值
    let amount = this.parseFloat(val)
    //4.保存
    if(amount >= 999.9){
      this.amount = 999.0
      this.value = '999'
    }else{
      this.amount = amount
      this.value = val
    }
  }

  clickDelete(){
    if(this.value.length<=0){
      this.value = ''
      this.amount = 0
      return
    }else {
      this.value = this.value.substring(0,this.value.length - 1)
      this.amount = this.parseFloat(this.value)
    }
  }

  parseFloat(str:string){
    if(!str){
      return 0
    }
    if(str.endsWith('.')){
      str = str.substring(0,str.length-1)
    }
    return parseFloat(str)
  }
}

小结

以上是数字面板的代码：

（1）开始通过定义数组来进行对数字面板中的数字以及小数点进行收纳，为以后进行使用；

（2）创建amount以及value属性用来控制数字的范围参数；

（3）通过@Styles来进行提取属性参数；

（4）Grid(){}属性指的是创建数字面板的命令，其中包含了columnsGap和rowsGap属性，分别用来控制列与列之间的间距以及行与行之间的间距，columnsTemplate和rowsTemplate分别代表的当前网格布局列的数量以及当前网格布局行的数量等等。

（5）通过foreach循环对GridItem()中number数组进行循环调用添加；

（6）然后通过GridItem()单独对‘删除’键进行添加；

知识快递站

1.本小节学习的组件分别是panel和Grid，Grid(){}属性指的是创建数字面板的命令，其中包含了columnsGap和rowsGap属性，分别用来控制列与列之间的间距以及行与行之间的间距，columnsTemplate和rowsTemplate分别代表的当前网格布局列的数量以及当前网格布局行的数量等等；

2.foreach循环的使用，如果存在数组属性时，通过循环进行属性的持续添加；

3.@styles修饰器对参数的读取，然后封装后进行调用，大大简便了代码的重复率以及冗余。