鸿蒙项目—黑马健康应用（3）

已于 2024-06-30 23:30:05 修改
阅读量385 收藏 8
点赞数 4
文章标签： 鸿蒙
于 2024-06-26 02:27:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79555325/article/details/139974177
版权

目录

一、食物列表

1、食物列表页面结构：

食物列表逻辑结构

运行效果：

代码如下：

2、底部Panel

Panel结构

​编辑

关键技术：

Panel组件

运行效果：

代码如下：

3、数字键盘

关键技术：Grid组件

运行效果：

代码如下：

二、遇到问题

三、总结

一、食物列表

1、食物列表页面结构：

食物列表逻辑结构

标题结构

图片是一个返回箭头，点击时回退上个页面。Text定义选择记录项目是早中晚餐。

标题实现代码

@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)
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height(32)
  }

运行效果：

代码如下：

//ItemIndex.ets
import { CommonConstants } from '../common/constants/CommonConstants'
import ItemList from '../view/item/ItemList'
import router from '@ohos.router'

@Extend(Button) function panelButtonStyle(){
  .width(120)
  .type(ButtonType.Normal)
  .borderRadius(6)
}

@Entry
@Component
struct ItemIndex {


  build() {
    Column() {
      // 1.头部导航
      this.Header()
      // 2.列表
      ItemList()
        .layoutWeight(1)
      // 3.底部面板

    }
    .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)
  }
}

//ItemList.ets

import { CommonConstants } from '../../common/constants/CommonConstants'


@Component
export default struct ItemList {


  build() {
    Tabs() {
      TabContent() {
        this.TabContentBuilder()
      }
      .tabBar('全部')

      TabContent() {
        this.TabContentBuilder()
      }
      .tabBar('主食')

      TabContent() {
        this.TabContentBuilder()
      }
      .tabBar('肉蛋奶')
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height('100%')

  }

  @Builder TabContentBuilder() {
    List({ space: CommonConstants.SPACE_10 }) {
      ForEach([1,2,3,4,5,6], (item) => {
        ListItem() {
          Row({ space: CommonConstants.SPACE_6 }) {
            Image($r('app.media.toast')).width(50)
            Column({ space: CommonConstants.SPACE_4 }) {
              Text('全麦吐司').fontWeight(CommonConstants.FONT_WEIGHT_500)
              Text('91千卡/片').fontSize(14).fontColor($r('app.color.light_gray'))
            }

            Blank()
            Image($r('app.media.ic_public_add_norm_filled'))
              .width(18)
              .fillColor($r('app.color.primary_color'))
          }
          .width('100%')
          .padding(CommonConstants.SPACE_6)
        }

      })
    }
    .width('100%')
    .height('100%')
  }
}

2、底部Panel

Panel结构

关键技术：

Panel组件

底部弹出面板，列式布局,在食物列表页设置点击事件，当点击时弹出来

  • onPanelShow 方法用于控制面板的显示状态，通过修改 showPanel 状态来实现面板的展开和隐藏。
  • .mode(PanelMode.Full) 指定了面板的模式为全屏模式
    自定义面板行为：
  • .dragBar(false) 禁用了面板的拖动条，.backgroundMask 和 .backgroundColor 分别设置了面板的遮罩颜色和背景颜色。
    布局权重
  • .layoutWeight(1) 确保 ItemList 组件填满可用的垂直空间。

运行效果：

代码如下：


import { CommonConstants } from '../common/constants/CommonConstants'
import ItemList from '../view/item/ItemList'
import router from '@ohos.router'
import ItemPanelHeader from '../view/item/ItemPanelHeader'
import ItemCard from '../view/item/ItemCard'


@Entry
@Component
struct ItemIndex {
  @State amount: number = 1
  @State showPanel: boolean = false

  onPanelShow() {
    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.数字键盘

        // 3.4.按钮

      }
      .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)
  }
}


//ItemCard.ets
import { CommonConstants } from '../../common/constants/CommonConstants'

@Component
export default struct ItemCard {

  @Prop amount: number


  build() {
    Column({space: CommonConstants.SPACE_8}){
      // 1.图片
      Image($r('app.media.toast')).width(150)
      // 2.名称
      Row(){
        Text('全麦吐司').fontWeight(CommonConstants.FONT_WEIGHT_700)
      }
      .backgroundColor($r('app.color.lightest_primary_color'))
      .padding({top: 5, bottom: 5, left: 12, right: 12})
      Divider().width(CommonConstants.THOUSANDTH_940).opacity(0.6)
      // 3.营养素
      Row({space: CommonConstants.SPACE_8}){
        this.NutrientInfo('热量（千卡）',91.0)
        this.NutrientInfo('碳水（克）',15.5)
        this.NutrientInfo('蛋白质（克）',4.4)
        this.NutrientInfo('脂肪（克）',1.3)
      }
      Divider().width(CommonConstants.THOUSANDTH_940).opacity(0.6)
      // 4.数量
      Row(){
        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.primary_color'))
        }
        .width(150)
        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).toFixed(1)).fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)
    }
  }
}

3、数字键盘

关键技术：Grid组件

  • columnsTemplate('1fr 1fr 1fr') 定义了网格的列宽，使用 fr 单位来表示相对宽度，使得每列宽度自适应。
  • columnsGap(8) 和 rowsGap(8) 设置了列与列之间、行与行之间的间距。
  • GridItem() 用于定义网格中的单个项，可以包含文本、按钮或其他组件。
  • .onClick(() => this.clickNumber(num)) 绑定了点击事件，当用户点击某个数字或操作按钮时触发。
  • ForEach(this.numbers, num => {...}) 用于遍历数字数组，并为每个数字创建一个网格项。
  • 使用 @Link 装饰器将 NumberKeyboard 组件的状态与父组件的状态链接起来，实现双向数据绑定。
  • 在 clickNumber 方法中，实现了对用户输入的验证逻辑，确保输入的数字格式正确，并且不超过最大值。

运行效果：

代码如下：

        // 3.3.数字键盘
        NumberKeyboard({amount:$amount,value:$value})
        // 3.4.按钮
        Row({space: CommonConstants.SPACE_6}){
          Button('取消')
            .width(120)
            .type(ButtonType.Normal)
            .borderRadius(6)
            .backgroundColor($r('app.color.light_gray'))
            .onClick(() => this.showPanel = false)
          Button('提交')
            .width(120)
            .type(ButtonType.Normal)
            .borderRadius(6)
            .backgroundColor($r('app.color.primary_color'))
            .onClick(() => this.showPanel = false)
        }
        .margin({top: 10})
      }
      


//NumberKeyboard.ets
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({top: 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
    }
    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：弹出面板未正确弹出

        解决方法：面板并不占用高度，浮在表面，，要求它所在的容器组件高度固定，需在列表中添加权重（1）

        问题2：如何实现数字输入与页面元素改变的联动

        解决方法：①定义状态变量来存储当前的输入值。在 NumberKeyboard 组件中，使用 @Link 装饰器将 amount 和 value 与父组件的状态进行双向绑定。②在 NumberKeyboard 组件中，为每个按键和删除操作提供事件处理函数，如 clickNumber 和 clickDelete。③当用户点击数字或删除按钮时，更新 value 字符串，并重新计算 amount 数值。使用 parseFloat 函数来确保数值格式正确。④确保 NumberKeyboard 组件的 amount 和 value 属性与父组件中的状态是绑定的，这样任何更改都会同步到父组件。

三、总结

        通过本次开发，我们深入理解了食物列表页面的设计和实现，掌握了关键技术的应用，如列表组件、Panel组件和Grid组件。Panel组件提供了一个可展开和收起的底部面板，用于展示额外的操作或信息。在食物列表页面中，Panel组件可用于编辑、删除食物项或进行其他高级操作。Grid组件实现了数字键盘的网格布局，允许用户输入数量。通过Grid组件，我们创建了一个直观且响应式的用户界面，便于用户进行数字输入。

2301_79555325
关注
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程2
05-16
《全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战》是一套针对初学者精心设计的鸿蒙操作系统开发教程。本教程旨在帮助没有编程基础的学员快速掌握HarmonyOS的开发技能，通过丰富的实例和清晰的讲解，...
黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程，一套精通鸿蒙应用开发41-50
最新发布
06-29
黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程，一套精通鸿蒙应用开发41-50
鸿蒙案例-食物列表页和底部Panel的实现
weixin_67913109的博客
06-22 1078
食物列表页是健康和饮食管理应用中的一个关键功能，它允许用户浏览、搜索和选择不同的食物项来记录他们的饮食习惯。食物列表以列表形式展示食物名称、图片和简要信息。点击食物项后，展示详细的营养信息，包括热量、脂肪、碳水化合物、蛋白质等。食物列表页是用户与饮食管理应用交互的主要入口之一，它的设计和功能对于提供流畅的用户体验至关重要。通过这些功能，用户可以轻松地记录和分析他们的饮食习惯，从而更好地管理自己的健康和营养摄入。食物列表页它的设计和功能对于提供流畅的用户体验至关重要。
鸿蒙项目—黑马健康应用（1）
2301_79555325的博客
06-25 929
本项目综合运用本学期所学内容及个人自学知识，使用Harmony0s 4.0及以上版本开发的一款具有实用性和创新性的移动应用软件。本项目是一款关于记录饮食/运动的健康应用；在登录页面，用户点击同意协议弹窗后可跳转到饮食记录页；记录页给出推荐的摄入热量，并记录每天饮食摄入热量和运动消耗热量，在一日三餐列表中和运动列表中可添加相应的食物内容和运动内容，跳转到食物/运动列表页面；在食物/运动列表页中选择食物类型和数量可计算出摄入热量，通过关系型数据库存储信息，并展示到统计页面中。
鸿蒙项目—黑马健康应用（5）
2301_79555325的博客
06-26 331
目录 一、数据持久化 1、通用DB工具 2、饮食记录业务开发 3、数据持久化和页面交互 二、遇到问题 三、总结 一、数据持久化 1、通用DB工具 关键技术：关系型数据库 关系型数据库存储用户数据，首先要进行数据库的创建，并提供基本的增、删、查、改接口。直接调用ArkTs提供的数据操作接口，它就会基于SQLite引擎对于数据库文件的读写操作，实现数据持久化。具体过程如下：1.初始化数据库表、2.增this.rdbStore.insert(this.tableName
鸿蒙实战项目-黑马健康应用开发日志二
m0_73823294的博客
06-25 1591
综合运用本学期所学内容及个人自学知识，使用HarmonyOS4.0及以上版本开发一款具有实用性和创新 性的移动应用软件。一、项目目标综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新 性的移动应用软件。二、项目介绍黑马健康是一款功能全面的健康管理应用，它通过提供个性化的饮食记录、健康评估等功能，帮助用户轻松管理健康，改善饮食和生活习惯。无论是需要减肥塑形，还是关注日常营养摄入，黑马健康都能为用户提供定制化的服务，让健康管理变得简单而有效。
鸿蒙【黑马健康App】
pacong的博客
03-21 748
/ 记录的数据 // 注意和数据库字段名字不一样，所以还需要定义一个，数据库字段和数据记录数据相对应的类ColumnInfo export default class RecordPO {/*** 记录id*/ id?* 饮食记录类型* 记录中的食物或运动信息* 食物数量或运动时长，如果是运动信息则无* 记录的日期LONG,DOUBLE,STRING,BLOB。
鸿蒙期末个人项目“黑马健康”——项目阶段三：饮食记录
2301_79814091的博客
06-12 1030
黑马健康软件是一款基于全民健康的软件，主要有三个页面组成，分别是欢迎页面，统计记录页面，食物列表页面。
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
05-16
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
黑马HarmonyOS-NEXT星河版实战-课程网盘链接提取码下载 .txt
06-03
"黑马HarmonyOS-NEXT星河版实战"课程旨在帮助学员深入了解HarmonyOS-NEXT星河版操作系统的开发和实际应用。学员将学习操作系统原理、应用开发技巧和界面设计，通过实战项目提升技能。课程注重实践与理论相结合，为...
黑马程序员黑马健康实战项目（作者自用项目包）
06-22
【标题】中的“黑马程序员黑马健康实战项目”表明...这个实战项目不仅提供了技术知识的学习，还有助于提高项目管理、团队协作和问题解决的软技能，对于想要在鸿蒙OS平台上开发健康应用的开发者来说，是一个宝贵的资源。
鸿蒙期末个人项目“黑马健康”——项目阶段一：欢迎页面
2301_79814091的博客
06-11 928
黑马健康——期末个人项目
面试宝典-鸿蒙应用，一款面向前端程序员的刷题应用
11-21
【标签】中提到的“harmonyos”和“harmonyos”指的是华为自主研发的鸿蒙操作系统，这是当前全球关注的焦点，因为它为开发者提供了跨平台的应用开发能力，尤其适合物联网设备。"求职面试"表明了应用的核心功能，即为...
基于Java的黑马点评项目设计源码
05-23
黑马点评是一个基于Java开发的点评项目，包含83个文件，其中包括74个Java源文件、4个XML文件、1个Git忽略文件、1个Markdown文件、1个YAML文件、1个SQL文件和1个Lua文件。该项目基于b站黑马点评项目，额外添加了一些...
全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程
02-11
ArkTS 是一种专为鸿蒙 HarmonyOS 开发的应用程序编程语言，它基于 JavaScript 和 TypeScript 的语法特点，融合了面向对象编程和函数式编程的优点，使得开发者能够更加高效地开发应用。 - **核心概念**：理解 ArkTS ...
黑马SSH整合CRM项目
10-20
这个“黑马SSH整合CRM项目”是针对客户关系管理（CRM）系统的一种实现，旨在提供高效、灵活的客户管理和业务流程控制。 **Struts2** 是一个基于MVC设计模式的Web应用框架，它负责处理HTTP请求，并将这些请求映射到...
黑马刘龙彬老师主讲的大事件项目
03-06
黑马刘龙彬老师主讲的大事件项目黑马刘龙彬老师主讲的大事件项目黑马刘龙彬老师主讲的大事件项目黑马刘龙彬老师主讲的大事件项目黑马刘龙彬老师主讲的大事件项目黑马刘龙彬老师主讲的大事件项目黑马刘龙彬老师主讲的...
鸿蒙期末个人项目“黑马健康”——项目阶段五：多设备响应式布局
2301_79814091的博客
06-19 300
黑马健康软件是一款基于全民健康的软件，主要有三个页面组成，分别是欢迎页面，统计记录页面，食物列表页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值