diff --git a/assets/arrow.png b/assets/arrow.png new file mode 100644 index 0000000..e9c9092 Binary files /dev/null and b/assets/arrow.png differ diff --git a/assets/blind_data.png b/assets/blind_data.png new file mode 100644 index 0000000..c4172d6 Binary files /dev/null and b/assets/blind_data.png differ diff --git a/assets/cert.png b/assets/cert.png new file mode 100644 index 0000000..06fb3be Binary files /dev/null and b/assets/cert.png differ diff --git a/assets/customer.png b/assets/customer.png new file mode 100644 index 0000000..cf3a758 Binary files /dev/null and b/assets/customer.png differ diff --git a/assets/edit.png b/assets/edit.png new file mode 100644 index 0000000..903da9f Binary files /dev/null and b/assets/edit.png differ diff --git a/assets/index_bg.png b/assets/index_bg.png new file mode 100644 index 0000000..c41a9a4 Binary files /dev/null and b/assets/index_bg.png differ diff --git a/assets/mail.png b/assets/mail.png new file mode 100644 index 0000000..a723a77 Binary files /dev/null and b/assets/mail.png differ diff --git a/assets/make_friend.png b/assets/make_friend.png new file mode 100644 index 0000000..2f992f9 Binary files /dev/null and b/assets/make_friend.png differ diff --git a/assets/rose.png b/assets/rose.png new file mode 100644 index 0000000..23e262b Binary files /dev/null and b/assets/rose.png differ diff --git a/assets/setting.png b/assets/setting.png new file mode 100644 index 0000000..469c307 Binary files /dev/null and b/assets/setting.png differ diff --git a/assets/shop.png b/assets/shop.png new file mode 100644 index 0000000..199d1cf Binary files /dev/null and b/assets/shop.png differ diff --git a/assets/system_notifi.png b/assets/system_notifi.png new file mode 100644 index 0000000..51aa3aa Binary files /dev/null and b/assets/system_notifi.png differ diff --git a/assets/vip.png b/assets/vip.png new file mode 100644 index 0000000..9b5d4b6 Binary files /dev/null and b/assets/vip.png differ diff --git a/assets/vip_banner.png b/assets/vip_banner.png new file mode 100644 index 0000000..1530d86 Binary files /dev/null and b/assets/vip_banner.png differ diff --git a/assets/wallet.png b/assets/wallet.png new file mode 100644 index 0000000..d907d1e Binary files /dev/null and b/assets/wallet.png differ diff --git a/lib/components/home_appbar.dart b/lib/components/home_appbar.dart index 95eef39..613acdc 100644 --- a/lib/components/home_appbar.dart +++ b/lib/components/home_appbar.dart @@ -19,6 +19,7 @@ class _HomeAppbarState extends State { Widget build(BuildContext context) { return Container( padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top), + color: Colors.transparent, child: Container( height: ScreenUtil().setWidth(108), padding: EdgeInsets.symmetric( diff --git a/lib/pages/chat_page.dart b/lib/pages/chat_page.dart index 7aaec36..0b855ea 100644 --- a/lib/pages/chat_page.dart +++ b/lib/pages/chat_page.dart @@ -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 { + + + List topNav = ["聊天", "好友"]; + + List 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 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 createState() => _ChatItemState(); +} + +class _ChatItemState extends State { + @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 createState() => _TopItemState(); +} + +class _TopItemState extends State { + @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 + ), + ) + ], + ), + ), + ), + ], + ), + ); + } +} + + + diff --git a/lib/pages/my_page.dart b/lib/pages/my_page.dart index f42bb57..8ffae4a 100644 --- a/lib/pages/my_page.dart +++ b/lib/pages/my_page.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; class MyPage extends StatefulWidget { const MyPage({super.key}); @@ -8,8 +9,324 @@ class MyPage extends StatefulWidget { } class _MyPageState extends State { + + List infoList = [ + {"label": "我的关注", "num": 88}, + {"label": "关注我的", "num": 18988}, + {"label": "好友", "num": 8}, + {"label": "访客", "num": 357}, + ]; + + List blockList = [ + {"icon": "assets/rose.png", "title": "我的玫瑰", "subTitle": "新人限时福利"}, + {"icon": "assets/wallet.png", "title": "我的钱包", "subTitle": "提现无门槛"}, + {"icon": "assets/shop.png", "title": "商城中心", "subTitle": "不定期更新商品"}, + {"icon": "assets/cert.png", "title": "认证中心 ", "subTitle": "未认证"}, + ]; + + List settingList = [ + {"icon": "assets/setting.png", "title": "设置"}, + {"icon": "assets/customer.png", "title": "联系客服"}, + {"icon": "assets/mail.png", "title": "意见反馈"}, + ]; + + @override + Widget build(BuildContext context) { + return Container( + padding: EdgeInsets.symmetric(horizontal: 19.w), + 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: [ + SizedBox( + height: MediaQuery.of(context).padding.top + 108.w, + ), + Container( + width: 713.w, + padding: EdgeInsets.only( + left: 12.w, + right: 10.w + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Row( + children: [ + Image.asset( + "assets/user_avatar.png", + width: 120.w, + height: 120.w, + ), + SizedBox(width: 29.w,), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + children: [ + Text( + "用户昵称", + style: TextStyle( + fontSize: 36.w, + color: const Color.fromRGBO(51, 51, 51, 1), + fontWeight: FontWeight.w700 + ), + ), + SizedBox(width: 17.w,), + Image.asset( + "assets/vip.png", + width: 88.w, + height: 32.w, + ) + ], + ), + SizedBox(height: 23.w,), + Text( + "ID：4654654565", + style: TextStyle( + fontSize: 24.w, + color: const Color.fromRGBO(51, 51, 51, 1), + fontWeight: FontWeight.w500 + ), + ) + ], + ) + ], + ), + Row( + children: [ + Image.asset( + "assets/edit.png", + width: 20.w, + height: 20.w, + ), + SizedBox(width: 8.w,), + Text( + "编辑资料", + style: TextStyle( + fontSize: 24.w, + color: const Color.fromRGBO(55, 57, 72, 1), + fontWeight: FontWeight.w500 + ), + ) + ], + ) + ], + ), + ), + SizedBox(height: 33.w,), + Container( + height: 114.w, + padding: EdgeInsets.only( + top: 22.w, + right: 75.w, + bottom: 17.w, + left: 55.w + ), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(18.w)), + color: Colors.white, + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + ...infoList.map((e){ + return InfoItem(item: e); + }), + ], + ), + ), + SizedBox(height: 25.w,), + Stack( + children: [ + Image.asset( + "assets/vip_banner.png", + width: 713.w, + height: 129.w, + ), + Positioned( + top: 36.w, + right: 31.w, + child: InkWell( + child: SizedBox( + width: 147.w, + height: 57.w, + ), + ), + ) + ], + ), + SizedBox(height: 25.w,), + Wrap( + spacing: 17.w, + runSpacing: 17.w, + children: [ + ...blockList.map((e){ + return BlockItem(item: e); + }), + ], + ), + SizedBox(height: 25.w,), + ...settingList.map((e){ + return SettingItem(item: e); + }), + ], + ), + ); + } +} + +class InfoItem extends StatefulWidget { + final Map item; + const InfoItem({super.key, required this.item}); + + @override + State createState() => _InfoItemState(); +} + +class _InfoItemState extends State { + @override + Widget build(BuildContext context) { + return Column( + children: [ + Text( + "${widget.item["num"]}", + style: TextStyle( + fontSize: 30.w, + color: Colors.black, + fontWeight: FontWeight.w700 + ), + ), + Text( + widget.item["label"], + style: TextStyle( + fontSize: 21.w, + color: const Color.fromRGBO(166, 166, 166, 1), + ), + ) + ], + ); + } +} + +class BlockItem extends StatefulWidget { + final Map item; + const BlockItem({super.key, required this.item}); + + @override + State createState() => _BlockItemState(); +} + +class _BlockItemState extends State { + @override + Widget build(BuildContext context) { + return Container( + width: 340.w, + height: 77.w, + padding: EdgeInsets.symmetric(horizontal: 15.w), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(18.w)), + color: Colors.white + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Row( + children: [ + Image.asset( + widget.item["icon"], + width: 42.w, + height: 42.w, + ), + SizedBox(width: 5.w,), + Text( + widget.item["title"], + style: TextStyle( + fontSize: 25.w, + color: Colors.black, + ), + ) + ], + ), + Row( + children: [ + Container( + width: 10.w, + height: 10.w, + margin: EdgeInsets.only(right: 9.w), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(10.w)), + color: const Color.fromRGBO(255, 87, 51, 1) + ), + ), + Text( + widget.item["subTitle"], + style: TextStyle( + fontSize: 18.w, + color: const Color.fromRGBO(166, 166, 166, 1) + ), + ) + ], + ) + ], + ), + ); + } +} + +class SettingItem extends StatefulWidget { + final Map item; + const SettingItem({super.key, required this.item}); + + @override + State createState() => _SettingItemState(); +} + +class _SettingItemState extends State { @override Widget build(BuildContext context) { - return Text("我的"); + return Container( + height: 96.w, + padding: EdgeInsets.symmetric(horizontal: 32.w), + color: Colors.white, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Row( + children: [ + Image.asset( + widget.item["icon"], + width: 48.w, + height: 48.w, + ), + SizedBox(width: 8.w,), + Text( + widget.item["title"], + style: TextStyle( + fontSize: 28.w, + fontWeight: FontWeight.w500, + color: Colors.black + ), + ) + ], + ), + Image.asset( + "assets/arrow.png", + width: 8.w, + height: 16.w, + ) + ], + ), + ); } } +