鸿蒙开发案例：健康App（6）饮食记录-记录列表

系列文章目录

鸿蒙开发案例：健康App（1）欢迎页面Ul实现

                         健康App（2）欢迎页面业务

                         健康App（3）首页Tabs

                         健康App（4）饮食记录-顶部搜索栏 

                         健康App（5）饮食记录-统计卡片

                         健康App（6）饮食记录-记录列表

---

前言

案例来源于黑马程序员的课程

---

案例介绍

饮食记录-记录列表

一、整体思路

一个卡片，内部是一个List布局，从上到下一行一行的，使用Column容器

二、实现步骤

1.分组的标题

使用Row容器，使图标，加粗文字，灰色文字在同一水平线上（左边）

（右边）

写个for循环，写个假的数组，加listitem,把Column扔进去,就有很多组样式了。

2.组内记录列表

一行里有一个图片两行文本，所以图片大些，再用个Column来写两行文本；再整个循环。

要给list加删除，先加个侧滑效果

用一个builder定义删除图标， 添加点击事件，删除元素

但现在还没实现删除功能

---

总结

完整代码如下：

// src/main/ets/view/record/RecordList.ets

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,6], (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)
      .height(20)
      .fillColor(Color.Red)
      .margin(5)
  }
}

记得修改