|
|
|
@ -1,6 +1,8 @@ |
|
|
|
import 'package:dating_touchme_app/components/home_appbar.dart'; |
|
|
|
import 'package:dating_touchme_app/router/route_paths.dart'; |
|
|
|
import 'package:flutter/material.dart'; |
|
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart'; |
|
|
|
import 'package:go_router/go_router.dart'; |
|
|
|
|
|
|
|
class ChatPage extends StatefulWidget { |
|
|
|
const ChatPage({super.key}); |
|
|
|
@ -15,11 +17,11 @@ class _ChatPageState extends State<ChatPage> { |
|
|
|
List<String> topNav = ["聊天", "好友"]; |
|
|
|
|
|
|
|
List<Map> chatList = [ |
|
|
|
{"avatar": "assets/system_notifi.png", "isOnline": false, "userName": "系统通知", "messageNum": 2, "lastMessage": "在干嘛"}, |
|
|
|
{"avatar": "assets/user_avatar.png", "isOnline": true, "userName": "林园园", "messageNum": 2, "lastMessage": "在干嘛"}, |
|
|
|
{"avatar": "assets/user_avatar.png", "isOnline": false, "userName": "李晖", "messageNum": 0, "lastMessage": "好的"}, |
|
|
|
{"avatar": "assets/user_avatar.png", "isOnline": false, "userName": "李哲", "messageNum": 0, "lastMessage": "在干嘛"}, |
|
|
|
{"avatar": "assets/user_avatar.png", "isOnline": false, "userName": "李夏", "messageNum": 0, "lastMessage": "在干嘛"}, |
|
|
|
{"id": 0,"avatar": "assets/system_notifi.png", "isOnline": false, "userName": "系统通知", "messageNum": 2, "lastMessage": "在干嘛"}, |
|
|
|
{"id": 1,"avatar": "assets/user_avatar.png", "isOnline": true, "userName": "林园园", "messageNum": 2, "lastMessage": "在干嘛"}, |
|
|
|
{"id": 1,"avatar": "assets/user_avatar.png", "isOnline": false, "userName": "李晖", "messageNum": 0, "lastMessage": "好的"}, |
|
|
|
{"id": 1,"avatar": "assets/user_avatar.png", "isOnline": false, "userName": "李哲", "messageNum": 0, "lastMessage": "在干嘛"}, |
|
|
|
{"id": 1,"avatar": "assets/user_avatar.png", "isOnline": false, "userName": "李夏", "messageNum": 0, "lastMessage": "在干嘛"}, |
|
|
|
]; |
|
|
|
|
|
|
|
List<Map> topList = [ |
|
|
|
@ -37,8 +39,18 @@ class _ChatPageState extends State<ChatPage> { |
|
|
|
{"isFriend": false}, |
|
|
|
]; |
|
|
|
|
|
|
|
int nowActive = 0; |
|
|
|
|
|
|
|
List<String> friendNavList = ["我的关注", "好友", "粉丝"]; |
|
|
|
|
|
|
|
int friendNavActive = 0; |
|
|
|
|
|
|
|
void changeNav(int active) { |
|
|
|
print("当前项: $active"); |
|
|
|
nowActive = active; |
|
|
|
setState(() { |
|
|
|
|
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
@override |
|
|
|
@ -71,35 +83,120 @@ class _ChatPageState extends State<ChatPage> { |
|
|
|
), |
|
|
|
),), |
|
|
|
), |
|
|
|
Container( |
|
|
|
width: 750.w, |
|
|
|
padding: EdgeInsets.only( |
|
|
|
top: 5.w, |
|
|
|
bottom: 46.w |
|
|
|
if(nowActive == 0) ... [ |
|
|
|
Container( |
|
|
|
width: 750.w, |
|
|
|
padding: EdgeInsets.only( |
|
|
|
top: 5.w, |
|
|
|
bottom: 46.w |
|
|
|
), |
|
|
|
child: SingleChildScrollView( |
|
|
|
scrollDirection: Axis.horizontal, |
|
|
|
child: Row( |
|
|
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
|
|
children: [ |
|
|
|
SizedBox(width: 11.w,), |
|
|
|
...topList.map((e){ |
|
|
|
return TopItem(item: e); |
|
|
|
}), |
|
|
|
], |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
child: SingleChildScrollView( |
|
|
|
scrollDirection: Axis.horizontal, |
|
|
|
Container( |
|
|
|
padding: EdgeInsets.symmetric(horizontal: 31.w), |
|
|
|
child: Column( |
|
|
|
children: [ |
|
|
|
...chatList.map((e){ |
|
|
|
return ChatItem(item: e); |
|
|
|
}), |
|
|
|
], |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
if(nowActive == 1) ...[ |
|
|
|
Container( |
|
|
|
padding: EdgeInsets.symmetric(horizontal: 25.w), |
|
|
|
margin: EdgeInsets.only(bottom: 35.w), |
|
|
|
child: Row( |
|
|
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
|
|
children: [ |
|
|
|
SizedBox(width: 11.w,), |
|
|
|
...topList.map((e){ |
|
|
|
return TopItem(item: e); |
|
|
|
...friendNavList.asMap().entries.map((entry){ |
|
|
|
return Container( |
|
|
|
margin: EdgeInsets.only(right: 50.w), |
|
|
|
child: InkWell( |
|
|
|
onTap: (){ |
|
|
|
friendNavActive = entry.key; |
|
|
|
setState(() { |
|
|
|
|
|
|
|
}); |
|
|
|
}, |
|
|
|
child: Container( |
|
|
|
padding: entry.key == friendNavActive ? EdgeInsets.symmetric(vertical: 5.w, horizontal: 26.w) : EdgeInsets.zero, |
|
|
|
decoration: BoxDecoration( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(43.w)), |
|
|
|
color: entry.key == friendNavActive ? const Color.fromRGBO(117, 98, 249, 1) : Colors.transparent |
|
|
|
), |
|
|
|
child: Text( |
|
|
|
entry.value, |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 24.w, |
|
|
|
color: entry.key == friendNavActive ? Colors.white : const Color.fromRGBO(51, 51, 51, .7), |
|
|
|
fontWeight: entry.key == friendNavActive ? FontWeight.w700 : FontWeight.w500 |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
); |
|
|
|
}), |
|
|
|
|
|
|
|
], |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
Container( |
|
|
|
padding: EdgeInsets.symmetric(horizontal: 31.w), |
|
|
|
child: Column( |
|
|
|
if(friendNavActive == 0) ...[ |
|
|
|
FriendItem(), |
|
|
|
FriendItem(), |
|
|
|
FriendItem(), |
|
|
|
FriendItem(), |
|
|
|
], |
|
|
|
if(friendNavActive != 0) Column( |
|
|
|
children: [ |
|
|
|
...chatList.map((e){ |
|
|
|
return ChatItem(item: e); |
|
|
|
}), |
|
|
|
SizedBox(height: 100.w,), |
|
|
|
Image.asset( |
|
|
|
"assets/no_chat_bg.png", |
|
|
|
width: 182.w, |
|
|
|
height: 182.w, |
|
|
|
), |
|
|
|
SizedBox(height: 27..w,), |
|
|
|
Text( |
|
|
|
"你还没有关注任何人噢", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 25.w, |
|
|
|
color: const Color.fromRGBO(144, 144, 144, 1), |
|
|
|
fontWeight: FontWeight.w500 |
|
|
|
), |
|
|
|
), |
|
|
|
SizedBox(height: 22..w,), |
|
|
|
Container( |
|
|
|
width: 302.w, |
|
|
|
height: 65.w, |
|
|
|
decoration: BoxDecoration( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(65.w)), |
|
|
|
color: const Color.fromRGBO(117, 98, 249, 1), |
|
|
|
), |
|
|
|
child: Center( |
|
|
|
child: Text( |
|
|
|
"去聊聊", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 25.w, |
|
|
|
color: Colors.white, |
|
|
|
fontWeight: FontWeight.w500 |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
) |
|
|
|
) |
|
|
|
] |
|
|
|
], |
|
|
|
), |
|
|
|
); |
|
|
|
@ -118,93 +215,104 @@ class _ChatItemState extends State<ChatItem> { |
|
|
|
@override |
|
|
|
Widget build(BuildContext context) { |
|
|
|
return Container( |
|
|
|
padding: EdgeInsets.symmetric(vertical: 15.w), |
|
|
|
margin: EdgeInsets.only(bottom: 15.w), |
|
|
|
child: Row( |
|
|
|
children: [ |
|
|
|
Stack( |
|
|
|
child: InkWell( |
|
|
|
onTap: (){ |
|
|
|
if(widget.item["id"] == 0){ |
|
|
|
context.pushNamed(RouteNames.notify); |
|
|
|
} else { |
|
|
|
context.pushNamed(RouteNames.message); |
|
|
|
} |
|
|
|
}, |
|
|
|
child: Container( |
|
|
|
padding: EdgeInsets.symmetric(vertical: 15.w), |
|
|
|
child: Row( |
|
|
|
children: [ |
|
|
|
ClipRRect( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(92.w)), |
|
|
|
child: Image.asset( |
|
|
|
widget.item["avatar"], |
|
|
|
width: 92.w, |
|
|
|
height: 92.w, |
|
|
|
), |
|
|
|
), |
|
|
|
if(widget.item["isOnline"]) Positioned( |
|
|
|
right: 0, |
|
|
|
bottom: 0, |
|
|
|
child: Container( |
|
|
|
width: 22.w, |
|
|
|
height: 22.w, |
|
|
|
decoration: BoxDecoration( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(22.w)), |
|
|
|
color: const Color.fromRGBO(43, 255, 132, 1) |
|
|
|
Stack( |
|
|
|
children: [ |
|
|
|
ClipRRect( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(92.w)), |
|
|
|
child: Image.asset( |
|
|
|
widget.item["avatar"], |
|
|
|
width: 92.w, |
|
|
|
height: 92.w, |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
], |
|
|
|
), |
|
|
|
SizedBox(width: 17.w,), |
|
|
|
SizedBox( |
|
|
|
width: 578.w, |
|
|
|
child: Column( |
|
|
|
children: [ |
|
|
|
Row( |
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
|
|
children: [ |
|
|
|
Text( |
|
|
|
widget.item["userName"], |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 27.w, |
|
|
|
color: const Color.fromRGBO(51, 51, 51, 1), |
|
|
|
fontWeight: FontWeight.w500 |
|
|
|
if(widget.item["isOnline"]) Positioned( |
|
|
|
right: 0, |
|
|
|
bottom: 0, |
|
|
|
child: Container( |
|
|
|
width: 22.w, |
|
|
|
height: 22.w, |
|
|
|
decoration: BoxDecoration( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(22.w)), |
|
|
|
color: const Color.fromRGBO(43, 255, 132, 1) |
|
|
|
), |
|
|
|
), |
|
|
|
Text( |
|
|
|
"19.24", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 23.w, |
|
|
|
color: const Color.fromRGBO(51, 51, 51, .6), |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
Row( |
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
|
|
), |
|
|
|
], |
|
|
|
), |
|
|
|
SizedBox(width: 17.w,), |
|
|
|
SizedBox( |
|
|
|
width: 578.w, |
|
|
|
child: Column( |
|
|
|
children: [ |
|
|
|
Text( |
|
|
|
widget.item["lastMessage"], |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 23.w, |
|
|
|
color: const Color.fromRGBO(51, 51, 51, .6), |
|
|
|
), |
|
|
|
Row( |
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
|
|
children: [ |
|
|
|
Text( |
|
|
|
widget.item["userName"], |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 27.w, |
|
|
|
color: const Color.fromRGBO(51, 51, 51, 1), |
|
|
|
fontWeight: FontWeight.w500 |
|
|
|
), |
|
|
|
), |
|
|
|
Text( |
|
|
|
"19.24", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 23.w, |
|
|
|
color: const Color.fromRGBO(51, 51, 51, .6), |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
if(widget.item["messageNum"] > 0) Container( |
|
|
|
width: 38.w, |
|
|
|
height: 38.w, |
|
|
|
margin: EdgeInsets.only(right: 9.w), |
|
|
|
decoration: BoxDecoration( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(38.w)), |
|
|
|
color: const Color.fromRGBO(255, 87, 51, 1) |
|
|
|
), |
|
|
|
child: Center( |
|
|
|
child: Text( |
|
|
|
"${widget.item["messageNum"]}", |
|
|
|
Row( |
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
|
|
children: [ |
|
|
|
Text( |
|
|
|
widget.item["lastMessage"], |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 23.w, |
|
|
|
color: Colors.white |
|
|
|
color: const Color.fromRGBO(51, 51, 51, .6), |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
if(widget.item["messageNum"] > 0) Container( |
|
|
|
width: 38.w, |
|
|
|
height: 38.w, |
|
|
|
margin: EdgeInsets.only(right: 9.w), |
|
|
|
decoration: BoxDecoration( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(38.w)), |
|
|
|
color: const Color.fromRGBO(255, 87, 51, 1) |
|
|
|
), |
|
|
|
child: Center( |
|
|
|
child: Text( |
|
|
|
"${widget.item["messageNum"]}", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 23.w, |
|
|
|
color: Colors.white |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
) |
|
|
|
], |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
); |
|
|
|
} |
|
|
|
@ -312,5 +420,94 @@ class _TopItemState extends State<TopItem> { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
class FriendItem extends StatefulWidget { |
|
|
|
const FriendItem({super.key}); |
|
|
|
|
|
|
|
@override |
|
|
|
State<FriendItem> createState() => _FriendItemState(); |
|
|
|
} |
|
|
|
|
|
|
|
class _FriendItemState extends State<FriendItem> { |
|
|
|
@override |
|
|
|
Widget build(BuildContext context) { |
|
|
|
return Container( |
|
|
|
padding: EdgeInsets.symmetric(horizontal: 25.w), |
|
|
|
margin: EdgeInsets.only(bottom: 30.w), |
|
|
|
child: Row( |
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
|
|
children: [ |
|
|
|
Row( |
|
|
|
children: [ |
|
|
|
Image.asset( |
|
|
|
"assets/user_avatar.png", |
|
|
|
width: 90.w, |
|
|
|
height: 90.w, |
|
|
|
), |
|
|
|
SizedBox(width: 18.w,), |
|
|
|
Column( |
|
|
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
|
|
children: [ |
|
|
|
Row( |
|
|
|
children: [ |
|
|
|
Text( |
|
|
|
"叫我大王", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 28.w, |
|
|
|
color: const Color.fromRGBO(51, 51, 51, 1), |
|
|
|
fontWeight: FontWeight.w500 |
|
|
|
), |
|
|
|
), |
|
|
|
SizedBox(width: 14.w,), |
|
|
|
Container( |
|
|
|
width: 24.w, |
|
|
|
height: 24.w, |
|
|
|
decoration: BoxDecoration( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(24.w)), |
|
|
|
color: true ? const Color.fromRGBO(237, 245, 255, 1) : const Color.fromRGBO(255, 237, 255, 1) |
|
|
|
), |
|
|
|
child: Center( |
|
|
|
child: Image.asset( |
|
|
|
true ? "assets/male.png" : "assets/female.png", |
|
|
|
width: 14.w, |
|
|
|
), |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
Text( |
|
|
|
"30岁·广州", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 22.w, |
|
|
|
color: const Color.fromRGBO(144, 144, 144, 1), |
|
|
|
fontWeight: FontWeight.w500 |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
Container( |
|
|
|
width: 129.w, |
|
|
|
height: 45.w, |
|
|
|
decoration: BoxDecoration( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(45.w)), |
|
|
|
color: const Color.fromRGBO(224, 224, 224, 1) |
|
|
|
), |
|
|
|
child: Center( |
|
|
|
child: Text( |
|
|
|
"已关注", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 22.w, |
|
|
|
color: const Color.fromRGBO(144, 144, 144, 1), |
|
|
|
fontWeight: FontWeight.w500 |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
YakumoChen
4 months ago
