鸿蒙实战案例-饮食记录-记录列表及食物列表页

---

前言

在本篇文章中，我将介绍如何使用HarmonyOS框架构建一个简单的食物记录和食物列表页面。主要包括三个组件：食物记录列表、项目索引页面和项目列表页面。

---

一、UI设计分析

饮食记录UI设计

食物列表页UI设计

二、组件介绍

一、RecordList

首先，定义一个名为RecordList的组件，并在build方法中构建整个列表。在这个方法中，使用List和ForEach组件来遍历一个包含数字1到5的数组，并为每个数字创建一个ListItem组件。在每个ListItem组件中，使用Column组件来创建一个分组标题和一个组内记录列表。分组标题包含早餐建议、千卡数等信息，并使用Image、Text和Blank组件来显示这些信息。组内记录列表包含全麦吐司等食物的信息，并使用Image、Text和Column组件来显示这些信息。此外，它还为每个组内记录列表项添加了一个删除按钮，该按钮使用Image、FillColor和Margin组件来设置样式。

代码如下：

import { CommonConstants } from '../../common/constants/CommonConstants'
@Extend(Text) function grayText(){
  .fontSize(14)
  .fontColor($r('app.color.light_gray'))
}
@Component
@Preview
export default  struct RecordList {
  build() {
    List({space:CommonConstants.SPACE_10}){
      ForEach([1,2,3,4,5],(item)=>{
        ListItem(){
          Column(){
            //1.分组的标题
            Row({space:CommonCo