项目已开源，开源地址： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial ， 欢迎fork & star
效果演示
1. 引言
在HarmonyOS NEXT应用开发中，聊天界面是一种常见且复杂的界面类型，它需要展示消息列表、输入区域以及各种交互元素。本教程将详细讲解如何使用Column组件作为主容器，结合Stack组件实现层叠布局，创建一个现代化的聊天界面。通过ChatPage组件的实际案例，我们将展示如何构建包含消息列表和输入区域的复合布局，帮助开发者掌握复杂布局的实现技巧。
2. 整体布局结构
2.1 双区域布局概述
ChatPage组件采用了经典的双区域布局结构，包括：
- 消息列表区域：弹性填充，展示聊天消息
- 底部输入区域：固定高度，提供消息输入和表情选择功能
这种布局模式在聊天应用中非常常见，适用于即时通讯、客服系统等多种场景。
2.2 组件结构代码
@Component export struct ChatPage { @State messages: string[] = ['你好，今天需要开发布局功能', '收到，马上开始编写示例'] @State inputText: string = '' @State showEmoji: boolean = false build() { Column() { // 消息列表区域 Column({ space: 12 }) { // 消息列表内容 } .width('100%') .flexGrow(1) // 消息列表弹性填充 .padding({ top: 24, left: 16,right: 16 }) // 底部输入区域 Row({ space: 16 }) { // 输入区域内容 } .width('100%') .height(64) .padding({ left: 16,right:16, bottom: 24 }) .backgroundColor(0xFFFFFF) } .width('100%') .height('100%') } }
2.3 布局层次结构
聊天页面的组件层次结构如下：
- Column（外层容器）
- Column（消息列表区域）
- ForEach（循环渲染消息）
- Stack（每条消息的容器）
- Text（消息内容）
- Text（时间戳）
- Row（底部输入区域）
- 条件渲染（表情按钮或表情面板）
- Stack（表情面板）或 Button（表情按钮）
- TextInput（输入框）
这种多层嵌套的结构使用了组件组合的方式，将复杂的界面拆分为可管理的小组件，提高了代码的可维护性和复用性。
2.4 状态管理
@State messages: string[] = ['你好，今天需要开发布局功能', '收到，马上开始编写示例'] @State inputText: string = '' @State showEmoji: boolean = false
装饰器 |
属性 |
类型 |
初始值 |
说明 |
@State |
messages |
string[] |
['你好，今天需要开发布局功能', '收到，马上开始编写示例'] |
组件内部状态，存储消息列表 |
@State |
inputText |
string |
'' |
组件内部状态，存储输入框文本 |
@State |
showEmoji |
boolean |
false |
组件内部状态，控制表情面板显示 |
在这个组件中，我们使用@State装饰器定义了三个状态变量：
- messages：存储聊天消息列表，初始包含两条示例消息
- inputText：存储输入框的文本内容，初始为空字符串
- showEmoji：控制表情面板的显示状态，初始为false（不显示）
这些状态变量的变化会触发组件的重新渲染，实现界面的动态更新。
3. 外层Column容器
3.1 基本结构
Column() { // 子组件 } .width('100%') .height('100%')
外层Column作为整个聊天页面的容器，负责垂直排列所有的区域组件。
3.2 Column属性详解
属性/参数 |
值 |
作用 |
width |
100% |
设置Column宽度占父容器的100% |
height |
100% |
设置Column高度占父容器的100% |
这两个属性确保了聊天页面能够填满整个屏幕，提供完整的用户界面体验。
3.3 布局特点分析
外层Column容器的特点包括：
- 全屏布局：通过width('100%')和height('100%')实现全屏显示
- 垂直排列：自动将子组件按照从上到下的顺序排列
- 区域划分：清晰地将界面分为消息列表和输入区域两个部分
- 嵌套容器：每个区域内部又可以使用不同的容器组件进行布局
这种布局方式非常适合构建具有明确区域划分的界面，如聊天页面、列表详情页等。
4. 消息列表区域实现
4.1 Column布局基本结构
Column({ space: 12 }) { // 支持滚动 ForEach(this.messages, (msg:string, index) => { Stack() // 每条消息嵌套Stack层叠时间戳 { Text(msg) .padding(12) .backgroundColor(index % 2 === 0 ? 0xE5F5FF : 0xFFFFFF) .borderRadius(8) .textOverflow({overflow: TextOverflow.MARQUEE}) // 时间戳（右上角显示） Text('14:25') .fontSize(12) .fontColor(0x666666) .align(Alignment.TopStart) .margin(4) .textOverflow({overflow: TextOverflow.MARQUEE}) } .width('100%') }, (msg:string) => msg) } .width('100%') .flexGrow(1) // 消息列表弹性填充 .padding({ top: 24, left: 16,right: 16 })
消息列表区域使用Column组件实现垂直布局，内部使用ForEach循环渲染消息项。
4.2 Column属性详解
属性/参数 |
值 |
作用 |
space |
12 |
设置子组件之间的垂直间距为12vp |
width |
100% |
设置Column宽度占父容器的100% |
flexGrow |
1 |
设置弹性增长因子为1，使其填充剩余空间 |
padding |
{ top: 24, left: 16, right: 16 } |
设置内边距，使内容与边缘保持适当距离 |
消息列表区域的设计考虑了以下几个方面：
- 弹性填充：通过flexGrow(1)属性，使消息列表区域能够自动填充除底部输入区域外的所有可用空间
- 消息间距：通过space(12)属性，设置消息之间的垂直间距为12vp，提高可读性
- 内边距：通过padding属性，设置顶部和左右的内边距，使内容不会贴近屏幕边缘
- 全宽显示：通过width('100%')属性，使消息列表区域占据父容器的全部宽度
这些设计规范有助于创建一个清晰、易用的消息列表区域，提升用户体验。
4.3 ForEach循环渲染
ForEach(this.messages, (msg:string, index) => { Stack() // 每条消息嵌套Stack层叠时间戳 { // 消息内容和时间戳 } .width('100%') }, (msg:string) => msg)
参数 |
值 |
作用 |
数据源 |
this.messages |
指定要循环的数据数组 |
项目构建器 |
(msg, index) => {} |
定义如何为每个数据项构建UI组件 |
唯一标识符 |
(msg) => msg |
为每个项目提供唯一标识，优化渲染性能 |
ForEach组件用于循环渲染消息列表，它接受三个参数：
- 数据源：this.messages数组，包含所有要显示的消息
- 项目构建器：一个函数，定义如何为每个消息构建UI组件
- 唯一标识符：一个函数，为每个消息提供唯一标识，这里直接使用消息文本作为标识
通过ForEach组件，我们可以根据数据源动态生成消息列表，当数据源发生变化时，界面会自动更新。
4.4 Stack层叠布局
Stack() // 每条消息嵌套Stack层叠时间戳 { Text(msg) .padding(12) .backgroundColor(index % 2 === 0 ? 0xE5F5FF : 0xFFFFFF) .borderRadius(8) .textOverflow({overflow: TextOverflow.MARQUEE}) // 时间戳（右上角显示） Text('14:25') .fontSize(12) .fontColor(0x666666) .align(Alignment.TopStart) .margin(4) .textOverflow({overflow: TextOverflow.MARQUEE}) } .width('100%')
Stack组件用于创建层叠布局，使时间戳可以覆盖在消息内容上方。
属性/参数 |
值 |
作用 |
width |
100% |
设置Stack宽度占父容器的100% |
Stack组件的特点是：
- 层叠布局：子组件按照添加顺序从下到上层叠显示
- 相对定位：子组件可以通过align属性进行定位
- 全宽显示：通过width('100%')属性，使Stack组件占据父容器的全部宽度
这种层叠布局非常适合实现消息气泡和时间戳的组合显示，使界面更加紧凑和信息丰富。
4.5 消息内容实现
Text(msg) .padding(12) .backgroundColor(index % 2 === 0 ? 0xE5F5FF : 0xFFFFFF) .borderRadius(8) .textOverflow({overflow: TextOverflow.MARQUEE})
属性 |
值 |
作用 |
构造参数 |
msg |
设置文本内容为当前消息 |
padding |
12 |
设置内边距为12vp，使文本与边缘保持距离 |
backgroundColor |
index % 2 === 0 ? 0xE5F5FF : 0xFFFFFF |
设置交替背景色，区分不同消息 |
borderRadius |
8 |
设置边框圆角为8vp，创建气泡效果 |
textOverflow |
{overflow: TextOverflow.MARQUEE} |
设置文本溢出时显示跑马灯效果 |
消息内容的设计考虑了以下几个方面：
- 气泡效果：通过padding和borderRadius属性，创建类似聊天气泡的视觉效果
- 交替背景色：通过条件表达式设置不同的背景色，区分不同的消息，提高可读性
- 文本溢出处理：通过textOverflow属性，设置文本溢出时显示跑马灯效果，确保长消息也能完整显示
这些设计规范有助于创建一个清晰、易读的消息显示效果，提升用户体验。
4.6 时间戳实现
Text('14:25') .fontSize(12) .fontColor(0x666666) .align(Alignment.TopStart) .margin(4) .textOverflow({overflow: TextOverflow.MARQUEE})
属性 |
值 |
作用 |
构造参数 |
'14:25' |
设置文本内容为固定时间 |
fontSize |
12 |
设置字体大小为12vp |
fontColor |
0x666666 |
设置字体颜色为灰色 |
align |
Alignment.TopStart |
设置对齐方式为左上角 |
margin |
4 |
设置外边距为4vp，与消息内容保持适当距离 |
textOverflow |
{overflow: TextOverflow.MARQUEE} |
设置文本溢出时显示跑马灯效果 |
时间戳的设计考虑了以下几个方面：
- 小字体：使用12vp的字体大小，使时间戳不会过于突兀
- 灰色文本：使用灰色字体，降低视觉权重，不与主要内容竞争注意力
- 左上角定位：通过align(Alignment.TopStart)属性，将时间戳定位在左上角
- 适当间距：通过margin(4)属性，与消息内容保持适当距离
这些设计规范有助于创建一个不引人注目但信息丰富的时间戳显示，提升用户体验。
5. 总结与展望
在本教程的第一部分，我们详细讲解了聊天页面的整体布局结构和消息列表区域的实现， 在下一部分中，我们将深入探讨底部输入区域的实现，包括Row布局的使用、条件渲染表情按钮以及输入框的样式设计，帮助开发者掌握更复杂的布局和交互技巧。
