鸿蒙ArkTS/ArkUI电商实战系列

• 闪屏页
• 主框架导航
• 首页
• 注册页
• 登录页
• 个人中心
• 分类页
• 聊天页
• 全局添加加载loading提示

本章内容

互动聊天，气泡绘制

效果图：

效果图

相关源码：
ChatPage.ets

import ChatItem from '../component/ChatItem'

@Entry
@Component
struct ChatPage {

  build() {
    Column() {
      Row() {
        Text('聊天列表')
          .fontWeight(500)
          .height(60)
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .backgroundColor(0x70DBDB)
      List({space: 0}) {
        ListItem() {
          ChatItem({isLeft: true, content: '这是左边的测试互数据'})
        }
        ListItem() {
          ChatItem({isLeft: true, content: '这是左边的测试互数据这是左边的测试互数据这是左边的测试互数据这是左边的测试互数据'})
        }
        ListItem() {
          ChatItem({isLeft: false, content: '这是右边的测试互数据这是右边的测试互数据这是右边的测试互数据'})
        }
        ListItem() {
          ChatItem({isLeft: true, content: '这是左边的测试互数据'})
        }
      }
      .backgroundColor(0x0D182431)
      .height('100%')
    }
    .height('100%')
  }
}

ChatItem.ets