使用ArkUI的组件库，设计并实现一个支持自定义布局与样式的聊天界面？

Question

使用ArkUI的组件库，设计并实现一个支持自定义布局与样式的聊天界面

Answer 1

创建一个自定义的消息组件，可以根据消息的类型（发送方、接收方）来设置不同的样式。

@Component
struct MessageItem {
  message: string
  isSender: boolean

  build() {
    Row({ space: 8 }) {
      if (this.isSender) {
        // 发送方消息样式
        Text(this.message)
         .backgroundColor('#D1E9FF')
         .padding({ left: 16, right: 16, top: 8, bottom: 8 })
         .borderRadius(8)
      } else {
        // 接收方消息样式
        Text(this.message)
         .backgroundColor('#F5F5F5')
         .padding({ left: 16, right: 16, top: 8, bottom: 8 })
         .borderRadius(8)
      }
    }
  }
}