鴻蒙ArkTS/ArkUI電商實(shí)戰(zhàn)系列

• 閃屏頁
• 主框架導(dǎo)航
• 首頁
• 注冊(cè)頁
• 登錄頁
• 個(gè)人中心
• 分類頁
• 聊天頁
• 全局添加加載loading提示

本章內(nèi)容

互動(dòng)聊天，氣泡繪制

效果圖：

效果圖

相關(guān)源碼：
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: '這是左邊的測試互數(shù)據(jù)'})
        }
        ListItem() {
          ChatItem({isLeft: true, content: '這是左邊的測試互數(shù)據(jù)這是左邊的測試互數(shù)據(jù)這是左邊的測試互數(shù)據(jù)這是左邊的測試互數(shù)據(jù)'})
        }
        ListItem() {
          ChatItem({isLeft: false, content: '這是右邊的測試互數(shù)據(jù)這是右邊的測試互數(shù)據(jù)這是右邊的測試互數(shù)據(jù)'})
        }
        ListItem() {
          ChatItem({isLeft: true, content: '這是左邊的測試互數(shù)據(jù)'})
        }
      }
      .backgroundColor(0x0D182431)
      .height('100%')
    }
    .height('100%')
  }
}

ChatItem.ets