#跟着晓明学鸿蒙# HarmonyOS消息输入功能实现：构建灵活的聊天输入界面

本篇文章将详细介绍如何在HarmonyOS NEXT中实现即时通讯应用的消息输入功能。通过使用ColumnSplit组件和合理的布局设计，我们将实现一个包含表情、图片选择和消息发送的专业输入界面。实现了灵活的输入框布局添加了表情和图片功能按钮实现了消息发送功能优化了输入区域的交互体验。

破晓yo

443人浏览 · 2025-05-20 17:16:44

破晓yo · 2025-05-20 17:16:44 发布

@Entry
@Component
struct ChatApp {
  // 输入框内容
  @State inputText: string = ''

  build() {
    Column() {
      // 分割线和输入区域
      ColumnSplit() {
        divider({
          strokeWidth: 1,
          color: '#E9ECEF'
        })

        Column() {
          Row() {
            // 功能按钮区域
            Image($r('app.media.emoji'))
              .width(24)
              .height(24)
              .margin({ right: 10 })
            Image($r('app.media.image'))
              .width(24)
              .height(24)
              .margin({ right: 10 })

            // 消息输入框
            TextInput({ text: this.inputText })
              .width('100%')
              .height(36)
              .backgroundColor('#F5F5F5')
              .borderRadius(18)
              .padding({ left: 15, right: 15 })
              .onChange((value: string) => {
                this.inputText = value
              })

            // 发送按钮
            Button('发送')
              .height(36)
              .width(60)
              .margin({ left: 10 })
              .backgroundColor('#339AF0')
              .borderRadius(18)
              .enabled(this.inputText.length > 0)
              .onClick(() => {
                if (this.inputText.length > 0) {
                  this.messages.push({
                    id: this.messages.length + 1,
                    senderId: 0,
                    content: this.inputText,
                    time: '现在',
                    type: 'text'
                  })
                  this.inputText = ''
                }
              })
          }
          .width('100%')
          .padding(10)
        }
        .backgroundColor(Color.White)
      }
    }
    .layoutWeight(1)
    .height('100%')
  }
}