26.[HarmonyOS NEXT Column案例六（上）] 交互式任务列表：垂直列表与条件渲染的完美结合

项目已开源，开源地址： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial ， 欢迎fork & star

效果演示

1. 引言

在HarmonyOS NEXT应用开发中，任务列表是一种常见且实用的界面组件，它不仅需要清晰地展示任务信息，还需要提供便捷的操作功能。本教程将详细讲解如何使用Column和Row组件的嵌套组合，结合自定义组件和条件渲染，创建一个交互式任务列表。通过TaskList和TaskItem组件的实际案例，我们将展示如何构建层次分明、交互丰富的列表界面，帮助开发者掌握复杂布局和交互的实现技巧。

2. 数据模型与组件结构

2.1 TaskList组件概述

@Component
export struct TaskList {
    private tasks: string[] = ['完成HarmonyOS布局开发', '整理代码示例', '测试多设备适配']

    build() {
        Column({ space: 16 }) // 外层Column控制列表间距
            {
            ForEach(this.tasks, (task:string) => {
                TaskItem({ task: task }) // 嵌套自定义TaskItem组件
            }, (task: string) => task)
        } .width('100%')
        .padding(24)
    }
}

TaskList组件是整个任务列表的容器，它负责：

1. 定义任务数据模型
2. 使用Column组件垂直排列任务项
3. 通过ForEach循环渲染多个TaskItem组件

2.2 数据模型设计

private tasks: string[] = ['完成HarmonyOS布局开发', '整理代码示例', '测试多设备适配']

属性	类型	说明
tasks	string[]	任务列表数组，每个元素是一个任务的描述文本

在这个简化的示例中，我们使用字符串数组来存储任务信息。在实际应用中，任务数据模型通常会更加复杂，可能包含以下字段：

字段名	类型	说明
id	string	任务唯一标识符
title	string	任务标题
description	string	任务描述
dueDate	Date	截止日期
priority	number	优先级
completed	boolean	完成状态

2.3 组件层次结构

任务列表的组件层次结构如下：

1. TaskList（外层容器）

   • Column（垂直排列）

     • ForEach循环

       • TaskItem（任务项组件）

         • Row（水平排列）

           • Column（任务内容，垂直排列）

             • Text（任务标题）
             • Text（任务日期）

           • Row（操作按钮，水平排列，条件渲染）

             • Button（编辑按钮）
             • Button（删除按钮）

这种层次结构使用了组件嵌套和组合的方式，将复杂的界面拆分为可管理的小组件，提高了代码的可维护性和复用性。

3. 外层Column布局设计

3.1 Column的基本结构

Column({ space: 16 }) // 外层Column控制列表间距
    {
    ForEach(this.tasks, (task:string) => {
        TaskItem({ task: task }) // 嵌套自定义TaskItem组件
    }, (task: string) => task)
} .width('100%')
.padding(24)

外层Column作为整个列表的容器，负责垂直排列所有的任务项。

3.2 Column属性详解

属性/参数	值	作用
space	16	设置子组件之间的垂直间距为16vp
width	100%	设置Column宽度占父容器的100%
padding	24	设置内边距为24vp，使列表与屏幕边缘保持适当距离

3.3 space属性的作用

Column({ space: 16 })

space属性用于设置Column子组件之间的垂直间距。在任务列表中，适当的间距可以：

1. 提高列表的可读性，使各任务项之间有明确的视觉分隔
2. 创造舒适的视觉节奏，避免界面过于拥挤
3. 帮助用户更容易区分不同的任务项

3.4 width和padding的配合使用

.width('100%')
.padding(24)

这两个属性的配合使用确保了：

1. 列表占据父容器的全部宽度
2. 列表内容与屏幕边缘保持24vp的距离，提供适当的留白

这种设置在不同尺寸的设备上都能提供良好的视觉效果，是响应式设计的基本实践。

4. ForEach循环渲染

4.1 ForEach的基本用法

ForEach(this.tasks, (task:string) => {
    TaskItem({ task: task }) // 嵌套自定义TaskItem组件
}, (task: string) => task)

ForEach是ArkUI中用于循环渲染的重要机制，它接收三个参数：

参数	说明
第一个参数	要遍历的数组（this.tasks）
第二个参数	渲染函数，定义如何渲染每个数组元素
第三个参数	键生成函数，为每个渲染项生成唯一标识符

4.2 键生成函数的重要性

(task: string) => task

键生成函数返回每个任务项的唯一标识符，这在列表渲染中非常重要，因为：

1. 它帮助框架识别哪些项发生了变化，从而进行高效的差异化更新
2. 它确保在列表项添加、删除或重新排序时，UI能够正确更新
3. 它避免了不必要的组件重新创建，提高了性能

在实际应用中，应该使用任务的唯一ID作为键，而不是任务描述文本。这里使用任务描述作为键只是为了简化示例。

4.3 自定义组件的传参

TaskItem({ task: task })

这行代码创建了一个TaskItem组件实例，并将当前任务文本作为参数传递给它。这种方式实现了：

1. 数据从父组件（TaskList）到子组件（TaskItem）的传递
2. 界面逻辑的分离，提高了代码的可维护性
3. 组件的复用，同一个TaskItem组件可以渲染不同的任务数据

5. 总结与展望

在本教程的第一部分，我们详细讲解了任务列表的基础结构，包括：

1. 数据模型的设计与初始化
2. 外层Column的属性设置与作用
3. ForEach循环渲染的使用方法与注意事项
4. 组件嵌套与数据传递的基本原理

这些知识点是构建交互式列表的基础。在下一部分中，我们将深入探讨TaskItem组件的内部结构，包括Row布局的实现、条件渲染的使用以及交互事件的处理，帮助开发者掌握更复杂的布局和交互技巧。