diff --git a/assets/H.png b/assets/H.png new file mode 100644 index 0000000..25e9c89 Binary files /dev/null and b/assets/H.png differ diff --git a/assets/chat.png b/assets/chat.png new file mode 100644 index 0000000..d3ab260 Binary files /dev/null and b/assets/chat.png differ diff --git a/assets/chat_active.png b/assets/chat_active.png new file mode 100644 index 0000000..cb507b2 Binary files /dev/null and b/assets/chat_active.png differ diff --git a/assets/friend.png b/assets/friend.png new file mode 100644 index 0000000..f07d901 Binary files /dev/null and b/assets/friend.png differ diff --git a/assets/friend_active.png b/assets/friend_active.png new file mode 100644 index 0000000..5af4a79 Binary files /dev/null and b/assets/friend_active.png differ diff --git a/assets/home_top_active.png b/assets/home_top_active.png new file mode 100644 index 0000000..27aa57a Binary files /dev/null and b/assets/home_top_active.png differ diff --git a/assets/i.png b/assets/i.png new file mode 100644 index 0000000..c49aa3a Binary files /dev/null and b/assets/i.png differ diff --git a/assets/index.png b/assets/index.png new file mode 100644 index 0000000..f0daadb Binary files /dev/null and b/assets/index.png differ diff --git a/assets/index_active.png b/assets/index_active.png new file mode 100644 index 0000000..596f7cd Binary files /dev/null and b/assets/index_active.png differ diff --git a/assets/location_icon.png b/assets/location_icon.png new file mode 100644 index 0000000..a7cb5d3 Binary files /dev/null and b/assets/location_icon.png differ diff --git a/assets/my.png b/assets/my.png new file mode 100644 index 0000000..bfed844 Binary files /dev/null and b/assets/my.png differ diff --git a/assets/my_active.png b/assets/my_active.png new file mode 100644 index 0000000..0fdbec6 Binary files /dev/null and b/assets/my_active.png differ diff --git a/assets/pic1.png b/assets/pic1.png new file mode 100644 index 0000000..e7c08d5 Binary files /dev/null and b/assets/pic1.png differ diff --git a/assets/pic2.png b/assets/pic2.png new file mode 100644 index 0000000..cc45d31 Binary files /dev/null and b/assets/pic2.png differ diff --git a/assets/pic3.png b/assets/pic3.png new file mode 100644 index 0000000..b44d1fe Binary files /dev/null and b/assets/pic3.png differ diff --git a/assets/real_name.png b/assets/real_name.png new file mode 100644 index 0000000..864d939 Binary files /dev/null and b/assets/real_name.png differ diff --git a/assets/subscript.png b/assets/subscript.png new file mode 100644 index 0000000..16ece37 Binary files /dev/null and b/assets/subscript.png differ diff --git a/assets/user_avatar.png b/assets/user_avatar.png new file mode 100644 index 0000000..a991f0c Binary files /dev/null and b/assets/user_avatar.png differ diff --git a/lib/components/home_appbar.dart b/lib/components/home_appbar.dart new file mode 100644 index 0000000..95eef39 --- /dev/null +++ b/lib/components/home_appbar.dart @@ -0,0 +1,74 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class HomeAppbar extends StatefulWidget { + + final List topNav; + final void Function(int) changeNav; + const HomeAppbar({super.key, required this.topNav, required this.changeNav}); + + @override + State createState() => _HomeAppbarState(); +} + +class _HomeAppbarState extends State { + + int active = 0; + + @override + Widget build(BuildContext context) { + return Container( + padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top), + child: Container( + height: ScreenUtil().setWidth(108), + padding: EdgeInsets.symmetric( + horizontal: ScreenUtil().setWidth(34)), + child: Stack( + children: [ + Row( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + ...widget.topNav.asMap().entries.map((entry){ + return InkWell( + onTap: (){ + active = entry.key; + widget.changeNav(active); + setState(() { + + }); + }, + child: Container( + margin: EdgeInsets.symmetric(horizontal: ScreenUtil().setWidth(27)), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + entry.value, + style: TextStyle( + fontSize: active == entry.key ? 38.w : 34.w, + color: const Color.fromRGBO(51, 51, 51, 1), + fontWeight: active == entry.key ? FontWeight.w600 : FontWeight.w400 + ), + ), + SizedBox(height: ScreenUtil().setWidth(9),), + if(active == entry.key) Image.asset( + "assets/home_top_active.png", + width: ScreenUtil().setWidth(25), + ) + ], + ), + ), + ); + }), + + + ], + ) + ], + ), + ), + ); + } +} diff --git a/lib/components/page_appbar.dart b/lib/components/page_appbar.dart index 70b2d5d..7fb4f95 100644 --- a/lib/components/page_appbar.dart +++ b/lib/components/page_appbar.dart @@ -19,7 +19,7 @@ class PageAppbar extends StatelessWidget implements PreferredSizeWidget { title: Text( title, style: TextStyle( - fontSize: ScreenUtil().setWidth(16), + fontSize: ScreenUtil().setWidth(32), fontWeight: FontWeight.bold, color: color ), diff --git a/lib/main.dart b/lib/main.dart index dc1cd41..ad29030 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -8,9 +8,10 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:provider/provider.dart'; void main() { + WidgetsFlutterBinding.ensureInitialized(); final appRouter = AppRouter(); - runApp(MyApp(routerConfig: appRouter.router,)); + runApp(MyApp(routerConfig: appRouter.router)); } class MyApp extends StatefulWidget { @@ -39,7 +40,7 @@ class _MyAppState extends State { ], //全局设定ui尺寸 child: ScreenUtilInit( - designSize: const Size(375, 667), + designSize: const Size(750, 1334), builder: (context, child){ return MaterialApp.router( theme: ThemeData( diff --git a/lib/pages/home_page.dart b/lib/pages/home_page.dart index e643407..4d854a9 100644 --- a/lib/pages/home_page.dart +++ b/lib/pages/home_page.dart @@ -17,12 +17,10 @@ class _HomePageState extends State { int active = 1; - String title = "首页"; @override Widget build(BuildContext context) { return Scaffold( - appBar: PageAppbar(title: title,), body: Column( children: [ Expanded( @@ -40,7 +38,7 @@ class _HomePageState extends State { bottomNavigationBar: Container( padding: EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom), child: SizedBox( - height: ScreenUtil().setWidth(50), + height: ScreenUtil().setWidth(100), child: Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceBetween, @@ -49,7 +47,6 @@ class _HomePageState extends State { child: InkWell( onTap: (){ active = 1; - title = "首页"; setState(() { }); @@ -57,16 +54,16 @@ class _HomePageState extends State { child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - Icon( - Icons.home, - size: ScreenUtil().setWidth(26), - color: active == 1 ? const Color.fromRGBO(208, 116, 67, 1) : const Color.fromRGBO(208, 205, 216, 1) + Image.asset( + "assets/${active == 1 ? "index_active" : "index"}.png", + width: 65.w, + height: 65.w, ), Text( - "首页", + "动我", style: TextStyle( - fontSize: ScreenUtil().setWidth(12), - color: active == 1 ? const Color.fromRGBO(208, 116, 67, 1) : const Color.fromRGBO(208, 205, 216, 1) + fontSize: 16.w, + color: const Color.fromRGBO(51, 51, 51, 1) ), ) ], @@ -77,7 +74,6 @@ class _HomePageState extends State { child: InkWell( onTap: (){ active = 2; - title = "直播"; setState(() { }); @@ -85,16 +81,16 @@ class _HomePageState extends State { child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - Icon( - Icons.home, - size: ScreenUtil().setWidth(26), - color: active == 2 ? const Color.fromRGBO(208, 116, 67, 1) : const Color.fromRGBO(208, 205, 216, 1) + Image.asset( + "assets/${active == 2 ? "friend_active" : "friend"}.png", + width: 65.w, + height: 65.w, ), Text( - "直播", + "找朋友", style: TextStyle( - fontSize: ScreenUtil().setWidth(12), - color: active == 2 ? const Color.fromRGBO(208, 116, 67, 1) : const Color.fromRGBO(208, 205, 216, 1) + fontSize: 16.w, + color: const Color.fromRGBO(51, 51, 51, 1) ), ) ], @@ -105,7 +101,6 @@ class _HomePageState extends State { child: InkWell( onTap: (){ active = 3; - title = "信息"; setState(() { }); @@ -113,16 +108,16 @@ class _HomePageState extends State { child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - Icon( - Icons.home, - size: ScreenUtil().setWidth(26), - color: active == 3 ? const Color.fromRGBO(208, 116, 67, 1) : const Color.fromRGBO(208, 205, 216, 1) + Image.asset( + "assets/${active == 3 ? "chat_active" : "chat"}.png", + width: 65.w, + height: 65.w, ), Text( - "信息", + "消息", style: TextStyle( - fontSize: ScreenUtil().setWidth(12), - color: active == 3 ? const Color.fromRGBO(208, 116, 67, 1) : const Color.fromRGBO(208, 205, 216, 1) + fontSize: 16.w, + color: const Color.fromRGBO(51, 51, 51, 1) ), ) ], @@ -133,7 +128,6 @@ class _HomePageState extends State { child: InkWell( onTap: (){ active = 4; - title = "我的"; setState(() { }); @@ -141,16 +135,16 @@ class _HomePageState extends State { child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - Icon( - Icons.home, - size: ScreenUtil().setWidth(26), - color: active == 4 ? const Color.fromRGBO(208, 116, 67, 1) : const Color.fromRGBO(208, 205, 216, 1) + Image.asset( + "assets/${active == 4 ? "my_active" : "my"}.png", + width: 65.w, + height: 65.w, ), Text( "我的", style: TextStyle( - fontSize: ScreenUtil().setWidth(12), - color: active == 4 ? const Color.fromRGBO(208, 116, 67, 1) : const Color.fromRGBO(208, 205, 216, 1) + fontSize: 16.w, + color: const Color.fromRGBO(51, 51, 51, 1) ), ) ], diff --git a/lib/pages/index_page.dart b/lib/pages/index_page.dart index 1a157e9..0410f1a 100644 --- a/lib/pages/index_page.dart +++ b/lib/pages/index_page.dart @@ -1,3 +1,4 @@ +import 'package:dating_touchme_app/components/home_appbar.dart'; import 'package:dating_touchme_app/components/page_appbar.dart'; import 'package:dating_touchme_app/config/app_config.dart'; import 'package:dating_touchme_app/http/api.dart'; @@ -27,6 +28,20 @@ class _IndexPageState extends State { int num = 0; + List userList = [ + {"isOnline": true, "isLive": false, "hasPic": false}, + {"isOnline": true, "isLive": false, "hasPic": true}, + {"isOnline": false, "isLive": false, "hasPic": false}, + {"isOnline": true, "isLive": true, "hasPic": false}, + {"isOnline": true, "isLive": false, "hasPic": true}, + {"isOnline": true, "isLive": false, "hasPic": false}, + {"isOnline": true, "isLive": false, "hasPic": false}, + {"isOnline": true, "isLive": false, "hasPic": false}, + {"isOnline": true, "isLive": false, "hasPic": false}, + ]; + + List topNav = ["推荐", "同城"]; + @override void initState() { super.initState(); @@ -46,65 +61,336 @@ class _IndexPageState extends State { } + void changeNav(int active) { + print("当前项: $active"); + } + @override Widget build(BuildContext context) { final userInfo = Provider.of(context); - return Column( - children: [ - - ElevatedButton( - onPressed: () async { - final r = await GlobalModalController.I.enqueue( - ModalRequest( - type: 'friend_request', - payload: { - 'userName': '一夏', - 'avatar': 'https://picsum.photos/100', - 'userId': 'u1001', - }, - dedupeKey: 'friendReq:u1001', - ttl: const Duration(minutes: 2), - timeout: const Duration(seconds: 20), - ), - ); - ScaffoldMessenger.of(context).showSnackBar( - SnackBar(content: Text('好友申请结果: ${r.action}')), - ); - }, - child: const Text('模拟好友申请弹窗'), + return Container( + padding: EdgeInsets.symmetric(horizontal: 25.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], ), - const SizedBox(height: 12), - ElevatedButton( - onPressed: () async { - final r = await GlobalModalController.I.enqueue( - ModalRequest( - type: 'live_invite', - payload: { - 'roomId': 'room-2025', - 'roomName': '技术分享房', - 'inviter': '主播小栈', - 'countdownSec': 10, - }, - dedupeKey: 'liveInvite:room-2025', - priority: ModalPriority.high, - ttl: const Duration(seconds: 30), - timeout: const Duration(seconds: 12), + ), + child: Column( + children: [ + HomeAppbar(topNav: topNav, changeNav: changeNav,), + ...userList.map((e){ + return UserItem(item: e); + }), + ], + ), + ); + } +} + + +class UserItem extends StatefulWidget { + final Map item; + const UserItem({super.key, required this.item}); + + @override + State createState() => _UserItemState(); +} + +class _UserItemState extends State { + @override + Widget build(BuildContext context) { + return Container( + padding: EdgeInsets.symmetric(vertical: 34.w, horizontal: 22.w), + margin: EdgeInsets.only(bottom: 20.w), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(18.w)), + color: Colors.white + ), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Stack( + children: [ + Container( + width: 116.w, + height: 116.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(116.w)), + border: Border.all(width: 1, color: widget.item["isOnline"] && widget.item["isLive"] ? const Color.fromRGBO(192, 86, 233, 1) : Colors.transparent) + ), + child: Image.asset( + "assets/user_avatar.png", + width: 116.w, + ), ), - ); - ScaffoldMessenger.of(context).showSnackBar( - SnackBar(content: Text('连麦邀请结果: ${r.action}')), - ); - }, - child: const Text('模拟直播连麦邀请'), - ), - const SizedBox(height: 12), - ElevatedButton( - onPressed: () async { - context.pushNamed(RouteNames.test, queryParameters: {'a': '10', 'b': '20'}); - }, - child: const Text('测试go router跳转'), - ), - ], + if(widget.item["isOnline"] && !widget.item["isLive"]) 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) + ), + ), + ), + if(widget.item["isOnline"] && widget.item["isLive"]) Positioned( + bottom: 0, + left: 23.w, + child: Container( + width: 70.w, + height: 28.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(28.w)), + gradient: LinearGradient( + begin: Alignment.centerLeft, + end: Alignment.centerRight, + colors: [ + Color.fromRGBO(197, 85, 232, 1.0), // rgba(197, 85, 232, 1) + Color.fromRGBO(142, 99, 250, 1.0), // rgba(142, 99, 250, 1) + ], + stops: [0.0, 1.0], + ), + ), + child: Center( + child: Text( + "直播中", + style: TextStyle( + fontSize: 16.w, + color: Colors.white + ), + ), + ), + ), + ) + ], + ), + SizedBox(width: 27.w,), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + SizedBox( + width: 508.w, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Row( + children: [ + Text( + "林园园", + style: TextStyle( + fontSize: 30.w, + color: const Color.fromRGBO(51, 51, 51, 1), + fontWeight: FontWeight.w500 + ), + ), + SizedBox(width: 17.w,), + if(widget.item["isOnline"] && !widget.item["isLive"]) Container( + width: 66.w, + height: 26.w, + margin: EdgeInsets.only(right: 5.w), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(26.w)), + color: const Color.fromRGBO(234, 255, 219, 1) + ), + child: Center( + child: Text( + "在线", + style: TextStyle( + fontSize: 18.w, + color: const Color.fromRGBO(38, 199, 124, 1) + ), + ), + ), + ), + Container( + width: 87.w, + height: 26.w, + margin: EdgeInsets.only(right: 11.w), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(26.w)), + color: const Color.fromRGBO(246, 237, 255, 1) + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Image.asset( + "assets/real_name.png", + width: 16.w, + ), + SizedBox(width: 5.w,), + Text( + "实名", + style: TextStyle( + fontSize: 18.w, + color: const Color.fromRGBO(160, 92, 255, 1) + ), + ) + ], + ), + ), + if(widget.item["isOnline"] && widget.item["isLive"]) Container( + width: 120.w, + height: 26.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(26.w)), + color: const Color.fromRGBO(234, 255, 219, 1) + ), + child: Center( + child: Text( + "视频相亲中", + style: TextStyle( + fontSize: 18.w, + color: const Color.fromRGBO(38, 199, 124, 1) + ), + ), + ), + ) + ], + ), + if(widget.item["isOnline"] && !widget.item["isLive"]) Container( + width: 81.w, + height: 40.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(8.w)), + gradient: LinearGradient( + begin: Alignment.centerLeft, // 对应 90deg，从左到右 + end: Alignment.centerRight, + colors: [ + Color.fromRGBO(61, 138, 224, 1.0), // rgba(61, 138, 224, 1) + Color.fromRGBO(131, 89, 254, 1.0), // rgba(131, 89, 254, 1) + ], + stops: [0.0, 1.0], + ), + ), + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Image.asset( + "assets/H.png", + height: 22.w, + ), + SizedBox(width: 4.w,), + Image.asset( + "assets/i.png", + height: 22.w, + ) + ], + ), + ), + if(!widget.item["isOnline"]) Container( + width: 81.w, + height: 40.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(8.w)), + gradient: LinearGradient( + begin: Alignment.centerLeft, // 对应 90deg，从左到右 + end: Alignment.centerRight, + colors: [ + Color.fromRGBO(61, 138, 224, 1.0), // rgba(61, 138, 224, 1) + Color.fromRGBO(131, 89, 254, 1.0), // rgba(131, 89, 254, 1) + ], + stops: [0.0, 1.0], + ), + ), + child: Center( + child: Text( + "发消息", + style: TextStyle( + fontSize: 20.w, + color: Colors.white + ), + ), + ), + ), + if(widget.item["isOnline"] && widget.item["isLive"])Container( + width: 119.w, + height: 40.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(8.w)), + gradient: LinearGradient( + begin: Alignment.centerLeft, // 对应 90deg，从左到右 + end: Alignment.centerRight, + colors: [ + Color.fromRGBO(61, 138, 224, 1.0), // rgba(61, 138, 224, 1) + Color.fromRGBO(131, 89, 254, 1.0), // rgba(131, 89, 254, 1) + ], + stops: [0.0, 1.0], + ), + ), + child: Center( + child: Text( + "进入直播间", + style: TextStyle( + fontSize: 20.w, + color: Colors.white + ), + ), + ), + ), + ], + ), + ), + SizedBox(height: 5.w,), + Text( + "23岁 · 白云区", + style: TextStyle( + color: const Color.fromRGBO(51, 51, 51, 1), + fontSize: 25.w + ), + ), + SizedBox(height: 5.w,), + SizedBox( + width: 508.w, + child: Text( + "我想找一个有缘的异性，快来联系我吧快来我想找一个有缘的异性，快来联系我吧快来..........", + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: TextStyle( + color: const Color.fromRGBO(51, 51, 51, .6), + fontSize: 25.w + ), + ), + ), + SizedBox(height: 5.w,), + if(widget.item["hasPic"]) SizedBox( + width: 508.w, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Image.asset( + "assets/pic1.png", + width: 165.w, + height: 165.w, + ), + Image.asset( + "assets/pic2.png", + width: 165.w, + height: 165.w, + ), + Image.asset( + "assets/pic3.png", + width: 165.w, + height: 165.w, + ), + ], + ), + ) + ], + ) + ], + ), ); } } diff --git a/lib/pages/live_page.dart b/lib/pages/live_page.dart index 61284f6..637e5f1 100644 --- a/lib/pages/live_page.dart +++ b/lib/pages/live_page.dart @@ -1,6 +1,8 @@ +import 'package:dating_touchme_app/components/home_appbar.dart'; import 'package:dating_touchme_app/provide/user_info.dart'; import 'package:dating_touchme_app/utils/storage.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:provider/provider.dart'; class LivePage extends StatefulWidget { @@ -12,26 +14,274 @@ class LivePage extends StatefulWidget { class _LivePageState extends State { - int nowNum = 0; - String nowToken = ""; + + List topNav = ["相亲", "聚会脱单"]; + + List liveList = [ + {"isNew": true}, + {"isNew": true}, + {"isNew": false}, + {"isNew": false}, + {"isNew": false}, + {"isNew": false}, + {"isNew": false}, + {"isNew": false}, + {"isNew": false}, + {"isNew": false}, + ]; + + List tabList = [ + "全部", "同城", "相亲视频", "相亲语音" + ]; + + int active = 0; @override void initState() { - getData(); super.initState(); } - getData() async { - nowNum = Provider.of(context, listen: false).current; - nowToken = await Storage().getStorage("token"); - setState(() { - }); + + void changeNav(int active) { + print("当前项: $active"); } @override Widget build(BuildContext context) { - return Text("直播页面"); + return Container( + padding: EdgeInsets.symmetric(horizontal: 24.w), + constraints: BoxConstraints(minHeight: ScreenUtil().setHeight(1220)), + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topCenter, // 对应 180deg，从上到下 + 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], // 对应 0% 和 100% + ), + ), + child: Column( + children: [ + HomeAppbar(topNav: topNav, changeNav: changeNav,), + Container( + width: 702.w, + height: 91.w, + child: SingleChildScrollView( + scrollDirection: Axis.horizontal, + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + ...tabList.asMap().entries.map((entry){ + return Container( + margin: EdgeInsets.only(right: 55.w), + child: InkWell( + onTap: (){ + active = entry.key; + setState(() { + + }); + }, + child: Container( + height: 43.w, + padding: EdgeInsets.symmetric(horizontal: active == entry.key ? 30.w : 0), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(43.w)), + color: Color.fromRGBO(108, 105, 244, active == entry.key ? 1 : 0) + ), + child: Center( + child: Text( + entry.value, + style: TextStyle( + fontSize: 24.w, + color: active == entry.key ? Colors.white :const Color.fromRGBO(51, 51, 51, .7), + fontWeight: active == entry.key ? FontWeight.w700 : FontWeight.w500 + ), + ), + ), + ), + ), + ); + }), + ], + ), + ), + ), + Wrap( + spacing: 15.w, + runSpacing: 15.w, + children: [ + ...liveList.map((e){ + return LiveItem(item: e,); + }), + + ], + ) + ], + ), + ); } } + +class LiveItem extends StatefulWidget { + final Map item; + const LiveItem({super.key, required this.item}); + + @override + State createState() => _LiveItemState(); +} + +class _LiveItemState extends State { + @override + Widget build(BuildContext context) { + return ClipRRect( + borderRadius: BorderRadius.all(Radius.circular(20.w)), + child: Stack( + children: [ + Container( + width: 343.w, + height: 343.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(20.w)) + ), + child: Image.network( + "https://picsum.photos/400", + width: 343.w, + height: 343.w, + ), + ), + Positioned( + top: 0, + left: 0, + child: Stack( + children: [ + Image.asset( + "assets/subscript.png", + width: 113.w, + height: 32.w, + ), + SizedBox( + height: 32.w, + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox(width: 10.w,), + Image.asset( + "assets/location_icon.png", + width: 12.w, + height: 14.w, + ), + SizedBox(width: 6.w,), + Text( + "49.9km", + style: TextStyle( + fontSize: 16.w, + color: Colors.white, + fontWeight: FontWeight.w500 + ), + ) + ], + ), + ) + ], + ), + ), + if(widget.item["isNew"]) Positioned( + top: 19.w, + right: 17.w, + child: Container( + width: 79.w, + height: 26.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(26.w)), + color: const Color.fromRGBO(0, 0, 0, .3) + ), + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Container( + width: 10.w, + height: 10.w, + margin: EdgeInsets.only(right: 6.w), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(10.w)), + color: const Color.fromRGBO(255, 209, 43, 1) + ), + ), + Text( + "等待", + style: TextStyle( + fontSize: 16.w, + color: Colors.white, + fontWeight: FontWeight.w500 + ), + ) + ], + ), + ), + ), + Positioned( + left: 18.w, + bottom: 13.w, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox( + width: 128.w, + child: Text( + "一直一直在等你一直一直在等你......", + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: TextStyle( + fontSize: 16.w, + color: Colors.white, + fontWeight: FontWeight.w500 + ), + ), + ), + SizedBox(height: 5.w,), + Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Text( + "福州 | 28岁", + style: TextStyle( + fontSize: 22.w, + color: Colors.white, + fontWeight: FontWeight.w500 + ), + ), + SizedBox(width: 11.w,), + if(widget.item["isNew"]) Container( + width: 65.w, + height: 21.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(21.w)), + color: const Color.fromRGBO(255, 206, 28, .8) + ), + child: Center( + child: Text( + "新人", + style: TextStyle( + fontSize: 16.w, + color: Colors.white, + fontWeight: FontWeight.w500 + ), + ), + ), + ) + ], + ) + ], + ), + ) + ], + ), + ); + } +} + diff --git a/pubspec.yaml b/pubspec.yaml index 06f57fe..04933d2 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -71,6 +71,8 @@ flutter: # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true + assets: + - assets/ # To add assets to your application, add an assets section, like this: # assets: diff --git a/test/widget_test.dart b/test/widget_test.dart deleted file mode 100644 index b0aab5a..0000000 --- a/test/widget_test.dart +++ /dev/null @@ -1,30 +0,0 @@ -// This is a basic Flutter widget test. -// -// To perform an interaction with a widget in your test, use the WidgetTester -// utility in the flutter_test package. For example, you can send tap and scroll -// gestures. You can also use WidgetTester to find child widgets in the widget -// tree, read text, and verify that the values of widget properties are correct. - -import 'package:flutter/material.dart'; -import 'package:flutter_test/flutter_test.dart'; - -import 'package:dating_touchme_app/main.dart'; - -void main() { - testWidgets('Counter increments smoke test', (WidgetTester tester) async { - // Build our app and trigger a frame. - await tester.pumpWidget(const MyApp()); - - // Verify that our counter starts at 0. - expect(find.text('0'), findsOneWidget); - expect(find.text('1'), findsNothing); - - // Tap the '+' icon and trigger a frame. - await tester.tap(find.byIcon(Icons.add)); - await tester.pump(); - - // Verify that our counter has incremented. - expect(find.text('0'), findsNothing); - expect(find.text('1'), findsOneWidget); - }); -}