WuKongIM/WuKongIMFlutterSDK
1
0
Fork 0
mirror of https://github.com/WuKongIM/WuKongIMFlutterSDK synced 2025-05-29 15:12:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix:修改聊天UI

Browse Source
This commit is contained in:
SL 2025-03-29 19:15:19 +08:00
parent 4fb60fffb4
commit 0a980cac4a
2 changed files with 297 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

351
example/lib/chatview.dart
View File

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

120
example/lib/ui_chat.dart
View File

@ -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) { 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) { 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( child: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [ 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 { } 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( 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, shrinkWrap: true,
itemCount: msgList.length, itemCount: msgList.length,
itemBuilder: (context, pos) { itemBuilder: (context, pos) {
return _buildRow(msgList[pos]); return _buildRow(msgList[pos], context);
}), }),
), ),
Row( Row(
@ -477,3 +499,81 @@ class ChatListDataState extends State<ChatList> {
WKIM.shared.channelManager.removeOnRefreshListener('chat'); 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,
),
),
],
),
),
);
}