import { router } from '@kit.ArkUI'
|
|
class Message {
|
avatar: string | Resource = ''
|
content: string = ''
|
isMe: boolean = false
|
}
|
|
@Entry
|
@Component
|
struct MessageDetailsPage {
|
@State messageList: Message[] = [
|
{ avatar: '', content: '请发一下你的简历给我。', isMe: false },
|
{ avatar: '', content: '这个岗位我十分感兴趣，请看一下我的简历，我觉得我可以胜任这个岗位', isMe: true },
|
|
]
|
aboutToAppear(): void {
|
|
}
|
build() {
|
Column() {
|
Row() {
|
Image($r('app.media.left_icon'))
|
.width(20)
|
.height(20)
|
.onClick(() => {
|
router.back()
|
})
|
Column() {
|
Text('李女士')
|
.fontSize(16)
|
.fontWeight(700)
|
Text('摩米移动科技')
|
.fontSize(12)
|
.fontColor('#666666')
|
.margin({ top: 4 })
|
}
|
|
Row()
|
}
|
.width('100%')
|
.padding(10)
|
.justifyContent(FlexAlign.SpaceBetween)
|
.backgroundColor('#fff')
|
|
Column() {
|
List({ space: 20, initialIndex: 0 }){
|
ForEach(this.messageList, (item: Message) => {
|
ListItem() {
|
if (item.isMe) {
|
Row({ space: 10 }) {
|
Text(item.content)
|
.fontSize(14)
|
.fontColor(Color.White)
|
.fontWeight(500)
|
.backgroundColor('#1761f4')
|
.padding(10)
|
.borderRadius({ topLeft: 12, topRight: 12, bottomLeft: 12 })
|
.constraintSize({ maxWidth: 250 })
|
Image($r('app.media.me_icon'))
|
.width(32)
|
.height(32)
|
}
|
.width('100%')
|
.justifyContent(FlexAlign.End)
|
.alignItems(VerticalAlign.Bottom)
|
} else {
|
Row({ space: 10 }) {
|
Image($r('app.media.avatar'))
|
.width(32)
|
.height(32)
|
Text(item.content)
|
.fontSize(14)
|
.fontColor(Color.Black)
|
.fontWeight(500)
|
.backgroundColor('#FFF')
|
.padding(10)
|
.borderRadius({ topLeft: 12, topRight: 12, bottomRight: 12 })
|
.constraintSize({ maxWidth: 250 })
|
}
|
.width('100%')
|
.alignItems(VerticalAlign.Bottom)
|
.justifyContent(FlexAlign.Start)
|
}
|
}
|
})
|
}
|
.listDirection(Axis.Vertical) // 排列方向
|
.scrollBar(BarState.Off)
|
.friction(0.6)
|
.edgeEffect(EdgeEffect.Spring)
|
.width('100%')
|
}
|
.padding(16)
|
.width('100%')
|
.height(600)
|
|
Row({ space: 8 }) {
|
Image($r('app.media.audio_icon'))
|
.width(24)
|
.height(24)
|
TextInput()
|
.width(240)
|
.placeholderColor('#999999')
|
.backgroundColor('#f3f7fe')
|
Image($r('app.media.expression_icon'))
|
.width(24)
|
.height(24)
|
Image($r('app.media.add_icon'))
|
.width(24)
|
.height(24)
|
}
|
.backgroundColor('#FFF')
|
.width('100%')
|
.height(60)
|
.padding(10)
|
.alignItems(VerticalAlign.Center)
|
|
}
|
.width('100%')
|
.height('100%')
|
.backgroundColor('#f5f5f7')
|
}
|
}
|
