前言
食物列表页是健康和饮食管理应用中的一个关键功能,它允许用户浏览、搜索和选择不同的食物项来记录他们的饮食习惯。食物列表以列表形式展示食物名称、图片和简要信息。点击食物项后,展示详细的营养信息,包括热量、脂肪、碳水化合物、蛋白质等。
食物列表页是用户与饮食管理应用交互的主要入口之一,它的设计和功能对于提供流畅的用户体验至关重要。通过这些功能,用户可以轻松地记录和分析他们的饮食习惯,从而更好地管理自己的健康和营养摄入。
列表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