|
|
|
@ -1,4 +1,6 @@ |
|
|
|
import 'package:dating_touchme_app/components/home_appbar.dart'; |
|
|
|
import 'package:flutter/material.dart'; |
|
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart'; |
|
|
|
|
|
|
|
class ChatPage extends StatefulWidget { |
|
|
|
const ChatPage({super.key}); |
|
|
|
@ -8,9 +10,295 @@ class ChatPage extends StatefulWidget { |
|
|
|
} |
|
|
|
|
|
|
|
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": "在干嘛"}, |
|
|
|
]; |
|
|
|
|
|
|
|
List<Map> topList = [ |
|
|
|
{"isFriend": false}, |
|
|
|
{"isFriend": true}, |
|
|
|
{"isFriend": false}, |
|
|
|
{"isFriend": false}, |
|
|
|
{"isFriend": false}, |
|
|
|
{"isFriend": true}, |
|
|
|
{"isFriend": false}, |
|
|
|
{"isFriend": false}, |
|
|
|
{"isFriend": false}, |
|
|
|
{"isFriend": true}, |
|
|
|
{"isFriend": false}, |
|
|
|
{"isFriend": false}, |
|
|
|
]; |
|
|
|
|
|
|
|
void changeNav(int active) { |
|
|
|
print("当前项: $active"); |
|
|
|
} |
|
|
|
|
|
|
|
@override |
|
|
|
Widget build(BuildContext context) { |
|
|
|
return Text("聊天页面"); |
|
|
|
return Container( |
|
|
|
constraints: BoxConstraints(minHeight: ScreenUtil().setHeight(1220)), |
|
|
|
decoration: BoxDecoration( |
|
|
|
gradient: LinearGradient( |
|
|
|
begin: Alignment.topCenter, |
|
|
|
end: Alignment.bottomCenter, |
|
|
|
colors: [ |
|
|
|
Color.fromRGBO(248, 242, 255, 1.0), // rgba(248, 242, 255, 1) |
|
|
|
Color.fromRGBO(247, 247, 247, 1.0), // rgba(247, 247, 247, 1) |
|
|
|
], |
|
|
|
stops: [0.0, 1.0], |
|
|
|
), |
|
|
|
), |
|
|
|
child: Column( |
|
|
|
children: [ |
|
|
|
HomeAppbar(topNav: topNav, changeNav: changeNav,), |
|
|
|
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); |
|
|
|
}), |
|
|
|
], |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
Container( |
|
|
|
padding: EdgeInsets.symmetric(horizontal: 31.w), |
|
|
|
child: Column( |
|
|
|
children: [ |
|
|
|
...chatList.map((e){ |
|
|
|
return ChatItem(item: e); |
|
|
|
}), |
|
|
|
], |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
class ChatItem extends StatefulWidget { |
|
|
|
final Map item; |
|
|
|
const ChatItem({super.key, required this.item}); |
|
|
|
|
|
|
|
@override |
|
|
|
State<ChatItem> createState() => _ChatItemState(); |
|
|
|
} |
|
|
|
|
|
|
|
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( |
|
|
|
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) |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
], |
|
|
|
), |
|
|
|
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 |
|
|
|
), |
|
|
|
), |
|
|
|
Text( |
|
|
|
"19.24", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 23.w, |
|
|
|
color: const Color.fromRGBO(51, 51, 51, .6), |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
Row( |
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
|
|
children: [ |
|
|
|
Text( |
|
|
|
widget.item["lastMessage"], |
|
|
|
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"]}", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 23.w, |
|
|
|
color: Colors.white |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
class TopItem extends StatefulWidget { |
|
|
|
final Map item; |
|
|
|
const TopItem({super.key, required this.item}); |
|
|
|
|
|
|
|
@override |
|
|
|
State<TopItem> createState() => _TopItemState(); |
|
|
|
} |
|
|
|
|
|
|
|
class _TopItemState extends State<TopItem> { |
|
|
|
@override |
|
|
|
Widget build(BuildContext context) { |
|
|
|
return Container( |
|
|
|
margin: EdgeInsets.symmetric(horizontal: 16.w), |
|
|
|
child: Stack( |
|
|
|
children: [ |
|
|
|
SizedBox( |
|
|
|
width: 101.w, |
|
|
|
height: 101.w, |
|
|
|
child: ClipRRect( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(101.w)), |
|
|
|
child: Container( |
|
|
|
padding: EdgeInsets.all(4.w), |
|
|
|
decoration: BoxDecoration( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(101.w)), |
|
|
|
border: Border.all(width: 1, color: widget.item["isFriend"] ? const Color.fromRGBO(115, 143, 255, 1) : const Color.fromRGBO(255, 115, 164, 1)) |
|
|
|
), |
|
|
|
child: Image.asset( |
|
|
|
"assets/user_avatar.png", |
|
|
|
width: 92.w, |
|
|
|
height: 92.w, |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
if(!widget.item["isFriend"]) Positioned( |
|
|
|
bottom: 0, |
|
|
|
left: 13.w, |
|
|
|
child: Container( |
|
|
|
width: 76.w, |
|
|
|
height: 24.w, |
|
|
|
decoration: BoxDecoration( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(24.w)), |
|
|
|
color: const Color.fromRGBO(255, 115, 164, 1) |
|
|
|
), |
|
|
|
child: Row( |
|
|
|
mainAxisAlignment: MainAxisAlignment.center, |
|
|
|
children: [ |
|
|
|
Image.asset( |
|
|
|
"assets/blind_data.png", |
|
|
|
width: 19.w, |
|
|
|
height: 16.w, |
|
|
|
), |
|
|
|
SizedBox(width: 4.w,), |
|
|
|
Text( |
|
|
|
"相亲", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 16.w, |
|
|
|
color: Colors.white, |
|
|
|
fontWeight: FontWeight.w500 |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
if(widget.item["isFriend"]) Positioned( |
|
|
|
bottom: 0, |
|
|
|
left: 13.w, |
|
|
|
child: Container( |
|
|
|
width: 76.w, |
|
|
|
height: 24.w, |
|
|
|
decoration: BoxDecoration( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(24.w)), |
|
|
|
color: const Color.fromRGBO(115, 143, 255, 1) |
|
|
|
), |
|
|
|
child: Row( |
|
|
|
mainAxisAlignment: MainAxisAlignment.center, |
|
|
|
children: [ |
|
|
|
Image.asset( |
|
|
|
"assets/make_friend.png", |
|
|
|
width: 20.w, |
|
|
|
height: 16.w, |
|
|
|
), |
|
|
|
SizedBox(width: 4.w,), |
|
|
|
Text( |
|
|
|
"交友", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 16.w, |
|
|
|
color: Colors.white, |
|
|
|
fontWeight: FontWeight.w500 |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
], |
|
|
|
), |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
YakumoChen
5 months ago
