鸿蒙实战案例（个人期末项目）-----黑马健康（源自黑马程序员）#4

 四，食物列表

1，食物列表页

（1）.实现效果图

（2）.实现原理

列式布局的表单设计中，顶部设有导航栏，用于快速切换不同的页面。每个页面由多个卡片组成，卡片内包含文本、图片和按钮等元素。由于需要根据导航栏上不同的导航项显示相应的页面内容，因此可以采用之前文章中提到的Tabs组件来实现这一功能。而页面中的多个卡片，则可以通过List组件来动态渲染和展示。

具体来说，表单的布局可以这样设计：

1. **导航栏**：位于表单的最上方，包含多个导航项，用户点击不同的导航项时，页面会展示相应的内容。

2. **Tabs组件**：利用Tabs组件来实现页面内容的快速切换。每个Tabs页签对应一个页面，用户可以通过点击不同的页签来查看不同的信息。

3. **卡片布局**：每个页面由多个卡片组成，每个卡片内包含必要的文本、图片和按钮等元素。卡片可以设计为具有吸引力的样式，以提高用户的阅读体验。

4. **List组件**：使用List组件来渲染页面中的卡片列表。List组件可以根据数据动态生成卡片，实现数据的高效展示。

通过这样的设计，表单不仅能够提供清晰的导航和页面切换功能，还能通过卡片和List组件的结合，实现内容丰富、布局合理的展示效果。

（3）.itemList.ets和ItemIndex.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('肉蛋奶')
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height('100%')
  }

  @Builder TabContentBuilder(){
    List({space:CommonConstants.SPACE_10}){
      ForEach([1,2,3,4,5,6,7,8], (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千卡/1片').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%')
  }
}

Panel(this.showPanel) {
        Button('关闭')
          .onClick(()=>this.showPanel = false)
      }
      .mode(PanelMode.Full)//全部显示
      .backgroundMask($r('app.color.light_gray'))//蒙版颜色浅灰
      .backgroundColor(Color.White)//背景颜色

2，底部Panel

（1）.实现效果图

（2）.实现原理

        实现一个食物列表的底部Panel面板，包括布局分析、关键技术使用、以及具体的开发步骤。

1. 布局分析：

   • 整个Panel面板采用的是列式布局，其中每个元素是行式布局，即多个row在一个column里。
   • 面板从上到下包括：文本加按钮小图标、图片、文本、食物详细信息、带下划线的文本、自制键盘和两个按钮。

2. Panel组件：

   • Panel组件是一个可滑动的面板，用于轻量级内容展示，方便在不同尺寸中切换。
   • API文档强调Panel容器和内元素的高度必须是固定的。
   • 提供了Panel组件的属性和参数，包括显示控制、模式设置、拖动条存在性、高度设置、背景蒙层颜色等。

3. 面板内容：

   • 头部日期文本加弹窗：新建组件提高代码可读性。
   • 食物信息：定义组件展示食物的图片、名称、营养素信息和数量。

（3）.对应代码

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)//下划线
      // 3.营养素
      Row({space: CommonConstants.SPACE_8}){
        this.NutrientInfo('热量',91.0)
        this.NutrientInfo('热量',91.0)
        this.NutrientInfo('热量',91.0)
        this.NutrientInfo('热量',91.0)
      }
      Divider().width(CommonConstants.THOUSANDTH_940).opacity(0.6)
      // 4.数量
      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)
    }
  }
}