聊天气泡背景图

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 {
                   }
                 }
               }
+              Row() {
                 messageContent({
                   message: this.message,
                   onMessageClick: this.onMessageClick,
                   chatInfo: this.chatUserInfo
                 })
-                .backgroundColor($r('app.color.color_chat_send_message_bg'))
+                  .backgroundImage(this.message.getMessageType() !== 100?$r('app.media.im_my_message_back_icon'):$r('app.media.im_my_message_white_back_icon'))
-                .borderRadius(6)
+                  .backgroundImageSize({ width: '100%', height: '100%' })
-                // .backgroundImage($r('app.media.green_bg'))
+                  .backgroundImageResizable({
-                // .backgroundImageSize({ width: '100%', height: '100%' }) // 背景覆盖整个组件区域
+                    slice:{
-                // .backgroundImageResizable({
+                      top:24,right:36,bottom:24,left:24
-                //   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)
                   })
-                .margin({ top: 4, right: 6 })
+                  .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') :
+        // .backgroundColor(this.message.isPinMsg ? $r('app.color.color_chat_pin_bg') :
-        $r('app.color.color_chat_page_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,15 +362,29 @@ export struct ReceiveMessageComponent {
             }
 
             Column() {
+              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
                 })
-                .backgroundColor($r('app.color.color_chat_receive_message_bg'))
+                  .backgroundImage($r('app.media.im_my_message_white_back_icon'))
-                .borderRadius(6)
+                  .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
@@ -367,6 +392,7 @@ export struct ReceiveMessageComponent {
                     this.onMessageClick?.onItemClick?.(event, this.message)
                   })
               }
+            }
             .width('100%')
             //.height(this.message?.getMessageHeight(this.getUIContext()))
             .alignItems(HorizontalAlign.Start)
@@ -390,11 +416,13 @@ export struct ReceiveMessageComponent {
         }
         .width('100%')
         .alignItems(VerticalAlign.Top)
-        .backgroundColor(this.message?.isPinMsg ? $r('app.color.color_chat_pin_bg') :
+        // .backgroundColor(this.message?.isPinMsg ? $r('app.color.color_chat_pin_bg') :
-        $r('app.color.color_chat_page_bg'))
+        // $r('app.color.color_chat_page_bg'))
+        .backgroundColor('#f4f4f4')
         .id('itemContainer')
       }
     }.width('100%').padding({ top: 6, bottom: 6 })
+    .backgroundColor('#f4f4f4')
   }
 }