鸿蒙实战案列-食物列表页
发布时间
阅读量：
阅读量
前言
食物列表的页面，这个页面当用户去点击某一个实物时，会弹出一个面板，在这个面板里展示食物的详细的信息，包括热量，碳水，脂肪等等，然后用户还可以去选择想要去添加的数量，点击提交就可以完成一个饮食记录的添加。
一、页面设计
整个列表页是一个从上到下的一个列式布局，所以可以使用column容器，同样整个容器会占满整个屏幕，所以宽高都是100%。然后这里边第一行是一个导航条，那这一行的内容分为两部分，左侧是一个返回按钮，右侧是一个文本。然后再往下是第二部分，第二部分是食物的列表，这里是个tap组件，点击以后切换到对应的食物列表，而食物列表是一个list组件。
二、相关代码
代码如下：
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('肉蛋奶')
}
.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)
}
.onClick(()=>this.showPanel())
})
}
.width('100%')
.height('100%')
}
}
三、效果图
总结
List组件是用于展示列表数据的重要组件。它通常用于在界面上展示多个相同类型的数据项。
ForEach组件是一种常用的循环迭代组件，通常用于遍历数组或列表中的每一个元素，并执行相应的操作。
TabBar 用于选择不同标签页，而TabContent 则用来显示相应的内容区域。用户通过点击不同的 TabBar，可以切换展示不同的 TabContent 内容。
全部评论 (0)
还没有任何评论哟~