聊天气泡背景图

chatkit_ui/src/main/ets/pages/ChatP2PPage.ets

@@ -1173,6 +1173,7 @@ export struct ChatP2PPage {
       .expandSafeArea([SafeAreaType.KEYBOARD])
       .zIndex(1)
     }
+    .backgroundColor('#f4f4f4')
 
     // }
 

chatkit_ui/src/main/ets/view/MessageComponent.ets

@@ -196,28 +196,37 @@ export struct SenderMessageComponent {
                   }
                 }
               }
-              messageContent({
-                message: this.message,
-                onMessageClick: this.onMessageClick,
-                chatInfo: this.chatUserInfo
-              })
-                .backgroundColor($r('app.color.color_chat_send_message_bg'))
-                .borderRadius(6)
-                // .backgroundImage($r('app.media.green_bg'))
-                // .backgroundImageSize({ width: '100%', height: '100%' }) // 背景覆盖整个组件区域
-                // .backgroundImageResizable({
-                //   slice: { top: 100, left: 50, bottom: 2, right: 60 } // 圆角区域不拉伸
-                //
-                // })
-                .onClick((event: ClickEvent) => {
-                  if (this.showRadio) {
-                    this.radioOn = !this.radioOn
-                  }
-                  this.onMessageClick?.onItemClick?.(event, this.message)
+              Row() {
+                messageContent({
+                  message: this.message,
+                  onMessageClick: this.onMessageClick,
+                  chatInfo: this.chatUserInfo
                 })
-                .margin({ top: 4, right: 6 })
-                .flexShrink(1)
-                .id("msgContainer")
+                  .backgroundImage(this.message.getMessageType() !== 100?$r('app.media.im_my_message_back_icon'):$r('app.media.im_my_message_white_back_icon'))
+                  .backgroundImageSize({ width: '100%', height: '100%' })
+                  .backgroundImageResizable({
+                    slice:{
+                      top:24,right:36,bottom:24,left:24
+                    }
+                  })
+                  .onClick((event: ClickEvent) => {
+                    if (this.showRadio) {
+                      this.radioOn = !this.radioOn
+                    }
+                    this.onMessageClick?.onItemClick?.(event, this.message)
+                  })
+                  .margin({top:2})
+                  .flexShrink(1)
+                  .id("msgContainer")
+
+                Image(this.message.getMessageType() !== 100?$r('app.media.im_my_message_jiantou_icon'):$r('app.media.im_my_message_white_jiantou_icon'))
+                  .width(7)
+                  .height(14)
+                  .alignSelf(ItemAlign.Start)
+                  .margin({top:17,left:-1})
+                  .visibility(this.message.getMessageType() !== 1?Visibility.Visible:Visibility.Hidden)
+              }
+
             }
             .justifyContent(FlexAlign.End)
             .alignItems(VerticalAlign.Bottom)
@@ -261,13 +270,15 @@ export struct SenderMessageComponent {
             })
         }
         .width('100%')
-        .backgroundColor(this.message.isPinMsg ? $r('app.color.color_chat_pin_bg') :
-        $r('app.color.color_chat_page_bg'))
+        // .backgroundColor(this.message.isPinMsg ? $r('app.color.color_chat_pin_bg') :
+        // $r('app.color.color_chat_page_bg'))
+        .backgroundColor('#f4f4f4')
         .justifyContent(FlexAlign.End)
         .alignItems(VerticalAlign.Top)
       }
     }
     .width('100%').margin({ top: 6, bottom: 6 })
+    .backgroundColor('#f4f4f4')
   }
 }
 
@@ -351,21 +362,36 @@ export struct ReceiveMessageComponent {
             }
 
             Column() {
-              messageContent({
-                message: this.message,
-                onMessageClick: this.onMessageClick,
-                chatInfo: this.chatUserInfo
-              })
-                .backgroundColor($r('app.color.color_chat_receive_message_bg'))
-                .borderRadius(6)
-                .id("msgContainer")
-                .alignRules(this.AlignLeft)
-                .onClick((event: ClickEvent) => {
-                  if (this.showRadio) {
-                    this.radioOn = !this.radioOn
-                  }
-                  this.onMessageClick?.onItemClick?.(event, this.message)
+              Row() {
+                Image($r('app.media.im_from_message_white_jiantou_icon'))
+                  .width(7)
+                  .height(14)
+                  .alignSelf(ItemAlign.Start)
+                  .margin({top:10})
+                  .visibility(this.message.getMessageType() !== 1?Visibility.Visible:Visibility.Hidden)
+
+                messageContent({
+                  message: this.message,
+                  onMessageClick: this.onMessageClick,
+                  chatInfo: this.chatUserInfo
                 })
+                  .backgroundImage($r('app.media.im_my_message_white_back_icon'))
+                  .backgroundImageSize({ width: '100%', height: '100%' })
+                  .backgroundImageResizable({
+                    slice:{
+                      top:24,right:36,bottom:24,left:24
+                    }
+                  })
+                  .id("msgContainer")
+                  .alignRules(this.AlignLeft)
+                  .margin({top:-2})
+                  .onClick((event: ClickEvent) => {
+                    if (this.showRadio) {
+                      this.radioOn = !this.radioOn
+                    }
+                    this.onMessageClick?.onItemClick?.(event, this.message)
+                  })
+              }
             }
             .width('100%')
             //.height(this.message?.getMessageHeight(this.getUIContext()))
@@ -390,11 +416,13 @@ export struct ReceiveMessageComponent {
         }
         .width('100%')
         .alignItems(VerticalAlign.Top)
-        .backgroundColor(this.message?.isPinMsg ? $r('app.color.color_chat_pin_bg') :
-        $r('app.color.color_chat_page_bg'))
+        // .backgroundColor(this.message?.isPinMsg ? $r('app.color.color_chat_pin_bg') :
+        // $r('app.color.color_chat_page_bg'))
+        .backgroundColor('#f4f4f4')
         .id('itemContainer')
       }
     }.width('100%').padding({ top: 6, bottom: 6 })
+    .backgroundColor('#f4f4f4')
   }
 }