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

前言

---

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

---

一、UI设计分析

饮食记录UI设计

 

 食物列表页UI设计

 二、组件介绍

一、RecordList

首先，我们定义了一个名为RecordList的组件，该组件在其build方法中负责构建整个列表。在这个方法中，我们利用List和ForEach组件来遍历一个包含数字1到5的数组，并为每个数字创建一个ListItem组件。

在每个ListItem组件中，我们使用Column组件来组织两个主要部分：

• 1. **分组标题**：包含早餐建议、千卡数等信息。我们使用Image、Text和Blank组件来展示这些信息。
• 2. **组内记录列表**：显示食物信息，如全麦吐司等。这部分使用Image、Text和Column组件来呈现每个食物的具体信息。

此外，为了增强用户交互性，每个组内记录列表项还包含一个删除按钮。这个按钮通过Image、FillColor和Margin组件来实现样式设定。

通过以上设计，RecordList组件能够清晰地展示食物记录，并提供删除功能，使用户能够方便地管理他们的记录列表。

代码如下：

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

运行截图：

 二、ItemIndex

定义了一个名为ItemIndex的结构体，其build()方法负责构建页面的整体结构，采用Column布局。该布局包含两个子组件：

•  **Header()方法**：用于构建页面的头部部分，采用Row布局。它包括以下组件：
•    - 返回按钮：通过router.back()实现返回上一页的功能。
•    - 一个空白区域。
•    - 标题文本。
• **ItemList()方法**：负责构建页面的列表部分，具体的实现逻辑在ItemList组件中完成。

通过这种结构化的设计，ItemIndex结构体能够清晰地组织页面内容，分别处理头部和列表部分的构建逻辑，保持代码的可读性和维护性。

代码及其注释如下：

import { CommonConstants } from '../common/constants/CommonConstants'; // 导入常量
import router from '@ohos.router'; // 导入路由器
import ItemList from '../view/Item/ItemList'; // 导入ItemList组件

@Entry
@Component
struct ItemIndex {
  @State message: string = 'Hello World'; // 组件状态，初始值为 'Hello World'

  build() {
    Column() {
      // 构建页面的主列布局

      // 1. 头部
      this.Header();

      // 2. 列表
      ItemList();
    }
    .height('100%')
    .width('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); // 头部高度设置
  }
}

在以上代码中，我添加了注释以帮助理解每个部分的作用和功能：

CommonConstants：导入了一个常量文件，用于统一管理常量。

router：导入了路由器，用于页面导航。

ItemList：导入了列表组件，用于显示页面的项目列表。

@Entry 和 @Component：标记了结构体 ItemIndex 作为程序的入口和组件。

@State：定义了组件的状态 message，并初始化为 'Hello World'。

build() 方法：构建页面的主列布局，包括头部和列表两部分。

Header() 方法：构建页面的头部，包括返回按钮、空白区域和标题文本，并设置其样式和行为。

这些注释有助于理解代码的结构和每个方法的功能，提高了代码的可读性和维护性。

三、ItemList 

ItemList结构体用于展示包含多个选项卡和列表项的页面。其build()方法中使用Tabs布局，包含三个TabContent子组件：全部、主食和肉蛋奶，每个选项卡通过tabBar属性设置名称。在每个TabContent中调用TabContentBuilder()方法构建列表项，使用List布局包含多个ListItem子组件，每个ListItem包含图片、文本和加号图标。最终，通过设置width和height属性，使页面充满整个屏幕空间。

代码如下：

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

@Component
@Preview
export default struct ItemList {
  // 构建整体页面结构
  build() {
    Tabs() {
      // 第一个选项卡：全部
      TabContent() {
        this.TabContentBuilder();
      }
      .tabBar('全部');

      // 第二个选项卡：主食
      TabContent() {
        this.TabContentBuilder();
      }
      .tabBar('主食');

      // 第三个选项卡：肉蛋奶
      TabContent() {
        this.TabContentBuilder();
      }
      .tabBar('肉蛋奶');
    }
    .width(CommonConstants.THOUSANDTH_940) // 设置整体宽度
    .height('100%'); // 设置整体高度为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); // 图片，设置宽度为50
            Column({ space: CommonConstants.SPACE_4 }) {
              Text('全麦吐司').fontWeight(CommonConstants.FONT_WEIGHT_500); // 主标题文本，设置字重
              Text('91千卡/片').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%') // 设置行宽度为100%
          .padding(CommonConstants.SPACE_6); // 设置内边距
        }
      });
    }
    .width('100%') // 设置列表宽度为100%
    .height('100%'); // 设置列表高度为100%
  }
}

 

上述代码涉及了几个主要知识点，包括：

• 1. **Vue 组件与组件装饰器**：
•    - `@Component` 和 `@Preview` 是 Vue 组件的装饰器，用于标识该类是一个 Vue 组件，并且可以在预览模式下查看。
• 2. **Vue 组件构建**：
•    - `build()` 方法定义了整个组件的构建逻辑。在 Vue 中，组件通常会有一个 `build()` 或 `render()` 方法用于构建其结构和布局。
• 3. **选项卡组件 (`Tabs` 和 `TabContent`)**：
•    - 使用了 Tabs 和 TabContent 组件来实现多个选项卡的效果。每个选项卡通过 `TabContentBuilder()` 方法来构建其内容。
• 4. **列表渲染 (`List` 和 `ForEach`)**：
•    - 使用了 `List` 组件和 `ForEach` 方法来渲染一个包含固定数据项的列表（这里是 `[1, 2, 3, 4, 5, 6]`）。
• 5. **布局和样式设置**：
•    - 使用了 `.width()` 和 `.height()` 方法来设置组件、行、列表等元素的宽度和高度。
•    - `.padding()` 方法用于设置内边距。
•    - 设置了字体大小、颜色、字重等样式属性，如 `fontWeight()`、`fontSize()`、`fontColor()`。
• 6. **图片和图标的处理**：
•    - 使用 `Image` 组件来展示图片，设置了宽度和填充颜色。
•    - 使用 `Blank()` 组件作为占位符。
• 7. **常量和变量的引用**：
•    - 引用了 `CommonConstants` 中定义的常量，如 `CommonConstants.THOUSANDTH_940`、`CommonConstants.SPACE_10` 等，用于统一管理和设置样式或布局的常量值。
• 8. **注释的使用**：
•    - 使用了注释来解释代码的每个部分和每个步骤的作用，增强了代码的可读性和可维护性。

这些知识点涵盖了 Vue 组件的基本构建、布局与样式设置、列表渲染、常量引用、以及注释的使用，是开发 Vue.js 应用时常见的技术和实践。

总结

通过以上介绍，我们展示了如何在 HarmonyOS 中构建一个包含项目索引、项目列表和食物记录的简易食物记录应用页面。每个页面均充分利用了 HarmonyOS 提供的组件和功能：

• 1. **项目索引页面**：作为应用的入口页面，包含顶部标题栏和项目列表。用户可以从标题栏快速导航至不同项目，如早餐、午餐、晚餐等。
• 2. **项目列表页面**：利用了 Tab 标签页组件，每个 Tab 页对应不同的食物类别。这种结构使用户能够方便地浏览和选择特定类别中的食物。
• 3. **食物记录列表页面**：位于项目索引页面中的每个项目下，展示了详细的食物记录列表。用户可以查看特定项目中每餐所摄入的食物和相应的营养信息。

这些页面不仅展示了基础的界面设计和交互逻辑，还为进一步扩展和优化应用提供了良好的基础。通过合理使用 HarmonyOS 提供的功能和组件，可以满足更复杂的应用需求，并提升用户体验和操作效率。