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

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


项目已开源,开源地址: 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布局的实现、条件渲染的使用以及交互事件的处理,帮助开发者掌握更复杂的布局和交互技巧。

相关文章
|
10天前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法,包括通过云端API和AppStorage两种方式,并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题,添加上传进度提示,支持自动登录判断,提升用户体验。
59 0
|
10天前
|
存储 负载均衡 数据库
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
本文介绍基于华为AGC的端云一体化开发流程,涵盖项目创建、云函数开通、应用配置及DevEco集成。重点讲解云函数的编写、部署、调用与传参,并涉及环境变量设置、负载均衡、重试机制与熔断策略等高阶特性,助力开发者高效构建稳定云端服务。
87 0
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
|
10天前
|
存储 JSON 数据建模
鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇
云数据库采用存储区、对象类型、对象三级结构,支持灵活的数据建模与权限管理,可通过AGC平台或本地项目初始化,实现数据的增删改查及端侧高效调用。
37 0
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
2月前
|
安全 JavaScript API
鸿蒙开发核心要素
鸿蒙开发核心要素
|
3月前
|
存储 IDE 定位技术
【HarmonyOS 5】鸿蒙组件&模板服务详解 - 助力高效开发的利器
在移动应用开发领域,效率与质量始终是开发者追求的核心目标。鸿蒙系统作为新兴的操作系统,为开发者提供了丰富且强大的开发资源,其中鸿蒙组件&模板服务更是成为开发者快速构建高质量应用的得力助手。
133 0
HarmonyOS NEXT仓颉开发语言实战案例:电影App
周末好!本文分享使用仓颉语言重构ArkTS实现的电影App案例,对比两者在UI布局、组件写法及语法差异。内容包括页面结构、列表分组、分类切换与电影展示等。通过代码演示仓颉在HarmonyOS开发中的应用。##仓颉##ArkTS##HarmonyOS开发
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
HarmonyOS NEXT仓颉开发语言实战案例:小而美的旅行App
本文分享了一个旅行App首页的设计与实现,使用List容器搭配Row、Column布局完成个人信息、功能列表及推荐模块的排版,详细展示了HarmonyOS下的界面构建技巧。
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:银行App
仓颉语言银行App项目分享,页面布局采用List容器,实现沉浸式体验与模块化设计。顶部资产模块结合Stack与Row布局,背景图与内容分离,代码清晰易懂;功能按钮部分通过负边距实现上移效果,圆角仅保留顶部;热门推荐使用header组件,结构更规范。整体代码风格与ArkTS相似,但细节更灵活,适合金融类应用开发。