鸿蒙ArkTS/ArkUI电商实战系列
本章内容
互动聊天，气泡绘制
效果图：
效果图
相关源码：
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
