黑马健康应用开发(五)

一、记录列表和食物列表实现思路:

1.RecordList记录列表实现思路:

使用 List 容器来构建主列表。
使用 ForEach 循环遍历一个数组（例如 [1, 2, 3, 4, 5]），为每个数组元素创建一个 ListItem。
在每个 ListItem 中，使用 Column 和 Row 容器进行布局。
显示一个早餐图片、早餐名称（加粗显示）、建议的热量范围（使用 grayText 函数设置灰色样式）、一个数字（可能是已摄入的热量）和单位（同样使用 grayText 函数设置灰色样式）。
在右侧，显示一个添加按钮（图片），点击该按钮会调用 jump 方法进行页面跳转。
在主列表项内部，再嵌套一个 List 容器用于显示子列表项。
使用另一个 ForEach 循环遍历另一个数组（例如 [1, 2]），为每个数组元素创建一个 ListItem。
在子列表项中，显示食物图片、食物名称、数量（使用 grayText 函数设置灰色样式）和热量信息（同样使用 grayText 函数设置灰色样式）。

1.ItemList食物列表实现思路:

使用 Tabs 组件来创建标签页容器。
通过多个 TabContent 组件定义不同的标签页内容，并为每个 TabContent 组件设置对应的 tabBar 属性。
为 Tabs 容器设置宽度为屏幕宽度的94，并设置高度为 '100%'，使其占据整个可用空间。使用 @Builder 装饰器定义一个名为 TabContentBuilder 的构建器方法，该方法负责构建每个标签页的内容。
在 TabContentBuilder 方法中，使用 List 组件创建一个列表，并通过 ForEach 循环遍历一个数组，为每个数组元素创建一个 ListItem。每个 ListItem 中，使用 Row 和 Column 容器进行布局。
显示一个食物图片，并设置其宽度为 50。
在图片旁边，使用 Column 容器显示食物名称（如“全麦吐司”）和数量（如“1片”）。食物名称使用加粗字体，数量使用灰色字体。
在右侧，显示一个添加按钮（图片），并设置其宽度和填充颜色。
使用 Blank 组件在元素之间添加间距。

二、记录列表的设计:

按照实现思路：

使用 List 容器来构建主列表。
使用 ForEach 循环遍历一个数组（例如 [1, 2, 3, 4, 5]），为每个数组元素创建一个 ListItem。
在每个 ListItem 中，使用 Column 和 Row 容器进行布局。使用另一个 ForEach 循环遍历另一个数组（例如 [1, 2]），为每个数组元素创建一个 ListItem。在子列表项中，显示食物图片、食物名称、数量。

import { CommonConstants } from '../../common/constants/CommonConstants'
import router from '@ohos.router'

@Extend(Text) function grayText(){
  .fontSize(14)
  .fontColor($r('app.color.light_gray'))
}
@Component
@Preview
export default struct RecordList {
  build() {
    List() {
      ForEach([1, 2, 3, 4, 5], (item) => {
        ListItem() {
          Column() {
            Row({ space: CommonConstants.SPACE_6 }) {
              Image($r('app.media.ic_breakfast')).width(24)
              Text('早餐').fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)
              Text('建议423-592千卡').grayText()
              Blank()
              Text('190').fontSize(14).fontColor($r('app.color.primary_color'))
              Text('千卡').grayText()
              Blank()
              Image($r('app.media.ic_public_add_norm_filled'))
                .onClick(()=>this.jump())
                .width(20).fillColor($r('app.color.primary_color'))

            }


            //2.
            List() {
              ForEach([1, 2], (item) => {
                ListItem() {
                  Row({ space: CommonConstants.SPACE_4 }) {
                    Image($r('app.media.toast')).width(50)
                    Column() {
                      Text('全麦吐司').fontWeight(CommonConstants.FONT_WEIGHT_500)
                      Text('1片')
                        .grayText()
                    }

                    Blank()
                    Text('91千卡')
                      .grayText()
                  }.width('100%')
                }
                .padding(CommonConstants.SPACE_6)
              }
              )

            }
            .width('100%')
            .backgroundColor(Color.White)
            .borderRadius(CommonConstants.DEFAULT_18)
            .padding(CommonConstants.SPACE_12)



          }
        }

      })


    }
  }
  jump()
  {
    setTimeout(() => {
      router.replaceUrl({
        url: 'pages/ItemIndex'
      })
    }, 1000)
  }
}

三、食物列表的设计

按照实现思路：

食物列表UI设计

列表页面从上到下布局，使用column()

返回键使用图片加事件，再使用tabs进行分类，再用list列表进行布局

给分组标题添加点击事件，在pages文件夹创建文件

由头部导航和列表组成，将头部导航封装在builder，设置图片，调整好宽度和间隔，并设置点击信息，设置文字早餐，设置字体和间隔和宽度。

在view下创建目录item，创建文件ItemLiist.ets

设置各个tab项，设置tabbar。按照饮食记录列表创建的步骤。

编写build方法来构建组件的UI结构。tabContentBuilder来构建子组件的内容，使用UI组件Tabs, List, Image等来构建界面。

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('坚果')
    }
    .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('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)
        }
      })
    }
    .width('100%')
    .height('100%')
  }
}