项目已开源，开源地址： 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布局的使用、条件渲染表情按钮以及输入框的样式设计，帮助开发者掌握更复杂的布局和交互技巧。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。