黑马健康APP——记录列表和食物列表页

一.思路分析

本次实验的内容主要是完成饮食记录页面的UI 设计的的下部饮食列表的设计，大致思路是使用LIST组件来实现，并在其中使用Foreach来进行循环，从而实现饮食列表信息的显示，当用户点击早餐或其他时，便会跳转到对应的食物列表页，对于食物列表页的实现，相对而言比较简单，只要是一个铺满全屏的列示布局以及Tabs的搭配使用。

二.运行截图

三.设计中遇到的问题

如何实现食物列表

解决方法：

首先使用Column()容器，设计出一个放置列表的位置，然后使用row容器放置每一栏开头的文字，随后使用ListItem容器，将Column（）容器中所有的信息，放置于ListItem容器中，从而达到列表项的目的，再放置完所有的文本信息后，可以再ListItem容器外面使用Foreach循环，将所有的信息进行一个循环，从而实现四个食物列表项。此外，可以使用margin属性，来调节卡片距离顶部的距离。对组内记录列表的实现，与上面类似，大致都是首先定义一个，然后使用Foreach循环来进行处理。

四.代码

import { CommonConstants } from '../../common/constants/CommonConstants'

@Extend(Text) function grayText(){
  .fontSize(14)
  .fontColor($r('app.color.light_gray'))
}

@Component
 export default struct RecordList {
  build() {
    List({space:CommonConstants.SPACE_10}){
      ForEach([1,2,3,4,5],(item) => {
        ListItem(){
          Column(){
            // 1.分组的标题
            Row({space:CommonConstants.SPACE_4}){
              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()
              Image($r('app.media.ic_public_add_norm_filled'))
                .width('20')
                .fillColor($r('app.color.primary_color'))
            }
            .width('100%')
            // 2.组内记录列表
           List(){
             ForEach([1,2],(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片')
                       .grayText()
                   }
                   Blank()
                   Text('91千卡')
                     .grayText()
                 }
                 .width('100%')
                 .padding(CommonConstants.SPACE_6)
               }.swipeAction({end: this.deleteButton.bind(this)})
             })
           }
            .width('100%')
          }
          .width('100%')
          .backgroundColor(Color.White)
          .borderRadius(CommonConstants.DEFAULT_18)
          .padding(CommonConstants.SPACE_12)
        }
      })
    }
    .width(CommonConstants.THOUSANDTH_940)
    .margin({top: 10})
    .height('100%')
  }

  @Builder deleteButton(){
    Image($r('app.media.ic_public_delete_filled'))
      .width(20)
      .fillColor(Color.Red)
      .margin(5)
  }

}

import { CommonConstants } from '../common/constants/CommonConstants'
import router from '@ohos.router'
import ItemList from '../view/item/ItemList'
import ItemPanelHeader from '../view/item/ItemPanelHeader'
import ItemCard from '../view/item/ItemCard'
import NumberKeyboard from '../view/item/NumberKeyboard'
@Entry
@Component
struct ItemIndex {
  @State amount: number = 1
  @State showPanel: boolean = false
  @State value: string = ''

  onPanelShow(){
    this.amount = 1
    this.value = ''
    this.showPanel = true
  }

    build() {
      Column() {
        // 1.头部导航
          this.header()
        // 2.列表
       ItemList({showPanel: this.onPanelShow.bind(this)})
        .layoutWeight(1)
        // 3.底部面板
        Panel(this.showPanel){
          // 3.1 顶部日期
          ItemPanelHeader()
          // 3.2 记录卡片
          ItemCard({amount: this.amount})
          // 3.3 数字键盘
          NumberKeyboard({amount: $amount, value: $value})
          // 3.4 按钮
          Row({space: CommonConstants.SPACE_6}){
            Button('取消')
              .width(120)
              .backgroundColor($r('app.color.light_gray'))
              .type(ButtonType.Normal)
              .borderRadius(6)
              .onClick(() => this.showPanel = false)
            Button('提交')
              .width(120)
              .backgroundColor($r('app.color.primary_color'))
              .type(ButtonType.Normal)
              .borderRadius(6)
              .onClick(() => this.showPanel = false)
          }
              .margin({top: 10})

        }
        .mode(PanelMode.Full)
        .dragBar(false)
        .backgroundMask($r('app.color.light_gray'))
        .backgroundColor(Color.White)
      }
      .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)
  }
}

五.总结

本次实验主要完成了记录列表以及食物列表页的设计，记录列表的实现主要是通过ListItem来实现列表以及使用Foreach（）循环来进行复制，从而达到该效果，食物记录列表页的实现，主要是使用列式布局，以及Tabs组件大搭配使用，来实现该效果。