fix:修改聊天UI

example/lib/chatview.dart

@@ -20,19 +20,25 @@ getChannelAvatarURL(UIMsg uiMsg) {
 }
 
 Widget chatAvatar(UIMsg uiMsg) {
-  return Image.network(
+  return ClipRRect(
+    borderRadius: BorderRadius.circular(20),
+    child: Image.network(
       getChannelAvatarURL(uiMsg),
       height: 40,
       width: 40,
       fit: BoxFit.cover,
       errorBuilder:
           (BuildContext context, Object exception, StackTrace? stackTrace) {
-      return Image.asset(
+        return ClipRRect(
+          borderRadius: BorderRadius.circular(20),
+          child: Image.asset(
             'assets/ic_default_avatar.png',
             width: 40,
             height: 40,
+          ),
         );
       },
+    ),
   );
 }
 
@@ -75,87 +81,109 @@ Widget orderView(UIMsg uiMsg, BuildContext context) {
     rightMargin = 60.0;
   }
   var orderContent = uiMsg.wkMsg.messageContent as OrderMsg;
-  return Expanded(
+  return GestureDetector(
-    child: GestureDetector(
     onLongPressStart: (details) {
       longClick(uiMsg, context, details);
     },
     child: Container(
-        padding: const EdgeInsets.only(left: 5, top: 5, right: 5, bottom: 5),
+      constraints: BoxConstraints(
+        maxWidth: MediaQuery.of(context).size.width * 0.7,
+      ),
+      padding: const EdgeInsets.all(12),
       margin: EdgeInsets.only(
-            left: leftMargin, top: 0, right: rightMargin, bottom: 0),
+        left: leftMargin,
-        decoration: const BoxDecoration(
+        top: 0,
-            shape: BoxShape.rectangle,
+        right: rightMargin,
-            borderRadius: BorderRadius.all(Radius.circular(12)),
+        bottom: 0,
-            color: Color.fromARGB(255, 250, 250, 250)),
+      ),
-        alignment: Alignment.centerLeft,
+      decoration: BoxDecoration(
+        color: const Color.fromARGB(255, 250, 250, 250),
+        borderRadius: BorderRadius.only(
+          topLeft: const Radius.circular(22),
+          topRight: const Radius.circular(22),
+          bottomLeft: uiMsg.wkMsg.fromUID == UserInfo.uid
+              ? const Radius.circular(22)
+              : const Radius.circular(0),
+          bottomRight: uiMsg.wkMsg.fromUID == UserInfo.uid
+              ? const Radius.circular(0)
+              : const Radius.circular(22),
+        ),
+      ),
       child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
         children: [
-            Container(
+          Text(
-              margin:
-                  const EdgeInsets.only(left: 5, top: 5, right: 5, bottom: 5),
-              alignment: Alignment.centerLeft,
-              child: Text(
             '订单号：${orderContent.orderNo}',
             style: const TextStyle(
               color: Colors.black,
-                    fontSize: 18,
+              fontSize: 16,
-                    fontWeight: FontWeight.bold),
+              fontWeight: FontWeight.bold,
             ),
           ),
-            Container(
+          const SizedBox(height: 8),
-              margin:
+          Row(
-                  const EdgeInsets.only(left: 5, top: 5, right: 5, bottom: 5),
+            crossAxisAlignment: CrossAxisAlignment.start,
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.start,
             children: [
-                  Image.network(
+              ClipRRect(
+                borderRadius: BorderRadius.circular(8),
+                child: Image.network(
                   orderContent.imgUrl,
                   height: 80,
                   width: 80,
-                    fit: BoxFit.contain,
+                  fit: BoxFit.cover,
                   errorBuilder: (BuildContext context, Object exception,
                       StackTrace? stackTrace) {
-                      return Image.asset('assets/ic_default_avatar.png');
+                    return Image.asset(
+                      'assets/ic_default_avatar.png',
+                      width: 80,
+                      height: 80,
+                    );
                   },
                 ),
+              ),
+              const SizedBox(width: 12),
               Expanded(
-                      child: Container(
-                    margin: const EdgeInsets.only(
-                        left: 10, top: 5, right: 0, bottom: 5),
                 child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
                     Text(
-                          '商品名称：${orderContent.title}',
+                      orderContent.title,
-                          softWrap: true,
                       style: const TextStyle(
-                              color: Colors.black,
+                        color: Colors.black87,
-                              fontSize: 16,
+                        fontSize: 14,
-                              fontWeight: FontWeight.bold),
+                        fontWeight: FontWeight.w500,
                       ),
+                      maxLines: 2,
+                      overflow: TextOverflow.ellipsis,
+                    ),
+                    const SizedBox(height: 8),
                     Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                       children: [
-                            Text("\$${orderContent.price}",
+                        Text(
+                          "\$${orderContent.price}",
                           style: const TextStyle(
                             color: Colors.red,
                             fontSize: 14,
-                                    fontWeight: FontWeight.bold)),
+                            fontWeight: FontWeight.bold,
-                            const SizedBox(width: 100.0),
+                          ),
-                            Text('共${orderContent.num}件',
+                        ),
+                        Text(
+                          '共${orderContent.num}件',
                           style: const TextStyle(
-                                    color: Colors.red,
+                            color: Colors.black54,
-                                    fontSize: 14,
+                            fontSize: 12,
-                                    fontWeight: FontWeight.bold)),
+                          ),
-                          ],
+                        ),
-                        )
                       ],
                     ),
-                  ))
                   ],
                 ),
               ),
             ],
           ),
+        ],
       ),
     ),
   );
@@ -188,92 +216,87 @@ Widget getRecvView(UIMsg uiMsg, BuildContext context) {
 }
 
 Widget recvTextView(UIMsg uiMsg, BuildContext context) {
-  return Expanded(
+  return GestureDetector(
-    child: GestureDetector(
     onLongPressStart: (details) {
       longClick(uiMsg, context, details);
     },
     child: Container(
-        alignment: Alignment.centerLeft,
+      constraints: BoxConstraints(
-        margin: const EdgeInsets.only(left: 10, top: 0, right: 60, bottom: 0),
+        maxWidth: MediaQuery.of(context).size.width * 0.65,
-        child: Container(
+      ),
-          padding:
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
-              const EdgeInsets.only(left: 10, top: 5, right: 10, bottom: 5),
       decoration: const BoxDecoration(
-              shape: BoxShape.rectangle,
+        color: Colors.white,
-              borderRadius: BorderRadius.all(Radius.circular(12)),
+        borderRadius: BorderRadius.only(
-              color: Color.fromARGB(255, 163, 33, 243)),
+          topLeft: Radius.circular(22),
+          topRight: Radius.circular(22),
+          bottomLeft: Radius.zero,
+          bottomRight: Radius.circular(22),
+        ),
+      ),
       child: Column(
-            children: [
+        crossAxisAlignment: CrossAxisAlignment.start,
-              Container(
+        mainAxisSize: MainAxisSize.min,
-                alignment: Alignment.topLeft,
-                child: Text(
-                  uiMsg.getShowContent(),
-                  style: const TextStyle(color: Colors.white, fontSize: 16),
-                ),
-              ),
-              Row(
-                mainAxisAlignment: MainAxisAlignment.end,
         children: [
+          Text(
+            uiMsg.getShowContent(),
+            style: const TextStyle(color: Colors.black87, fontSize: 16),
+          ),
+          const SizedBox(height: 4),
           Text(
             uiMsg.getShowTime(),
-                    style: const TextStyle(
+            style: const TextStyle(color: Colors.black45, fontSize: 12),
-                        color: Color.fromARGB(255, 226, 215, 215),
-                        fontSize: 12),
-                  )
-                ],
-              )
-            ],
-          ),
           ),
+        ],
       ),
     ),
   );
 }
 
 Widget sendTextView(UIMsg uiMsg, BuildContext context) {
-  var alignment = Alignment.bottomRight;
+  return GestureDetector(
-  if (uiMsg.wkMsg.fromUID != UserInfo.uid) {
-    alignment = Alignment.centerLeft;
-  }
-  return Expanded(
-    child: GestureDetector(
     onLongPressStart: (details) {
       longClick(uiMsg, context, details);
     },
     child: Container(
-        padding: const EdgeInsets.only(left: 5, top: 3, right: 5, bottom: 3),
+      constraints: BoxConstraints(
-        margin: const EdgeInsets.only(left: 60, top: 0, right: 5, bottom: 0),
+        maxWidth: MediaQuery.of(context).size.width * 0.65,
+      ),
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
       decoration: const BoxDecoration(
-            shape: BoxShape.rectangle,
+        color: Color(0xFF0584FE),
-            borderRadius: BorderRadius.all(Radius.circular(12)),
+        borderRadius: BorderRadius.only(
-            color: Color.fromARGB(255, 9, 75, 243)),
+          topLeft: Radius.circular(22),
-        alignment: alignment,
+          topRight: Radius.circular(22),
+          bottomLeft: Radius.circular(22),
+          bottomRight: Radius.zero,
+        ),
+      ),
       child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
         children: [
-            Container(
+          Text(
-              alignment: Alignment.centerLeft,
-              child: Text(
             uiMsg.getShowContent(),
             style: const TextStyle(color: Colors.white, fontSize: 16),
           ),
-            ),
+          const SizedBox(height: 4),
           Row(
-              mainAxisAlignment: MainAxisAlignment.end,
+            mainAxisSize: MainAxisSize.min,
             children: [
               Text(
                 uiMsg.getShowTime(),
-                  style: const TextStyle(
+                style: const TextStyle(color: Colors.white70, fontSize: 12),
-                      color: Color.fromARGB(255, 226, 215, 215), fontSize: 12),
               ),
+              const SizedBox(width: 4),
               Image(
                 image: AssetImage(uiMsg.getStatusIV()),
-                    width: 30,
+                width: 16,
-                    height: 30)
+                height: 16,
-              ],
               ),
             ],
           ),
+        ],
       ),
     ),
   );

example/lib/ui_chat.dart

@@ -210,25 +210,47 @@ class ChatListDataState extends State<ChatList> {
     });
   }
 
-  Widget _buildRow(UIMsg uiMsg) {
+  Widget _buildRow(UIMsg uiMsg, BuildContext context) {
     if (uiMsg.wkMsg.wkMsgExtra?.revoke == 1) {
-      return getRevokedView(uiMsg, context);
+      return Padding(
+        padding: const EdgeInsets.symmetric(vertical: 4),
+        child: getRevokedView(uiMsg, context),
+      );
     }
     if (uiMsg.wkMsg.fromUID == UserInfo.uid) {
-      return Container(
+      return Padding(
-        padding: const EdgeInsets.only(left: 0, top: 5, right: 0, bottom: 5),
+        padding: const EdgeInsets.symmetric(vertical: 4),
         child: Row(
+          mainAxisAlignment: MainAxisAlignment.end,
+          crossAxisAlignment: CrossAxisAlignment.end,
           children: [
-            getSendView(uiMsg, context),
+            Flexible(
-            chatAvatar(uiMsg),
+              child: getSendView(uiMsg, context),
+            ),
+            const SizedBox(width: 8),
+            Padding(
+              padding: const EdgeInsets.only(bottom: 4),
+              child: chatAvatar(uiMsg),
+            ),
           ],
         ),
       );
     } else {
-      return Container(
+      return Padding(
-        padding: const EdgeInsets.only(left: 0, top: 5, right: 0, bottom: 5),
+        padding: const EdgeInsets.symmetric(vertical: 4),
         child: Row(
-          children: [chatAvatar(uiMsg), getRecvView(uiMsg, context)],
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.end,
+          children: [
+            Padding(
+              padding: const EdgeInsets.only(bottom: 4),
+              child: chatAvatar(uiMsg),
+            ),
+            const SizedBox(width: 8),
+            Flexible(
+              child: getRecvView(uiMsg, context),
+            ),
+          ],
         ),
       );
     }
@@ -334,7 +356,7 @@ class ChatListDataState extends State<ChatList> {
                   shrinkWrap: true,
                   itemCount: msgList.length,
                   itemBuilder: (context, pos) {
-                    return _buildRow(msgList[pos]);
+                    return _buildRow(msgList[pos], context);
                   }),
             ),
             Row(
@@ -477,3 +499,81 @@ class ChatListDataState extends State<ChatList> {
     WKIM.shared.channelManager.removeOnRefreshListener('chat');
   }
 }
+
+Widget _buildItem(UIMsg uiMsg, BuildContext context) {
+  return GestureDetector(
+    onTap: () {
+      Navigator.push(
+        context,
+        MaterialPageRoute(
+          builder: (context) => ChatPage(),
+          settings: RouteSettings(
+            arguments: ChatChannel(
+              uiMsg.wkMsg.channelID,
+              uiMsg.wkMsg.channelType,
+            ),
+          ),
+        ),
+      );
+    },
+    child: Container(
+      padding: const EdgeInsets.all(10),
+      child: Row(
+        children: [
+          ClipRRect(
+            borderRadius: BorderRadius.circular(20),
+            child: Image.network(
+              getChannelAvatarURL(uiMsg),
+              height: 50,
+              width: 50,
+              fit: BoxFit.cover,
+              errorBuilder: (BuildContext context, Object exception,
+                  StackTrace? stackTrace) {
+                return ClipRRect(
+                  borderRadius: BorderRadius.circular(20),
+                  child: Image.asset(
+                    'assets/ic_default_avatar.png',
+                    width: 50,
+                    height: 50,
+                  ),
+                );
+              },
+            ),
+          ),
+          const SizedBox(width: 10),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  uiMsg.wkMsg.getFrom()?.channelName ?? '未知用户',
+                  style: const TextStyle(
+                    fontSize: 16,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 4),
+                Text(
+                  uiMsg.getShowContent(),
+                  style: const TextStyle(
+                    fontSize: 14,
+                    color: Colors.grey,
+                  ),
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                ),
+              ],
+            ),
+          ),
+          Text(
+            uiMsg.getShowTime(),
+            style: const TextStyle(
+              fontSize: 12,
+              color: Colors.grey,
+            ),
+          ),
+        ],
+      ),
+    ),
+  );
+}