黑马健康App

最新推荐文章于 2024-06-25 22:56:16 发布
最新推荐文章于 2024-06-25 22:56:16 发布
阅读量356 收藏 6
点赞数 3
文章标签： 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73665830/article/details/139865482
版权

五.食物列表页

（一）列表页UI设计

1.功能分析

当用户点击饮食记录里的早、午、晚餐的分组时就会跳转到食物列表页，从中添加食物，点击相应食物时会弹出相应面板记录数据。


2.布局分析

3.代码实现

（1）头部导航
@Entry
@Component
struct ItemIndex {
  build() {
    Column() {
      // 1.头部导航
      this.Header()
    }
    .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)
  }
}

previewer:

(2)列表

每个tab项都类似所以可以将其中的list封装起来调用

/*ItemList*/
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(items: RecordItem[]) {
    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'))
            }.alignItems(HorizontalAlign.Start)

            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%')
  }
}

/*ItemIndex*/
import ItemList from '../view/item/ItemList'
@Entry
@Component
struct ItemIndex {
  build() {
    Column() {
      // 1.头部导航
      this.Header()
      // 2.头部导航
      ItemList()
    }
    .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)
  }
}

previewer:

(二)底部Panel

1.布局分析

自定义生成键盘需要用到Grid组件
底部面板需要用到Panel组件


2.代码实现

（1）面板简单实现

问题：点击时没有出现底部面板
原因及解决方法：面板不占高度，是浮在表面的，它要求它所在的容器的高度与容器里面元素的高度是固定的，但这里面list的高度不固定（动态的），导致底部面板被挤到对下面去了（无法展示出来）。用.layoutWeight(1)去固定list的高度即可解决。

/*ItemIndex*/
import { CommonConstants } from '../common/constants/CommonConstants'
import ItemList from '../view/item/ItemList'
/**
 * 条目
 */
@Entry
@Component
struct ItemIndex {
  @State showPanel: boolean = false

  build() {
    Column() {
      // 1.头部导航
      this.Header()
      // 2.列表
      ItemList({ showPanel: this.onPanelShow.bind(this)})
        .layoutWeight(1)
      // 3.底部面板
      Panel(this.showPanel) {
          Button('关闭').onClick(()=>this.showPanel=false)
              }
      .mode(PanelMode.Full)//默认完全展出面板
      .dragBar(false)//设置可不可以上下拖动顶部边框改变面板大小（这里不可以）
      .backgroundMask($r('app.color.light_gray'))//蒙板颜色
      .backgroundColor(Color.White)
    }
    .width('100%')
    .height('100%')
  }
}

/*ItemList*/
/**
 * 条目列表——食物列表
 */
@Component
export default struct ItemList {
  showPanel: (item: RecordItem) => void
  @Builder TabContentBuilder(items: RecordItem[]) {
    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'))
            }.alignItems(HorizontalAlign.Start)

            Blank()
            Image($r('app.media.ic_public_add_norm_filled'))
              .width(18)
              .fillColor($r('app.color.primary_color'))
          }
          .width('100%')
          .padding(CommonConstants.SPACE_6)
        }
        .onClick(() => this.showPanel(item))
      })
    }
    .width('100%')
    .height('100%')
  }
}

previewer:

（2）顶部日期
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)
    }
  }
}

previewer:

（3）记录项卡片
/*ItemCard*/
import { CommonConstants } from '../../common/constants/CommonConstants'
import RecordItem from '../../viewmodel/RecordItem'
/**
 * 记录项卡片
 */
@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)//下划线，opacity调整透明度
      // 3.营养素
      Row({space: CommonConstants.SPACE_8}){
        this.NutrientInfo( '热量(千卡)',  91.0)
        if(this.item.id < 10000){
          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)//这里toFixed(1)的作用是将value转成一位小数
    }
  }
}

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

  build() {
    Column() {
      // 1.头部导航
      this.Header()
      // 2.列表
      ItemList({ showPanel: this.onPanelShow.bind(this)})
        .layoutWeight(1)
      // 3.底部面板
      Panel(this.showPanel) {
        // 3.1.顶部日期
        ItemPanelHeader()
        // 3.2.记录项卡片
        if(this.item){
          ItemCard({amount: this.amount})
        }
      }
      .mode(PanelMode.Full)//默认完全展出面板
      .dragBar(false)//设置可不可以上下拖动顶部边框改变面板大小（这里不可以）
      .backgroundMask($r('app.color.light_gray'))//蒙板颜色
      .backgroundColor(Color.White)
    }
    .width('100%')
    .height('100%')
  }
}

previewer:


 

（4）数字键盘

需要用到组件Grid，是一种网格容器。

简单实现：
 
/*NumberKeyboard*/
import { CommonConstants } from '../../common/constants/CommonConstants'
/**
 * 数字键盘
 */
@Component
export default struct NumberKeyboard {
  numbers: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.']

  @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()
            })
      GridItem(){
        Text('删除').fontSize(20).fontWeight(CommonConstants.FONT_WEIGHT_900)
      }
      .keyBoxStyle()
         }
    .width('100%')
    .height(280)
    .backgroundColor($r('app.color.index_page_background'))
    .columnsTemplate('1fr 1fr 1fr')//网格布局（三列宽度1：1：1）
    .columnsGap(8)//网格行间距
    .rowsGap(8)//网格列间距
    .padding(8)
    .margin({top: 10})//外边距
  }
}

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

  build() {
    Column() {
      // 1.头部导航
      this.Header()
      // 2.列表
      ItemList({ showPanel: this.onPanelShow.bind(this)})
        .layoutWeight(1)
      // 3.底部面板
      Panel(this.showPanel) {
        // 3.1.顶部日期
        ItemPanelHeader()
        // 3.2.记录项卡片
        if(this.item){
          ItemCard({amount: this.amount})
        }
        // 3.3.数字键盘
        NumberKeyboard()
      }
      .mode(PanelMode.Full)//默认完全展出面板
      .dragBar(false)//设置可不可以上下拖动顶部边框改变面板大小（这里不可以）
      .backgroundMask($r('app.color.light_gray'))//蒙板颜色
      .backgroundColor(Color.White)
    }
    .width('100%')
    .height('100%')
  }
}

previewer:

传值：
/*ItemIndex*/
@Entry
@Component
struct ItemIndex {
  @State amount: number = 1//键盘输出内容
  @State value: string = ''//用户键盘输入内容
  @State showPanel: boolean = false

  onPanelShow(item: RecordItem) {
    this.amount = 1
    this.value = ''
    this.item = item
    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.记录项卡片
        if(this.item){
          ItemCard({amount: this.amount})
        }
        // 3.3.数字键盘
        NumberKeyboard({amount: $amount, value: $value})
      }
      .mode(PanelMode.Full)//默认完全展出面板
      .dragBar(false)//设置可不可以上下拖动顶部边框改变面板大小（这里不可以）
      .backgroundMask($r('app.color.light_gray'))//蒙板颜色
      .backgroundColor(Color.White)
    }
    .width('100%')
    .height('100%')
  }
}


/*NumberKeyboard*/
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')//网格布局（三列宽度1：1：1）
    .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('.')//返回最后一次出现'.'的角标
    //如果出现多于一次小数点 或者 在有小数点的情况下等于或超过了2位小数 就算非法输入
    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//避免出现NaN
    }
    //如果字符串最后一位是小数点就将它去除
    if(str.endsWith('.')){
      str = str.substring(0, str.length - 1)
    }
    return parseFloat(str)
  }
}

/*ItemCard*/
  //营养素信息
  @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)//这里toFixed(1)的作用是将value转成一位小数
    }
  }

previewer:

（4）按钮（取消，提交）

提交按钮暂不做处理

/*ItemIndex*/
// 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})

previewer:


 

星落海啊
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app黑马优购
06-17
【uni-app黑马优购】项目详解 uni-app是一款由DCloud(数字天堂)开发的多端统一开发框架，它允许开发者使用一套代码实现跨平台应用的开发，包括iOS、Android、Web（H5）、微信小程序、支付宝小程序、百度小程序、QQ...
uni-app前端黑马商城讲解文档
09-02
《uni-app前端黑马商城讲解文档》是一份专为开发者准备的详细教程，旨在深入解析uni-app框架在构建黑马商城项目中的应用。uni-app是一个多端开发框架，它允许开发者使用一套代码实现跨平台的移动应用开发，覆盖了iOS...
鸿蒙【黑马健康App】
pacong的博客
03-21 693
/ 记录的数据 // 注意和数据库字段名字不一样，所以还需要定义一个，数据库字段和数据记录数据相对应的类ColumnInfo export default class RecordPO {/*** 记录id*/ id?* 饮食记录类型* 记录中的食物或运动信息* 食物数量或运动时长，如果是运动信息则无* 记录的日期LONG,DOUBLE,STRING,BLOB。
黑马健康APP实现
m0_73667781的博客
06-22 138
因为要有用户首选项来保存，所以在进入页面时加载用户首选项，次数来判断用户是否同意协议。若没有同意过，则弹出用户隐私协议弹窗，再次询问用户是否同意，若同意，则保存首选项并进入首页，反之，推出APP。单纯添加完内容后，文字与文字之间的距离太近，可以在Column容器中添加space，增大间距。其次，第二张图片和下面的文本应该在底部，第一张图片处于一种居中的位置，设置布局权重.layoutWeight(1)。必须有成员变量controller,用来控制弹窗的状态，不用初始化，当我们需要使用时再初始化。
开发鸿蒙项目黑马健康APP的系列随笔
m0_74217039的博客
06-17 773
今天主要制作了程序的欢迎界面，期间主要设计一下几个知识点：一个是ArkUI组件中的行容器（Row）和列容器（column），还包括图片的插入及相关的页面布局的细节等。首先来向大家展示一下我欢迎页面的最终效果图吧：我先来说一下我设计这个页面的整体思路：首先从整体上来讲肯定是一个列式容器，在这个列式容器中，上面“用黑马减更多”的图标为一部分，“黑马健康”的图标为第二部分，剩下的三行文字每行文字又各占一个部分。
黑马健康APP期末项目1
m0_73739570的博客
06-23 1677
综合运用本学期所学内容及个人自学知识，使用HarmonyOS4.0及以上版本开发一款具有实用性和创新性的移动应用软件。黑马健康应用程序是一个综合性的健康监控和管理工具，它具备一系列定制化功能，旨在帮助用户轻松地跟踪和管理自己的健康状况。通过个性化的饮食追踪记录和全面的健康评估机制，该应用能够根据用户的具体情况提供针对性的建议和指导。无论是对于追求体型改善和体重管理的用户，还是那些希望优化日常饮食以满足营养需求的用户，黑马健康都能提供一套量身打造的解决方案。
鸿蒙开发———黑马健康app（UI首页开发）
m0_73970044的博客
06-21 240
通过 @Link 或 @Prop 装饰器将父组件或外部传入的数据绑定到子组件。底部导航栏，通常使用 Tabs 组件，允许用户在不同的功能页面间切换。router 模块来处理页面间的导航和跳转，例如 router.pushUrl 或 router.replaceUrl。利用生命周期方法，如 aboutToAppear 和 aboutToDisappear，来处理页面显示和隐藏时的逻辑。使用 List 或 ForEach 组件遍历项目列表，为每个项目项创建 ListItem的组件。// 1.头部搜索栏。
黑马健康App（一）
weixin_73039670的博客
06-25 278
综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新性的移动应用软件。以上就是今天要写的内容，本文仅仅简单介绍了该app的两个简单页，让我们期待后续的功能的开发。
黑马健康App（五）
weixin_73039670的博客
06-25 362
综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新性的移动应用软件。以上就是今天要写的内容，本文简单介绍了该app的panel的小功能，让我们期待后续的功能的开发。
黑马健康App（三）
weixin_73039670的博客
06-25 219
综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新性的移动应用软件。以上就是今天要写的内容，本文简单介绍了该app饮食记录页的两个小功能，让我们期待后续的功能的开发。
黑马健康App（四）
weixin_73039670的博客
06-25 258
综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新性的移动应用软件。
Android studio仿美团app
03-03
【Android Studio 仿美团App开发详解】 在移动应用开发领域，Android Studio是Google推出的一款强大的集成开发环境（IDE），广泛用于构建Android应用程序。本项目旨在通过Android Studio来模仿美团App的功能，包括...
java黑马学习笔记
02-21
是我从黑马资源中抓出来的每天教师上课的笔记,对于基础学习者帮助还是很大的,毕竟视频太多了,不可能全部看完,但是笔记就不一样.
黑马程序员Javase笔记
01-18
"黑马程序员Javase笔记"是一个自学者在学习黑马程序员提供的Java全套课程过程中整理的笔记，主要涵盖了Java Standard Edition (Javase) 的核心内容。下面将详细讨论其中的关键知识点。 首先，DOS命令是操作系统中的...
Source Insight 4.0.zip
08-14
Source Insight 4.0.zip
基础会计教学课件第四章账户与复式记账.pptx
最新发布
08-14
基础会计教学课件第四章账户与复式记账.pptx
L型热电偶和U型热电偶电压温度双向转换器
08-14
L型热电偶和U型热电偶电压温度双向转换器
apache-tomcat-9.0.93安装包（含windows和linux版本）.zip
08-14
apache-tomcat-9.0.93安装包（含windows和linux版本）.zip包含如下内容： apache-tomcat-9.0.93-windows-x64.zip； apache-tomcat-9.0.93-windows-x86.zip； apache-tomcat-9.0.93.exe； apache-tomcat-9.0.93.tar.gz； apache-tomcat-9.0.93.zip；
黑马传智健康完整代码
10-31
很抱歉，根据提供的引用内容，无法回答关于黑马传智健康完整代码的问题。引用内容提到的是传智健康管理系统，是一款应用于健康管理机构的业务系统，实现健康管理机构工作内容可视化、患者管理专业化、健康评估数字化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值