【黑马健康APP--食物列表页实现】

      本章初步实现食物列表页面的大致轮廓，由食物卡片区域点击后进入的新页面ItemIndex，设计页面为两大部分组成，一是头部导航栏，二是列表区域。

一.运行效果

二.知识储备

• Tabs组件

    目标：十分熟练Tabs组件的基本构成，包括TabBar（标签栏）和TabContent（标签内容区），熟练掌握如何设置Tabs的各种属性，例如barPosition（标签栏位置）、tabAlignment（标签对齐方式）、tabSize（标签大小）等。理解如何使用动态数据来控制Tabs的显示，例如动态生成TabBar和TabContent。

三.实现步骤

（一）分析列表页面结构：

        

Image	Row	Text
Tabs

（二）头部导航部分封装的Builder里，由文本和返回点击图片组成。

（三）列表页面借助组件来开发，用来在ItemIndex调用。在view目录下新建Item目录，新建ItemList组件。使用Tabs编写区域效果图，根据写出一份Tabs项，通过不同的分类循环渲染展示实现。

• 编写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('果蔬')
      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(10).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)
        }
      })
    }
    .width('100%')
    .height('100%')
  }
}

• 调用列表组件后我们最终得到的首页的基本样式：

import router from '@ohos.router'
import { CommonConstants } from '../common/constants/CommonConstants'
import ItemList from '../view/Item/ItemList'
@Entry
@Component
struct ItemIndex {
  @State message: string = 'Hello World'

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

四.总结

     本章通过对列表页的开发中，利用一个Tabs项实现不同tabBar的内容展示，丰富也提高了我对循环渲染的理解，以及它的实用性和灵活性有了更为直观的开发实践体验感受。