31.[HarmonyOS NEXT Column案例八（下）] 交互式输入区域：条件渲染与层叠布局的高级应用

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

效果演示

1. 引言

在上一篇教程中，我们介绍了聊天页面的整体布局结构和消息列表区域的实现。本篇教程将继续深入探讨ChatPage组件的底部输入区域的实现，重点讲解Row布局的使用、条件渲染表情按钮以及Stack层叠布局在交互元素中的应用。通过这些技巧，我们可以创建一个既美观又实用的聊天输入界面，提升用户体验。

2. 底部输入区域实现

2.1 Row布局基本结构

Row({ space: 16 })
  {
    // 表情按钮（悬浮层叠在输入框上方）
    if (this.showEmoji) {
        Stack() {
            // 表情面板内容
        }
    } else {
        Button('+')
            // 表情按钮样式
    }

    // 输入框
    TextInput({text:this.inputText})
        // 输入框样式
}  .width('100%')
.height(64)
.padding({ left: 16,right:16, bottom: 24 })
.backgroundColor(0xFFFFFF)

底部输入区域使用Row组件实现水平布局，将表情按钮和输入框放置在同一行。

2.2 Row属性详解

属性/参数	值	作用
space	16	设置子组件之间的水平间距为16vp
width	100%	设置Row宽度占父容器的100%
height	64	设置Row高度为64vp，形成固定高度的输入栏
padding	{ left: 16, right: 16, bottom: 24 }	设置内边距，使内容与边缘保持适当距离
backgroundColor	0xFFFFFF	设置背景色为白色

底部输入区域的设计考虑了以下几个方面：

1. 固定高度：64vp的高度提供了足够的操作空间，同时不会占用过多屏幕空间
2. 组件间距：16vp的间距使表情按钮和输入框之间有明确的视觉分隔
3. 内边距：左右和底部的内边距确保内容不会贴近屏幕边缘，提高可用性
4. 白色背景：白色背景使输入区域在视觉上与消息列表区域分离，增强层次感

这些设计规范有助于创建一个清晰、易用的输入区域，提升用户体验。

3. 条件渲染表情按钮

3.1 条件渲染基本结构

if (this.showEmoji) {
    Stack() {
        Row()
            .width(48)
            .height(48)
            .opacity(0) // 透明蒙层


        Button('😀')
            .width(48)
            .height(48)
            .fontSize(20)
            .backgroundColor(0xF5F5F5)
            .borderRadius(24)
            .onClick(() => this.showEmoji = false)
    }
} else {
    Button('+')
        .width(48)
        .height(48)
        .fontSize(20)
        .backgroundColor(0xF5F5F5)
        .borderRadius(24)
        .onClick(() => this.showEmoji = true)
}

条件渲染使用if-else语句根据showEmoji状态变量的值决定显示表情面板还是表情按钮。

3.2 条件渲染机制分析

条件渲染是HarmonyOS NEXT中实现动态UI的重要机制，它基于以下原理：

1. 状态驱动：通过@State装饰的状态变量控制条件渲染的流程
2. 声明式语法：使用if-else语句直接在UI构建函数中声明条件逻辑
3. 响应式更新：当状态变量变化时，UI会自动重新渲染，显示相应的组件

在这个案例中，showEmoji状态变量控制着表情面板的显示状态：

• 当showEmoji为true时，显示表情面板（使用Stack组件实现）
• 当showEmoji为false时，显示表情按钮（使用Button组件实现）

通过点击事件改变showEmoji的值，实现表情面板和表情按钮之间的切换。

3.3 表情按钮实现

Button('+')
    .width(48)
    .height(48)
    .fontSize(20)
    .backgroundColor(0xF5F5F5)
    .borderRadius(24)
    .onClick(() => this.showEmoji = true)

属性	值	作用
构造参数	'+'	设置按钮文本为加号
width	48	设置按钮宽度为48vp
height	48	设置按钮高度为48vp
fontSize	20	设置字体大小为20vp
backgroundColor	0xF5F5F5	设置背景色为浅灰色
borderRadius	24	设置边框圆角为24vp，创建圆形按钮效果
onClick	() => this.showEmoji = true	设置点击事件处理函数，显示表情面板

表情按钮的设计考虑了以下几个方面：

1. 圆形设计：通过相等的宽高和大圆角，创建圆形按钮效果
2. 适当大小：48vp的尺寸提供了足够的点击区域，适合手指操作
3. 视觉反馈：浅灰色背景与白色输入区域形成对比，提高可识别性
4. 交互响应：通过onClick事件处理函数，实现点击后显示表情面板的功能

这些设计规范有助于创建一个既美观又实用的表情按钮，提升用户体验。

4. 表情面板的Stack层叠布局

4.1 Stack布局基本结构

Stack() {
    Row()
        .width(48)
        .height(48)
        .opacity(0) // 透明蒙层


    Button('😀')
        .width(48)
        .height(48)
        .fontSize(20)
        .backgroundColor(0xF5F5F5)
        .borderRadius(24)
        .onClick(() => this.showEmoji = false)
}

Stack组件用于创建层叠布局，使表情按钮可以叠加在透明蒙层上方。

4.2 Stack层叠原理

Stack组件是HarmonyOS NEXT中实现层叠布局的核心组件，它基于以下原理：

1. 层叠顺序：子组件按照添加顺序从下到上层叠显示
2. 相对定位：子组件默认居中对齐，可以通过align属性调整位置
3. 尺寸继承：Stack组件默认采用子组件中最大的尺寸

在这个案例中，Stack组件包含两个子组件：

1. 透明蒙层：一个不可见的Row组件，用于占位
2. 表情按钮：一个显示表情符号的Button组件

这种层叠结构使表情按钮可以叠加在透明蒙层上方，创建更丰富的视觉效果。

4.3 透明蒙层实现

Row()
    .width(48)
    .height(48)
    .opacity(0) // 透明蒙层

属性	值	作用
width	48	设置蒙层宽度为48vp
height	48	设置蒙层高度为48vp
opacity	0	设置不透明度为0，使蒙层完全透明

透明蒙层的设计考虑了以下几个方面：

1. 尺寸匹配：与表情按钮相同的尺寸，确保完全覆盖
2. 完全透明：通过opacity(0)属性，使蒙层完全不可见
3. 占位作用：虽然不可见，但在Stack布局中占据空间，影响整体布局

透明蒙层在这个案例中主要起到占位作用，为表情按钮提供一个固定的位置和尺寸。

4.4 表情按钮实现

Button('😀')
    .width(48)
    .height(48)
    .fontSize(20)
    .backgroundColor(0xF5F5F5)
    .borderRadius(24)
    .onClick(() => this.showEmoji = false)

属性	值	作用
构造参数	'😀'	设置按钮文本为表情符号
width	48	设置按钮宽度为48vp
height	48	设置按钮高度为48vp
fontSize	20	设置字体大小为20vp
backgroundColor	0xF5F5F5	设置背景色为浅灰色
borderRadius	24	设置边框圆角为24vp，创建圆形按钮效果
onClick	() => this.showEmoji = false	设置点击事件处理函数，隐藏表情面板

表情按钮的设计与之前的加号按钮类似，但有以下不同：

1. 内容变化：显示表情符号而不是加号
2. 交互逻辑：点击后隐藏表情面板，而不是显示

这种设计使用户可以通过点击表情按钮来切换表情面板的显示状态，提供直观的交互体验。

5. 输入框实现

5.1 TextInput基本结构

TextInput({text:this.inputText})
    .flexGrow(1)
    .height(48)
    .padding(12)
    .border({ width: 1, color: 0xD9D9D9 })
    .borderRadius(24)

TextInput组件用于创建文本输入框，允许用户输入消息。

5.2 TextInput属性详解

属性/参数	值	作用
构造参数	{text:this.inputText}	绑定输入框文本到inputText状态变量
flexGrow	1	设置弹性增长因子为1，使其填充剩余空间
height	48	设置输入框高度为48vp
padding	12	设置内边距为12vp，使文本与边缘保持距离
border	{ width: 1, color: 0xD9D9D9 }	设置边框宽度为1vp，颜色为浅灰色
borderRadius	24	设置边框圆角为24vp，创建圆角输入框效果

输入框的设计考虑了以下几个方面：

1. 弹性宽度：通过flexGrow(1)属性，使输入框自动填充除表情按钮外的所有可用空间
2. 适当高度：48vp的高度提供了足够的输入空间，同时保持与表情按钮的视觉平衡
3. 内边距：12vp的内边距使文本不会贴近输入框边缘，提高可读性
4. 边框样式：1vp宽的浅灰色边框提供了清晰的视觉边界，但不会过于突兀
5. 圆角设计：24vp的圆角使输入框呈现为胶囊形状，与圆形表情按钮形成视觉呼应

这些设计规范有助于创建一个既美观又实用的输入框，提升用户体验。

6. 状态管理与交互实现

6.1 状态变量定义

@State messages: string[] = ['你好，今天需要开发布局功能', '收到，马上开始编写示例']
@State inputText: string = ''
@State showEmoji: boolean = false

这三个状态变量分别控制着聊天页面的不同方面：

1. messages：控制消息列表的内容
2. inputText：控制输入框的文本
3. showEmoji：控制表情面板的显示状态

6.2 表情面板交互实现

// 显示表情面板
.onClick(() => this.showEmoji = true)

// 隐藏表情面板
.onClick(() => this.showEmoji = false)

表情面板的交互通过改变showEmoji状态变量的值来实现：

1. 显示表情面板：点击加号按钮，将showEmoji设置为true
2. 隐藏表情面板：点击表情按钮，将showEmoji设置为false

这种基于状态的交互模式是HarmonyOS NEXT中实现动态UI的常用方式，它具有以下优势：

1. 声明式编程：通过声明状态和UI之间的关系，而不是命令式地操作DOM
2. 自动更新：当状态变化时，UI会自动更新，无需手动操作
3. 代码简洁：减少了大量的命令式代码，使代码更加简洁和可维护

6.3 完整交互流程

聊天页面的完整交互流程如下：

1. 初始状态：显示消息列表和底部输入区域，表情面板隐藏
2. 显示表情：点击加号按钮，showEmoji变为true，显示表情面板
3. 选择表情：点击表情按钮，showEmoji变为false，隐藏表情面板
4. 输入文本：在输入框中输入文本，更新inputText状态变量

这种交互流程简单直观，符合用户的使用习惯，提供了良好的用户体验。

7. 层叠嵌套布局的高级应用

7.1 多层嵌套结构分析

ChatPage组件展示了多层嵌套布局的高级应用：

1. 第一层：外层Column（垂直排列）
2. 第二层：消息列表Column和底部输入Row（垂直和水平排列）
3. 第三层：ForEach循环和条件渲染（动态内容生成）
4. 第四层：Stack层叠布局（层叠效果）

这种多层嵌套的布局结构使我们能够：

1. 精确控制：对每个区域和组件进行精确的布局和样式控制
2. 复杂效果：实现消息气泡、时间戳叠加、表情面板等复杂效果
3. 动态内容：通过ForEach和条件渲染，实现动态内容生成
4. 交互响应：通过事件处理和状态管理，实现丰富的交互体验

7.2 Stack组件的多场景应用

在这个案例中，Stack组件被应用于两个不同的场景：

1. 消息列表：使用Stack叠加消息内容和时间戳
2. 表情面板：使用Stack叠加透明蒙层和表情按钮

这展示了Stack组件的灵活性和多样性，它可以适应不同的布局需求，实现各种复杂的视觉效果。

7.3 条件渲染与状态管理的结合

条件渲染和状态管理的结合是实现动态UI的关键：

1. 状态定义：使用@State装饰器定义状态变量
2. 条件渲染：使用if-else语句根据状态变量决定显示哪些组件
3. 事件处理：通过事件处理函数改变状态变量的值
4. 自动更新：当状态变量变化时，UI自动更新

这种模式使我们能够创建响应用户操作的动态界面，提升用户体验。

8. 总结与实践建议

8.1 核心技术要点

通过ChatPage组件的实现，我们学习了以下核心技术要点：

1. 双区域布局：使用弹性消息列表和固定输入区域的布局结构
2. 多层嵌套：通过Column、Row、Stack的嵌套使用实现复杂布局
3. 层叠效果：使用Stack组件实现消息时间戳和表情面板的层叠效果
4. 条件渲染：使用if-else语句实现表情面板的动态显示
5. 状态管理：使用@State装饰器管理组件状态，实现动态UI

8.2 实践建议

在实际开发中，可以参考以下建议：

1. 布局规划：在编码前先规划界面的整体布局结构，确定各个区域的排列方式
2. 组件分层：将复杂界面拆分为可管理的小组件，提高代码的可维护性
3. 状态设计：仔细设计状态变量，确保它们能够准确反映UI的各个方面
4. 交互优化：为按钮等交互元素提供明确的视觉反馈，提升用户体验
5. 嵌套控制：控制嵌套层级，避免过度嵌套导致性能问题和代码复杂性