6.饮食列表——食物列表页

CYQ...

已于 2024-06-27 09:05:20 修改

阅读量201

点赞数 7

文章标签：华为 harmonyos

于 2024-06-16 13:04:20 首次发布

本文链接：https://blog.csdn.net/2201_75587117/article/details/139633510

版权

6.1 UI设计

6.2 实现食物列表

6.2.1 顶部导航实现

定义一个header组件里面存放返回的图片和早餐的字样

给图片加上点击事件，用户点击返回图片以后会返回到上一个页面（使用router.back()）

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

6.2.2 食物列表实现

首先定义一个TabContentBuilder组件用来存放循环食物列表，这些作文TabContent里面的内容，本来是把TabContent也写到自定义组件里面的但是会报错。

@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千卡/片').grayText()
              }
              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%')

  }

 Tabs(){
      TabContent(){
             this.TabContentBuilder()
      }
      .tabBar('全部')
      .padding(CommonConstants.SPACE_2)
      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('主食')

      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('果蔬')
      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('肉蛋奶')
      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('坚果')
      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('其他')
    }