第三部分-首页Tabs的记录列表的初步设计

一、前言：

本文演示用HarmonyOS的ArkUI来开发首页界面内的记录列表。

通过List()以及Column()来进行布局，使其更加美观。

二、记录列表部分

初步我们设计了一个效果图，如图所示

我们可以将其分为两部分，例如早餐的标题部分，以及吃的食物两部分。

首先我们进行标题的设计，用Row容器将其包起来，好让其存放在一行上显示。

我们又可以将这一行分为图片，名称，建议（需要修改透明度），多少千卡，以及加号图片；依次使用相应组件就可以了。

但是又发现其有一个很长的间隔，我们就可以使用Blank ：空白填充组件进行填充。

它效果上可以看到不是只显示一行，这里我们用到ForEach进行一个循环输出，就可以实现了。

参考代码如下：

  ForEach([1,2,3,4,5], (item) => {
    ListItem(){
      Column({space: CommonConstants.SPACE_8}){
        // 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%')
}

接下来我们来进行所吃食物的显示：

这里就只包含了图片组件的使用，其他与上面架构相似，就不过多解释了。

参考代码如下：

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

整体参考代码：

//记录列表


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({space: CommonConstants.SPACE_8}){
            // 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)
    .height('100%')
    .margin({top: 10})
  }

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

这样我们就完成了页面的记录列表部分的功能开发。