30.[HarmonyOS NEXT Column案例八（上）] 构建现代聊天界面：层叠布局与消息列表的实现

全栈若城

发布于 2025-06-01 08:31:26

2950

文章被收录于专栏：若城技术专栏若城技术专栏

项目已开源，开源地址： 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}	设置文本溢出时显示跑马灯效果