首页 > 其他分享 >鸿蒙案例-食物列表页和底部Panel的实现

鸿蒙案例-食物列表页和底部Panel的实现

时间：2024-06-22 12:32:03浏览次数：24  
标签：鸿蒙 SPACE color Text app CommonConstants 列表 width Panel

前言

    食物列表页是健康和饮食管理应用中的一个关键功能，它允许用户浏览、搜索和选择不同的食物项来记录他们的饮食习惯。食物列表以列表形式展示食物名称、图片和简要信息。点击食物项后，展示详细的营养信息，包括热量、脂肪、碳水化合物、蛋白质等。

    食物列表页是用户与饮食管理应用交互的主要入口之一，它的设计和功能对于提供流畅的用户体验至关重要。通过这些功能，用户可以轻松地记录和分析他们的饮食习惯，从而更好地管理自己的健康和营养摄入。

列表UI设计

实现过程

1.ItemIndex组件

1.头部导航：首先是一个返回图片，设置好返回图片的宽，然后设置back实现点击返回的效果。空格处用Blank组件。

@Builder Header(){
    Row(){
      Image($r('app.media.ic_public_back'))
        .width(24)
        .onClick(()=>router.back()) //返回
      Blank()
      Text('早餐').fontWeight(CommonConstants.FONT_WEIGHT_600).fontSize(18)
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height(32)
  }

2.列表：因为列表内容过多，所以需创建Item组件目录，在创建ItemList组件，并进行调用

 ItemList({showPanel:this.onPanelShow.bind(this)})
      .layoutWeight(1)

3.底部面板：使用了Panel可滑动面板，提供一种轻量的内容展示窗口，方便在不同尺寸中进行切换。设置时展示全部，设置成不可调整高度

 Panel(this.showPanel){
}.mode(PanelMode.Full)
      .dragBar(false)  
      .backgroundMask($r('app.color.light_gray')) 
      .backgroundColor(Color.White)

3.1.顶部日期：创建ItemPanelHeader组件并进行调用

 ItemPanelHeader()

3.2.记录项卡片：创建ItemCard组件并进行调用

ItemCard({amount:this.amount})

2.ItemList组件

1.利用Tabs容器创建多个项

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

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

      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('果蔬')

      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('肉蛋奶')

      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('其它')
    }

2.然后利用list列表实现列循环

List({space:CommonConstants.SPACE_6}){
      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)
        }
        .onClick(()=>this.showPanel())
      })
    }

3.ItemPanelHeader组件

顶部日期主要是文字和图片

 Row(){
      Text('2024年1月25日 早餐')
        .fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_600)
      Image($r('app.media.ic_public_spinner'))
        .width(20)
        .fillColor(Color.Black)
    }

4.ItemCard组件

1.图片

Image($r('app.media.toast')).width(150)

2.名称：其中Divider分割组件，实现下划线效果

 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.营养素：创建Builder记录营养素的信息

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

代码实现

1.ItemIndex.ets

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'
@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){//Panel可滑动面板
        //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('早餐').fontWeight(CommonConstants.FONT_WEIGHT_600).fontSize(18)
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height(32)
  }
}

2.ItemList.ets

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct ItemList {

  showPanel:()=>void

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

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

      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('果蔬')

      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('肉蛋奶')

      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('其它')
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height('100%')
  }

  @Builder TabContentBuilder(){
    List({space:CommonConstants.SPACE_6}){
      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)
        }
        .onClick(()=>this.showPanel())
      })
    }
    .width('100%')
    .height('100%')
  }
}

3.ItemPanelHeader.ets

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

4.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) //Divider分割组件，实现下划线效果
      //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)
        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)
    }
  }
}

页面效果

总结

    食物列表页它的设计和功能对于提供流畅的用户体验至关重要。通过这些功能，用户可以轻松地记录和分析他们的饮食习惯，从而更好地管理自己的健康和营养摄入。

    其中学习到Panel可滑动面板，提供的是一种轻量的内容展示窗口，方便在不同尺寸中进行切换。但是有时候会出现不生效的问题。Panel本身不占文档流的，类似于前端的浮动，要求Panel所在的容器，以及容器内的子元素高度全都固定，如果有不固定的高度可能导致无法正常展示。Divider分割组件，可以实现下划线效果

标签：鸿蒙,SPACE,color,Text,app,CommonConstants,列表,width,Panel
From： https://blog.csdn.net/weixin_67913109/article/details/139878551

相关文章

  • 鸿蒙案例-欢迎页面的实现
    前言‘案例来源于b站课程’实现过程1.首页面主要有三部分<1>中央slogan；<2>logo;<3>文字描述设置中央slogan要使用layoutWeight(1)实现布局全中；Row(){Image($r('app.media.home_slogan')).width(260)}.layoutWeight(1)logo即图片设置好图片......
  • 列表的增删改查
      a=["a","b","c","d","e"]#查询，切片print(a[1])#取列表下标为1的值print(a[1:3])#取列表下标1到2的值,右边不包括下标为3print(a[1::2])#取下标为1到最后的值，步长为2print(a[-1::-2])#从最后一个开始到第一个，步长为2的取值print(a[3::-2])#从......
  • 鸿蒙开发学习随记(1)——ArkTS基础语言学习
    目录变量与常量数组函数常规函数箭头函数接口与对象联合体枚举类型变量与常量在ArkTS语言中有三种常见的数据类型：number,string,boolean。变量这样声明定义：//变量命名letname:string="zhangsan"//let是一个关键字声明变量，name是变量名,string是类型，=后面......
  • 鸿蒙UI开发快速入门 —— part07:组件状态管理之@Prop/@Link装饰器
    1、前言我们在上一章学习了@State装饰器，@State装饰器的作用范围仅仅在当前组件，接下来，我们讨论如何从父组件中传入参数到子组件，让子组件随着父组件的状态发生变化。本章将要介绍的就是：@Props装饰器。2、@Props装饰器@Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装......
  • 【鸿蒙实战开发】HarmonyOS-ArkUI教程@link装饰器双向数据传递的使用
    前言2024年可谓至关重要，而生态建设的前提，就是要有足够的开发人才。与之对应的，今年春招市场上与鸿蒙相关岗位和人才旺盛的热度，一方面反应了鸿蒙生态的逐渐壮大，另一方面也让人们对鸿蒙下一阶段的发展更具信心。随着鸿蒙市场份额的不断提升，相应的岗位也会迎来一个爆发式的......
  • 【鸿蒙实战教程】HarmonyOS中的动态import和静态import的概念与区别
    什么是import鸿蒙核心语言是ArkTs，基于TS的扩展，所以里边少不了JS引擎的影子。    对于鸿蒙而言，我们在文件中引入其他文件时，会涉及到两个概念，静态import和动态import。    什么是引入其他文件呢？例如：import{TestA}from'./TestA'import{hilog}from'@kit......
  • Shopee虾皮API：获取商家店铺商品列表
    一、平台介绍Shopee，作为东南亚及中国台湾地区领先的电商平台，为卖家提供了一个便捷、高效的销售渠道。作为卖家，能够将自己的商品展示在Shopee平台上，并通过平台的流量和工具，将商品销售给更多的潜在买家。为了帮助卖家更好地管理自己的店铺和商品，Shopee提供了丰富的API接口服务......
  • Shopee API接口：获取搜索栏生成的商品结果列表
    一、平台介绍Shopee，作为东南亚领先的电商平台，一直致力于为卖家和买家提供便捷、高效的在线购物体验。为了满足广大开发者的需求，Shopee提供了丰富的API接口服务，帮助卖家和第三方开发者更好地与平台进行数据交互，实现业务的自动化和扩展。通过Shopee的API接口服务，可以轻松地获取......
  • vue实现的商品列表网页
    效果如下:   vue实现的商品列表网页 ， 图片在vue项目的Public文件夹里的imgs中 <template><divclass="common-layout"><!--el-container:外层容器。当子元素中包含<el-header>或<el-footer>时，全部子元素会垂直上下排列，否则会水平左右排列。-->......
  • Springboot+Vue+Mybatis-Plus+Easyexcel实现文件导入+导出的excel单元格下拉列表
    引言文件的导入与导出功能扮演着至关重要的角色，特别是在处理大量数据和复杂的表格时。通过整合SpringBoot、Vue、Mybatis-Plus和Easyexcel等先进技术，我们可以构建一个高效、灵活的文件处理系统。其中，Excel作为广泛使用的电子表格软件，其单元格下拉列表功能对于数据录入和校验......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99