27.[HarmonyOS NEXT Column案例六（下）] 任务项交互设计：条件渲染与事件处理的高级应用-阿里云开发者社区

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

效果演示

1. 引言

在上一部分中，我们介绍了任务列表的基础结构、数据模型设计以及外层Column的实现。本教程将继续深入探讨TaskItem组件的内部结构，包括Row布局的实现、条件渲染的使用以及交互事件的处理，帮助开发者掌握更复杂的布局和交互技巧，创建功能丰富、用户体验良好的任务列表界面。

2. TaskItem组件设计

2.1 组件定义与状态管理

@Component
struct TaskItem {
    @Prop task: string
    @State showActions: boolean = false
    build() {
        // 组件内容
    }
}

装饰器	属性	类型	初始值	说明
@Component	-	-	-	标识这是一个自定义组件
@Prop	task	string	-	从父组件接收的任务文本，只读属性
@State	showActions	boolean	false	组件内部状态，控制操作按钮的显示与隐藏

2.2 装饰器的作用与区别

2.2.1 @Component装饰器

@Component装饰器用于定义自定义组件，它告诉框架这是一个可复用的UI组件，具有自己的生命周期和渲染逻辑。

2.2.2 @Prop装饰器

@Prop装饰器用于定义从父组件接收的属性，特点包括：

单向数据流：父组件可以修改属性值，子组件只能读取不能修改
响应式：当父组件中的值变化时，子组件会自动更新
简单传递：适用于传递简单数据类型或只读对象

2.2.3 @State装饰器

@State装饰器用于定义组件的内部状态，特点包括：

组件私有：状态只在组件内部可见和修改
响应式：状态变化会触发组件重新渲染
状态持久：在组件生命周期内保持状态

在TaskItem组件中，我们使用@State装饰器定义了showActions状态，用于控制操作按钮的显示与隐藏，初始值为false（隐藏状态）。

3. Row布局实现

3.1 基本结构

Row({ space: 16 })
{
    // 任务内容（垂直排列）
    Column({ space: 4 }) {
        // 文本组件
    }
    // 操作按钮（水平排列，悬停显示）
    if (this.showActions) {
        Row({ space: 8 }) {
            // 按钮组件
        }
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.Center)
    }
}
.width('100%')
.padding({ left: 12,right:12, top: 16, bottom: 16 })
.backgroundColor(0xFFFFFF)
.borderRadius(8)
.shadow({ radius: 2, color: 0x05000000 })
.onHover((isHover: boolean, event: HoverEvent)=>{
    // 悬停事件处理
})

每个任务项使用Row组件实现水平布局，将任务内容和操作按钮分别放置在左右两侧。

3.2 Row属性详解

属性/参数	值	作用
space	16	设置子组件之间的水平间距为16vp
width	100%	设置Row宽度占父容器的100%
padding	{ left: 12,right:12, top: 16, bottom: 16 }	设置内边距，上下16vp，左右12vp
backgroundColor	0xFFFFFF	设置背景色为白色
borderRadius	8	设置边框圆角为8vp
shadow	{ radius: 2, color: 0x05000000 }	设置阴影效果，营造卡片视觉

3.3 卡片式设计的实现

.backgroundColor(0xFFFFFF)
.borderRadius(8)
.shadow({ radius: 2, color: 0x05000000 })

这三个属性的组合实现了卡片式设计：

白色背景提供了与页面背景的对比
圆角边框柔化了卡片的视觉边界
轻微的阴影效果增强了层次感，使卡片看起来略微悬浮

阴影参数解析：

参数	值	说明
radius	2	阴影扩散半径，值越大阴影越模糊
color	0x05000000	阴影颜色，0x05表示透明度为5%的黑色阴影

4. 任务内容区域的Column布局

4.1 基本结构

Column({ space: 4 }) {
    Text(this.task)
        .fontSize(16)
        .fontWeight(500)
    Text('2025-05-30 14:00')
        .fontSize(12)
        .fontColor(0x666666)
}

任务内容区域使用Column组件垂直排列任务标题和日期信息。

4.2 Column属性详解

属性/参数	值	作用
space	4	设置子组件之间的垂直间距为4vp

4.3 文本组件的实现

4.3.1 任务标题

Text(this.task)
    .fontSize(16)
    .fontWeight(500)

属性	值	作用
构造参数	this.task	设置文本内容，来自@Prop装饰的task属性
fontSize	16	设置字体大小为16vp
fontWeight	500	设置字体粗细为中等偏粗

4.3.2 任务日期

Text('2025-05-30 14:00')
    .fontSize(12)
    .fontColor(0x666666)

属性	值	作用
构造参数	'2025-05-30 14:00'	设置文本内容为固定的日期时间文本
fontSize	12	设置字体大小为12vp，小于标题字号
fontColor	0x666666	设置字体颜色为深灰色，弱化视觉重要性

4.4 文本层次设计

任务内容区域的文本设计遵循了明确的视觉层次：

主要信息（任务标题）：较大字号(16vp)、较粗字重(500)、默认黑色
次要信息（任务日期）：较小字号(12vp)、默认字重、灰色(0x666666)

这种设计使用户能够快速识别重要信息，同时在需要时也能获取次要信息，提高了界面的可读性和信息层次感。

5. 操作按钮区域的条件渲染

5.1 条件渲染的实现

if (this.showActions) {
    Row({ space: 8 }) {
        Button('编辑')
            .width(48)
            .height(28)
            .fontSize(12)
            .backgroundColor(0xE0F5FF)
            .fontColor(0x007DFF)
        Button('删除')
            .width(48)
            .height(28)
            .fontSize(12)
            .backgroundColor(0xFFF0F0)
            .fontColor(0xFF4D4F53)
    }
    .alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.Center)
}

条件渲染使用if语句实现，只有当showActions为true时，才会渲染操作按钮区域。

5.2 Row布局属性

属性/参数	值	作用
space	8	设置按钮之间的水平间距为8vp
alignItems	VerticalAlign.Center	设置子组件在垂直方向上居中对齐
justifyContent	FlexAlign.Center	设置子组件在水平方向上居中对齐

5.3 按钮样式设计

5.3.1 编辑按钮

Button('编辑')
    .width(48)
    .height(28)
    .fontSize(12)
    .backgroundColor(0xE0F5FF)
    .fontColor(0x007DFF)

属性	值	作用
构造参数	'编辑'	设置按钮文本
width	48	设置按钮宽度为48vp
height	28	设置按钮高度为28vp
fontSize	12	设置字体大小为12vp
backgroundColor	0xE0F5FF	设置背景色为浅蓝色
fontColor	0x007DFF	设置文字颜色为蓝色

5.3.2 删除按钮

Button('删除')
    .width(48)
    .height(28)
    .fontSize(12)
    .backgroundColor(0xFFF0F0)
    .fontColor(0xFF4D4F53)

属性	值	作用
构造参数	'删除'	设置按钮文本
width	48	设置按钮宽度为48vp
height	28	设置按钮高度为28vp
fontSize	12	设置字体大小为12vp
backgroundColor	0xFFF0F0	设置背景色为浅红色
fontColor	0xFF4D4F53	设置文字颜色为红色

5.4 按钮的视觉差异化

两个按钮使用了不同的颜色方案来区分不同的操作类型：

编辑按钮：蓝色系（浅蓝背景 + 蓝色文字），表示中性操作
删除按钮：红色系（浅红背景 + 红色文字），表示危险操作

这种颜色编码符合用户的心理预期，使界面更加直观易用。

6. 交互事件处理

6.1 悬停事件的实现

.onHover((isHover: boolean, event: HoverEvent)=>{
    if (isHover) {this.showActions = true}else{
        this.showActions = false
    }
})

onHover事件用于检测鼠标是否悬停在组件上，它接收一个回调函数，该函数有两个参数：

参数	类型	说明
isHover	boolean	表示鼠标是否悬停在组件上
event	HoverEvent	包含事件详细信息的对象

6.2 状态管理与UI更新

if (isHover) {this.showActions = true}else{
    this.showActions = false
}

这段代码根据悬停状态更新showActions状态变量：

当鼠标悬停在任务项上时(isHover为true)，将showActions设为true，显示操作按钮
当鼠标离开任务项时(isHover为false)，将showActions设为false，隐藏操作按钮

由于showActions是使用@State装饰器定义的响应式状态变量，当其值变化时，框架会自动重新渲染组件，实现操作按钮的动态显示与隐藏。

6.3 交互设计的优势

这种基于悬停的交互设计有以下优势：

界面简洁：默认情况下不显示操作按钮，减少视觉干扰
按需显示：只有当用户需要操作时（鼠标悬停），才显示相关按钮
直观反馈：提供即时的视觉反馈，增强用户体验
空间节省：在不牺牲功能的情况下，节省界面空间

7. 完整代码分析

让我们回顾完整的TaskItem组件代码：

@Component
struct TaskItem {
    @Prop task: string
    @State showActions: boolean = false
    build() {
        Row({ space: 16 })
        {
            // 任务内容（垂直排列）
            Column({ space: 4 }) {
                Text(this.task)
                    .fontSize(16)
                    .fontWeight(500)
                Text('2025-05-30 14:00')
                    .fontSize(12)
                    .fontColor(0x666666)
            }
            // 操作按钮（水平排列，悬停显示）
            if (this.showActions) {
                Row({ space: 8 }) {
                    Button('编辑')
                        .width(48)
                        .height(28)
                        .fontSize(12)
                        .backgroundColor(0xE0F5FF)
                        .fontColor(0x007DFF)
                    Button('删除')
                        .width(48)
                        .height(28)
                        .fontSize(12)
                        .backgroundColor(0xFFF0F0)
                        .fontColor(0xFF4D4F53)
                }
                .alignItems(VerticalAlign.Center)
                .justifyContent(FlexAlign.Center)
            }
        }
        .width('100%')
        .padding({ left: 12,right:12, top: 16, bottom: 16 })
        .backgroundColor(0xFFFFFF)
        .borderRadius(8)
        .shadow({ radius: 2, color: 0x05000000 })
        .onHover((isHover: boolean, event: HoverEvent)=>{
            if (isHover) {this.showActions = true}else{
                this.showActions = false
            }
        }) // 鼠标悬停显示操作按钮
    }
}

7.1 代码结构分析

组件定义：使用@Component装饰器定义TaskItem自定义组件
属性与状态：定义@Prop属性接收任务文本，定义@State状态控制操作按钮显示
布局结构：

外层Row：水平排列任务内容和操作按钮
内层Column：垂直排列任务标题和日期
条件渲染Row：根据状态显示或隐藏操作按钮

样式设置：设置卡片式样式，包括背景色、圆角和阴影
交互处理：通过onHover事件实现鼠标悬停交互

7.2 布局嵌套层次

本案例展示了多层嵌套布局的实现方式：

第一层：TaskItem组件的Row（水平排列）
第二层：左侧Column（垂直排列）和右侧条件渲染Row（水平排列）
第三层：文本组件和按钮组件

这种多层嵌套的布局结构能够实现复杂的界面设计，同时保持代码的清晰和可维护性。

8. 总结

通过本教程的两个部分，我们详细讲解了如何使用Column和Row组件的嵌套组合，结合自定义组件和条件渲染，创建一个交互式任务列表

27.[HarmonyOS NEXT Column案例六（下）] 任务项交互设计：条件渲染与事件处理的高级应用

效果演示

1. 引言

2. TaskItem组件设计

2.1 组件定义与状态管理

2.2 装饰器的作用与区别

2.2.1 @Component装饰器

2.2.2 @Prop装饰器

2.2.3 @State装饰器

3. Row布局实现

3.1 基本结构

3.2 Row属性详解

3.3 卡片式设计的实现

4. 任务内容区域的Column布局

4.1 基本结构

4.2 Column属性详解

4.3 文本组件的实现

4.3.1 任务标题

4.3.2 任务日期

4.4 文本层次设计

5. 操作按钮区域的条件渲染

5.1 条件渲染的实现

5.2 Row布局属性

5.3 按钮样式设计

5.3.1 编辑按钮

5.3.2 删除按钮

5.4 按钮的视觉差异化

6. 交互事件处理

6.1 悬停事件的实现

6.2 状态管理与UI更新

6.3 交互设计的优势

7. 完整代码分析

7.1 代码结构分析

7.2 布局嵌套层次

8. 总结

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

27.[HarmonyOS NEXT Column案例六（下）] 任务项交互设计：条件渲染与事件处理的高级应用

效果演示

1. 引言

2. TaskItem组件设计

2.1 组件定义与状态管理

2.2 装饰器的作用与区别

2.2.1 @Component装饰器

2.2.2 @Prop装饰器

2.2.3 @State装饰器

3. Row布局实现

3.1 基本结构

3.2 Row属性详解

3.3 卡片式设计的实现

4. 任务内容区域的Column布局

4.1 基本结构

4.2 Column属性详解

4.3 文本组件的实现

4.3.1 任务标题

4.3.2 任务日期

4.4 文本层次设计

5. 操作按钮区域的条件渲染

5.1 条件渲染的实现

5.2 Row布局属性

5.3 按钮样式设计

5.3.1 编辑按钮

5.3.2 删除按钮

5.4 按钮的视觉差异化

6. 交互事件处理

6.1 悬停事件的实现

6.2 状态管理与UI更新

6.3 交互设计的优势

7. 完整代码分析

7.1 代码结构分析

7.2 布局嵌套层次

8. 总结

热门文章

最新文章

相关电子书