diff --git a/assets/ad.png b/assets/ad.png new file mode 100644 index 0000000..ae16bec Binary files /dev/null and b/assets/ad.png differ diff --git a/assets/ali_pay.png b/assets/ali_pay.png new file mode 100644 index 0000000..32b0e54 Binary files /dev/null and b/assets/ali_pay.png differ diff --git a/assets/arrow_r.png b/assets/arrow_r.png new file mode 100644 index 0000000..a8b0170 Binary files /dev/null and b/assets/arrow_r.png differ diff --git a/assets/check.png b/assets/check.png new file mode 100644 index 0000000..4761dcb Binary files /dev/null and b/assets/check.png differ diff --git a/assets/close_arrow.png b/assets/close_arrow.png new file mode 100644 index 0000000..93ca864 Binary files /dev/null and b/assets/close_arrow.png differ diff --git a/assets/fire_icon.png b/assets/fire_icon.png new file mode 100644 index 0000000..c6cf721 Binary files /dev/null and b/assets/fire_icon.png differ diff --git a/assets/first_pay.png b/assets/first_pay.png new file mode 100644 index 0000000..e132802 Binary files /dev/null and b/assets/first_pay.png differ diff --git a/assets/gift1.png b/assets/gift1.png new file mode 100644 index 0000000..dffb572 Binary files /dev/null and b/assets/gift1.png differ diff --git a/assets/gift2.png b/assets/gift2.png new file mode 100644 index 0000000..ff43958 Binary files /dev/null and b/assets/gift2.png differ diff --git a/assets/gift3.png b/assets/gift3.png new file mode 100644 index 0000000..9c13b34 Binary files /dev/null and b/assets/gift3.png differ diff --git a/assets/gift4.png b/assets/gift4.png new file mode 100644 index 0000000..fc92297 Binary files /dev/null and b/assets/gift4.png differ diff --git a/assets/gift5.png b/assets/gift5.png new file mode 100644 index 0000000..b1e4192 Binary files /dev/null and b/assets/gift5.png differ diff --git a/assets/gift_icon.png b/assets/gift_icon.png new file mode 100644 index 0000000..8a8eb63 Binary files /dev/null and b/assets/gift_icon.png differ diff --git a/assets/mic_close.png b/assets/mic_close.png new file mode 100644 index 0000000..7a7210a Binary files /dev/null and b/assets/mic_close.png differ diff --git a/assets/mic_open.png b/assets/mic_open.png new file mode 100644 index 0000000..ccb4e12 Binary files /dev/null and b/assets/mic_open.png differ diff --git a/assets/rose_gift.png b/assets/rose_gift.png new file mode 100644 index 0000000..bc94d5a Binary files /dev/null and b/assets/rose_gift.png differ diff --git a/assets/rose_white.png b/assets/rose_white.png new file mode 100644 index 0000000..81b5014 Binary files /dev/null and b/assets/rose_white.png differ diff --git a/assets/seat.png b/assets/seat.png new file mode 100644 index 0000000..67b9a34 Binary files /dev/null and b/assets/seat.png differ diff --git a/assets/wechat_pay.png b/assets/wechat_pay.png new file mode 100644 index 0000000..a9ee5f0 Binary files /dev/null and b/assets/wechat_pay.png differ diff --git a/lib/pages/live_page.dart b/lib/pages/live_page.dart index fbd5efb..a5958e1 100644 --- a/lib/pages/live_page.dart +++ b/lib/pages/live_page.dart @@ -1,8 +1,10 @@ import 'package:dating_touchme_app/components/home_appbar.dart'; import 'package:dating_touchme_app/provide/user_info.dart'; +import 'package:dating_touchme_app/router/route_paths.dart'; import 'package:dating_touchme_app/utils/storage.dart'; import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:go_router/go_router.dart'; import 'package:provider/provider.dart'; class LivePage extends StatefulWidget { @@ -159,149 +161,154 @@ class LiveItem extends StatefulWidget { 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", + return InkWell( + onTap: (){ + context.pushNamed(RouteNames.liveRoom, queryParameters: {"id" : "0"}); + }, + child: ClipRRect( + borderRadius: BorderRadius.all(Radius.circular(20.w)), + child: Stack( + children: [ + Container( 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) + borderRadius: BorderRadius.all(Radius.circular(20.w)) ), - child: Row( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.center, + child: Image.network( + "https://picsum.photos/400", + width: 343.w, + height: 343.w, + ), + ), + Positioned( + top: 0, + left: 0, + child: Stack( 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) - ), + Image.asset( + "assets/subscript.png", + width: 113.w, + height: 32.w, ), - Text( - "等待", - style: TextStyle( - fontSize: 16.w, - color: Colors.white, - fontWeight: FontWeight.w500 + 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 + ), + ) + ], ), ) ], ), ), - ), - 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 - ), - ), + 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) ), - SizedBox(height: 5.w,), - Row( + 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( - "福州 | 28岁", + "等待", style: TextStyle( - fontSize: 22.w, - color: Colors.white, - fontWeight: FontWeight.w500 + fontSize: 16.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) + ) + ], + ), + ), + ), + 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 ), - child: Center( - child: Text( - "新人", - style: TextStyle( - fontSize: 16.w, + ), + ), + 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/lib/pages/live_room_page.dart b/lib/pages/live_room_page.dart new file mode 100644 index 0000000..c75ef33 --- /dev/null +++ b/lib/pages/live_room_page.dart @@ -0,0 +1,1868 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:roundcheckbox/roundcheckbox.dart'; +import 'package:tdesign_flutter/tdesign_flutter.dart'; + +class LiveRoomPage extends StatefulWidget { + final int id; + const LiveRoomPage({super.key, required this.id}); + + @override + State createState() => _LiveRoomPageState(); +} + +class _LiveRoomPageState extends State { + + + String message = ''; + final TextEditingController _messageController = TextEditingController(); + + final activeGift = ValueNotifier(null); + + List giftList = [ + {"icon": "assets/gift1.png", "title": "爱心礼物", "price": 30}, + {"icon": "assets/gift2.png", "title": "小小小星星", "price": 30}, + {"icon": "assets/gift3.png", "title": "助威", "price": 30}, + {"icon": "assets/gift4.png", "title": "点赞", "price": 30}, + {"icon": "assets/gift5.png", "title": "崇拜衣柜", "price": 30}, + ]; + + int giftNum = 1; + + final activePay = ValueNotifier(null); + List payList = [ + {"num": 10, "price": 10, "hasTag": true}, + {"num": 60, "price": 60, "hasTag": true}, + {"num": 300, "price": 60, "hasTag": true}, + {"num": 1080, "price": 1080, "hasTag": false}, + {"num": 2880, "price": 2880, "hasTag": false}, + {"num": 5000, "price": 5000, "hasTag": false}, + {"num": 10000, "price": 10000, "hasTag": false}, + {"num": 20000, "price": 20000, "hasTag": false}, + {"num": 50000, "price": 50000, "hasTag": false}, + ]; + + final payChecked = ValueNotifier(true); + + changeActive(int index){ + activeGift.value = index; + setState(() { + + }); + } + + changePayActive(int index){ + activePay.value = index; + setState(() { + + }); + } + + @override + void initState() { + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Stack( + children: [ + Container( + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + colors: [ + Color.fromRGBO(248, 242, 255, 1), + Color.fromRGBO(247, 247, 247, 1), + ], + ), + ), + ), + Container( + decoration: const BoxDecoration( + gradient: LinearGradient( + begin: Alignment.bottomCenter, + end: Alignment.topCenter, + colors: [ + Color.fromRGBO(19, 16, 47, 1), + Color.fromRGBO(19, 16, 47, 1), + ], + ), + ), + ), + Container( + padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top), + child: Column( + children: [ + SizedBox(height: 21.w,), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Container ( + height: 80.w, + padding: EdgeInsets.symmetric(horizontal: 6.w), + margin: EdgeInsets.only(left: 21.w), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(80.w)), + color: const Color.fromRGBO(0, 0, 0, .25) + ), + child: Row( + children: [ + Image.asset( + "assets/user_avatar.png", + width: 68.w, + height: 68.w, + ), + SizedBox(width: 14.w,), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "开心的橘子", + style: TextStyle( + fontSize: 26.w, + color: Colors.white + ), + ), + Row( + children: [ + Image.asset( + "assets/fire_icon.png", + width: 21.w, + height: 24.w, + ), + SizedBox(width: 9.w,), + Text( + "1263", + style: TextStyle( + fontSize: 20.w, + color: Colors.white, + fontWeight: FontWeight.w500 + ), + ) + ], + ) + ], + ), + SizedBox(width: 30.w,), + Container( + width: 94.w, + height: 55.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(55.w)), + color: const Color.fromRGBO(253, 43, 84, 1) + ), + child: Center( + child: Text( + "关注", + style: TextStyle( + fontSize: 26.w, + color: Colors.white, + fontWeight: FontWeight.w500, + height: 1 + ), + ), + ), + ) + ], + ), + ), + Container( + width: 60.w, + height: 60.w, + margin: EdgeInsets.only(right: 31.w), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(60.w)), + color: const Color.fromRGBO(0, 0, 0, .3) + ), + child: Center( + child: Image.asset( + "assets/close_arrow.png", + width: 28.w, + height: 28.w, + ), + ), + ) + ], + ), + SizedBox(height: 15.w,), + Stack( + children: [ + Container( + width: 355.w, + height: 350.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(18.w)), + color: const Color.fromRGBO(47, 10, 94, 1) + ), + ), + Positioned( + top: 10.w, + left: 10.w, + child: Container( + width: 84.w, + height: 26.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(26.w)), + color: const Color.fromRGBO(142, 20, 186, 1) + ), + child: Center( + child: Text( + "主持人", + style: TextStyle( + fontSize: 18.w, + color: Colors.white + ), + ), + ), + ), + ), + Positioned( + top: 11.w, + right: 10.w, + child: Container( + width: 40.w, + height: 40.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(39.w)), + color: const Color.fromRGBO(0, 0, 0, .3) + ), + child: Center( + child: Image.asset( + "assets/gift_icon.png", + width: 39.w, + height: 39.w, + ), + ), + ), + ), + Positioned( + bottom: 10.w, + right: 10.w, + child: Container( + width: 94.w, + height: 40.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(40.w)), + color: Colors.white + ), + child: Center( + child: Text( + "加好友", + style: TextStyle( + fontSize: 22.w, + color: const Color.fromRGBO(117, 98, 249, 1) + ), + ), + ), + ), + ) + ], + ), + SizedBox(height: 10.w,), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Stack( + children: [ + Container( + width: 355.w, + height: 350.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.horizontal(left: Radius.circular(18.w)), + color: const Color.fromRGBO(47, 10, 94, 1) + ), + ), + Positioned( + top: 11.w, + right: 10.w, + child: Container( + width: 40.w, + height: 40.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(39.w)), + color: const Color.fromRGBO(0, 0, 0, .3) + ), + child: Center( + child: Image.asset( + "assets/gift_icon.png", + width: 39.w, + height: 39.w, + ), + ), + ), + ), + Positioned( + bottom: 10.w, + right: 10.w, + child: Container( + width: 94.w, + height: 40.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(40.w)), + color: Colors.white + ), + child: Center( + child: Text( + "加好友", + style: TextStyle( + fontSize: 22.w, + color: const Color.fromRGBO(117, 98, 249, 1) + ), + ), + ), + ), + ), + Positioned( + left: 10.w, + bottom: 10.w, + child: Row( + children: [ + Container( + width: 40.w, + height: 40.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(8.w)), + color: const Color.fromRGBO(0, 0, 0, .65) + ), + child: Center( + child: Image.asset( + "assets/mic_close.png", + width: 21.w, + height: 23.w, + ), + ), + ), + SizedBox(width: 11.w,), + Text( + "飞翔的企鹅", + style: TextStyle( + fontSize: 22.w, + color: Colors.white, + fontWeight: FontWeight.w500 + ), + ) + ], + ), + ) + ], + ), + Stack( + children: [ + Container( + width: 355.w, + height: 350.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.horizontal(right: Radius.circular(18.w)), + color: const Color.fromRGBO(47, 10, 94, 1) + ), + ), + Positioned( + top: 11.w, + right: 10.w, + child: Container( + width: 40.w, + height: 40.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(39.w)), + color: const Color.fromRGBO(0, 0, 0, .3) + ), + child: Center( + child: Image.asset( + "assets/gift_icon.png", + width: 39.w, + height: 39.w, + ), + ), + ), + ), + Positioned( + bottom: 10.w, + right: 10.w, + child: Container( + width: 94.w, + height: 40.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(40.w)), + color: Colors.white + ), + child: Center( + child: Text( + "加好友", + style: TextStyle( + fontSize: 22.w, + color: const Color.fromRGBO(117, 98, 249, 1) + ), + ), + ), + ), + ), + Positioned( + left: 10.w, + bottom: 10.w, + child: Row( + children: [ + Container( + width: 40.w, + height: 40.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(8.w)), + color: const Color.fromRGBO(0, 0, 0, .65) + ), + child: Center( + child: Image.asset( + "assets/mic_open.png", + width: 21.w, + height: 23.w, + ), + ), + ), + SizedBox(width: 11.w,), + Text( + "飞翔的企鹅", + style: TextStyle( + fontSize: 22.w, + color: Colors.white, + fontWeight: FontWeight.w500 + ), + ) + ], + ), + ) + ], + ), + ], + ), + SizedBox(height: 10.w,), + Container( + width: 750.w, + height: 110.w, + padding: EdgeInsets.symmetric(horizontal: 12.w), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(18.w)), + gradient: LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, // 135° 对应 topLeft → bottomRight + colors: [ + Color.fromRGBO(46, 19, 79, 1), // 0% + Color.fromRGBO(61, 67, 130, 1), // 31.53% + Color.fromRGBO(64, 23, 115, 1), // 72.09% + Color.fromRGBO(26, 28, 86, 1), // 100% + ], + stops: [0.0, 0.3153, 0.7209, 1.0], // 对应 CSS 百分比位置 + ), + border: Border.all(width: 1, color: const Color.fromRGBO(117, 102, 255, 1)) + ), + child: SingleChildScrollView( + scrollDirection: Axis.horizontal, + child: Row( + children: [ + Container( + margin: EdgeInsets.symmetric(horizontal: 15.w), + child: Stack( + children: [ + Image.asset( + "assets/seat.png", + width: 71.w, + height: 71.w, + ), + Positioned( + bottom: 0, + left: 7.w, + child: Container( + width: 57.w, + height: 24.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(8.w)), + color: const Color.fromRGBO(0, 0, 0, .65) + ), + child: Row( + children: [ + Expanded( + child: Center( + child: Text( + "1", + style: TextStyle( + fontSize: 16.w, + color: Colors.white, + fontWeight: FontWeight.w500 + ), + ), + ), + ), + Container( + width: 24.w, + height: 24.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(24.w)), + gradient: LinearGradient( + begin: Alignment.centerLeft, // 左侧开始 + end: Alignment.centerRight, // 右侧结束 + colors: [ + Color.fromRGBO(131, 89, 255, 1), // 紫色 + Color.fromRGBO(61, 138, 224, 1), // 蓝色 + ], + ), + ), + child: Center( + child: Image.asset( + "assets/mic_close.png", + width: 13.w, + height: 14.w, + ), + ), + ) + ], + ), + ), + ) + ], + ), + ), + Container( + margin: EdgeInsets.symmetric(horizontal: 15.w), + child: Stack( + children: [ + Image.asset( + "assets/seat.png", + width: 71.w, + height: 71.w, + ), + Positioned( + bottom: 0, + left: 7.w, + child: Container( + width: 57.w, + height: 24.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(8.w)), + color: const Color.fromRGBO(0, 0, 0, .65) + ), + child: Row( + children: [ + Expanded( + child: Center( + child: Text( + "1", + style: TextStyle( + fontSize: 16.w, + color: Colors.white, + fontWeight: FontWeight.w500 + ), + ), + ), + ), + Container( + width: 24.w, + height: 24.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(24.w)), + gradient: LinearGradient( + begin: Alignment.centerLeft, // 左侧开始 + end: Alignment.centerRight, // 右侧结束 + colors: [ + Color.fromRGBO(131, 89, 255, 1), // 紫色 + Color.fromRGBO(61, 138, 224, 1), // 蓝色 + ], + ), + ), + child: Center( + child: Image.asset( + "assets/mic_close.png", + width: 13.w, + height: 14.w, + ), + ), + ) + ], + ), + ), + ) + ], + ), + ), + Container( + margin: EdgeInsets.symmetric(horizontal: 15.w), + child: Stack( + children: [ + Image.asset( + "assets/seat.png", + width: 71.w, + height: 71.w, + ), + Positioned( + bottom: 0, + left: 7.w, + child: Container( + width: 57.w, + height: 24.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(8.w)), + color: const Color.fromRGBO(0, 0, 0, .65) + ), + child: Row( + children: [ + Expanded( + child: Center( + child: Text( + "1", + style: TextStyle( + fontSize: 16.w, + color: Colors.white, + fontWeight: FontWeight.w500 + ), + ), + ), + ), + Container( + width: 24.w, + height: 24.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(24.w)), + gradient: LinearGradient( + begin: Alignment.centerLeft, // 左侧开始 + end: Alignment.centerRight, // 右侧结束 + colors: [ + Color.fromRGBO(131, 89, 255, 1), // 紫色 + Color.fromRGBO(61, 138, 224, 1), // 蓝色 + ], + ), + ), + child: Center( + child: Image.asset( + "assets/mic_close.png", + width: 13.w, + height: 14.w, + ), + ), + ) + ], + ), + ), + ) + ], + ), + ), + Container( + margin: EdgeInsets.symmetric(horizontal: 15.w), + child: Stack( + children: [ + Image.asset( + "assets/seat.png", + width: 71.w, + height: 71.w, + ), + Positioned( + bottom: 0, + left: 7.w, + child: Container( + width: 57.w, + height: 24.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(8.w)), + color: const Color.fromRGBO(0, 0, 0, .65) + ), + child: Row( + children: [ + Expanded( + child: Center( + child: Text( + "1", + style: TextStyle( + fontSize: 16.w, + color: Colors.white, + fontWeight: FontWeight.w500 + ), + ), + ), + ), + Container( + width: 24.w, + height: 24.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(24.w)), + gradient: LinearGradient( + begin: Alignment.centerLeft, // 左侧开始 + end: Alignment.centerRight, // 右侧结束 + colors: [ + Color.fromRGBO(131, 89, 255, 1), // 紫色 + Color.fromRGBO(61, 138, 224, 1), // 蓝色 + ], + ), + ), + child: Center( + child: Image.asset( + "assets/mic_close.png", + width: 13.w, + height: 14.w, + ), + ), + ) + ], + ), + ), + ) + ], + ), + ), + Container( + margin: EdgeInsets.symmetric(horizontal: 15.w), + child: Stack( + children: [ + Image.asset( + "assets/seat.png", + width: 71.w, + height: 71.w, + ), + Positioned( + bottom: 0, + left: 7.w, + child: Container( + width: 57.w, + height: 24.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(8.w)), + color: const Color.fromRGBO(0, 0, 0, .65) + ), + child: Row( + children: [ + Expanded( + child: Center( + child: Text( + "1", + style: TextStyle( + fontSize: 16.w, + color: Colors.white, + fontWeight: FontWeight.w500 + ), + ), + ), + ), + Container( + width: 24.w, + height: 24.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(24.w)), + gradient: LinearGradient( + begin: Alignment.centerLeft, // 左侧开始 + end: Alignment.centerRight, // 右侧结束 + colors: [ + Color.fromRGBO(131, 89, 255, 1), // 紫色 + Color.fromRGBO(61, 138, 224, 1), // 蓝色 + ], + ), + ), + child: Center( + child: Image.asset( + "assets/mic_close.png", + width: 13.w, + height: 14.w, + ), + ), + ) + ], + ), + ), + ) + ], + ), + ), + Container( + margin: EdgeInsets.symmetric(horizontal: 15.w), + child: Stack( + children: [ + Image.asset( + "assets/seat.png", + width: 71.w, + height: 71.w, + ), + Positioned( + bottom: 0, + left: 7.w, + child: Container( + width: 57.w, + height: 24.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(8.w)), + color: const Color.fromRGBO(0, 0, 0, .65) + ), + child: Row( + children: [ + Expanded( + child: Center( + child: Text( + "1", + style: TextStyle( + fontSize: 16.w, + color: Colors.white, + fontWeight: FontWeight.w500 + ), + ), + ), + ), + Container( + width: 24.w, + height: 24.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(24.w)), + gradient: LinearGradient( + begin: Alignment.centerLeft, // 左侧开始 + end: Alignment.centerRight, // 右侧结束 + colors: [ + Color.fromRGBO(131, 89, 255, 1), // 紫色 + Color.fromRGBO(61, 138, 224, 1), // 蓝色 + ], + ), + ), + child: Center( + child: Image.asset( + "assets/mic_close.png", + width: 13.w, + height: 14.w, + ), + ), + ) + ], + ), + ), + ) + ], + ), + ), + Container( + margin: EdgeInsets.symmetric(horizontal: 15.w), + child: Stack( + children: [ + Image.asset( + "assets/seat.png", + width: 71.w, + height: 71.w, + ), + Positioned( + bottom: 0, + left: 7.w, + child: Container( + width: 57.w, + height: 24.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(8.w)), + color: const Color.fromRGBO(0, 0, 0, .65) + ), + child: Row( + children: [ + Expanded( + child: Center( + child: Text( + "1", + style: TextStyle( + fontSize: 16.w, + color: Colors.white, + fontWeight: FontWeight.w500 + ), + ), + ), + ), + Container( + width: 24.w, + height: 24.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(24.w)), + gradient: LinearGradient( + begin: Alignment.centerLeft, // 左侧开始 + end: Alignment.centerRight, // 右侧结束 + colors: [ + Color.fromRGBO(131, 89, 255, 1), // 紫色 + Color.fromRGBO(61, 138, 224, 1), // 蓝色 + ], + ), + ), + child: Center( + child: Image.asset( + "assets/mic_close.png", + width: 13.w, + height: 14.w, + ), + ), + ) + ], + ), + ), + ) + ], + ), + ), + ], + ), + ), + ), + SizedBox(height: 10.w,), + Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Stack( + clipBehavior: Clip.none, + children: [ + Container( + width: 68.w, + height: 68.w, + margin: EdgeInsets.only(left: 27.w), + child: ClipRRect( + borderRadius: BorderRadius.all(Radius.circular(68.w)), + child: Image.asset( + "assets/user_avatar.png", + width: 68.w, + height: 68.w, + ), + ), + ), + Positioned( + bottom: -6.w, + left: 41.w, + child: Container( + width: 40.w, + height: 40.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(8.w)), + color: const Color.fromRGBO(0, 0, 0, .65) + ), + child: Center( + child: Image.asset( + "assets/mic_close.png", + width: 21.w, + height: 23.w, + ), + ), + ), + ) + ], + ) + ], + ), + SizedBox(height: 19.w,), + Expanded( + child: Container( + padding: EdgeInsets.only( + left: 27.w, + right: 19.w + ), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: SingleChildScrollView( + child: Column( + children: [ + Text( + "欢迎来到直播间!严禁未成年人直播或礼物消费。严禁违法违规、低俗色情、吸烟酗酒、人身伤害等直播内容。理性消费如主播在直播中以不当方式诱导消费，请谨慎辨别。切勿私下交易，以防人身财产损失，谨防网络诈骗。", + style: TextStyle( + fontSize: 22.w, + color: const Color.fromRGBO(155, 138, 246, 1) + ), + ), + SizedBox(height: 31.w,), + ChatItem(), + ChatItem(), + ChatItem(), + ChatItem(), + ChatItem(), + ChatItem(), + ChatItem(), + ChatItem(), + ChatItem(), + ], + ), + ), + ), + SizedBox(width: 37.w,), + Image.asset( + "assets/ad.png", + width: 147.w, + fit: BoxFit.cover, + ) + ], + ), + ), + ), + SizedBox(height: 34.w,), + Row( + children: [ + Container( + margin: EdgeInsets.only(left: 32.w), + child: InkWell( + onTap: (){ + Navigator.of(context).push(TDSlidePopupRoute( + modalBarrierColor: TDTheme.of(context).fontGyColor2, + slideTransitionFrom: SlideTransitionFrom.bottom, + builder: (context) { + return Material( + child: ValueListenableBuilder( + valueListenable: activeGift, + builder: (context, active, _) { + return Container( + color: const Color.fromRGBO(41, 31, 61, 1), + height: 726.w, + child: Column( + children: [ + Container( + height: 106.w, + padding: EdgeInsets.symmetric(horizontal: 20.w), + child: Row( + children: [ + Row( + children: [ + Text( + "送给： ", + style: TextStyle( + fontSize: 26.w, + color: Colors.white + ), + ), + SizedBox(width: 13.w,), + Stack( + children: [ + ClipRRect( + borderRadius: BorderRadius.all(Radius.circular(68.w)), + child: Container( + width: 68.w, + height: 68.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(68.w)), + border: Border.all(width: 2, color: const Color.fromRGBO(117, 98, 249, 1)) + ), + child: Image.asset( + "assets/user_avatar.png", + width: 65.w, + height: 65.w, + ), + ), + ), + Positioned( + bottom: 0, + right: 4.w, + child: Container( + width: 25.w, + height: 25.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(25.w)), + color: const Color.fromRGBO(117, 98, 249, 1) + ), + child: Center( + child: Image.asset( + "assets/check.png", + width: 13.w, + height: 9.w, + ), + ), + ), + ) + ], + ), + SizedBox(width: 20.w,), + Stack( + children: [ + ClipRRect( + borderRadius: BorderRadius.all(Radius.circular(68.w)), + child: Container( + width: 68.w, + height: 68.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(68.w)), + border: Border.all(width: 2, color: const Color.fromRGBO(117, 98, 249, 1)) + ), + child: Image.asset( + "assets/user_avatar.png", + width: 65.w, + height: 65.w, + ), + ), + ), + Positioned( + bottom: 0, + right: 4.w, + child: Container( + width: 25.w, + height: 25.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(25.w)), + color: const Color.fromRGBO(117, 98, 249, 1) + ), + child: Center( + child: Image.asset( + "assets/check.png", + width: 13.w, + height: 9.w, + ), + ), + ), + ) + ], + ), + SizedBox(width: 20.w,), + Stack( + children: [ + ClipRRect( + borderRadius: BorderRadius.all(Radius.circular(68.w)), + child: Container( + width: 68.w, + height: 68.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(68.w)), + border: Border.all(width: 2, color: const Color.fromRGBO(117, 98, 249, 1)) + ), + child: Image.asset( + "assets/user_avatar.png", + width: 65.w, + height: 65.w, + ), + ), + ), + Positioned( + bottom: 0, + right: 4.w, + child: Container( + width: 25.w, + height: 25.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(25.w)), + color: const Color.fromRGBO(117, 98, 249, 1) + ), + child: Center( + child: Image.asset( + "assets/check.png", + width: 13.w, + height: 9.w, + ), + ), + ), + ) + ], + ), + SizedBox(width: 20.w,), + ], + ), + Container( + width: 127.w, + height: 60.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(60.w)), + color: const Color.fromRGBO(117, 98, 249, 1) + ), + child: Center( + child: Text( + "全选", + style: TextStyle( + fontSize: 26.w, + color: Colors.white + ), + ), + ), + ) + ], + ), + ), + Expanded( + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.vertical(top: Radius.circular(18.w)), + color: const Color.fromRGBO(22, 19, 28, 1) + ), + child: Column( + children: [ + Container( + height: 95.w, + padding: EdgeInsets.only(left: 59.w), + child: Row( + children: [ + Text( + "互动", + style: TextStyle( + fontSize: 26.w, + color: const Color.fromRGBO(144, 144, 144, 1) + ), + ), + SizedBox(width: 80.w,), + Text( + "礼物", + style: TextStyle( + fontSize: 26.w, + color: Colors.white, + fontWeight: FontWeight.w700 + ), + ), + ], + ), + ), + Expanded( + child: Wrap( + children: [ + ...giftList.asMap().entries.map((entry){ + return GiftItem(item: entry.value, active: active ?? 0, index: entry.key, changeActive: changeActive); + }), + ], + ), + ), + Container( + padding: EdgeInsets.symmetric(horizontal: 20.w), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Row( + children: [ + Image.asset( + "assets/rose_gift.png", + width: 43.w, + height: 43.w, + ), + SizedBox(width: 17.w,), + Text( + "9", + style: TextStyle( + fontSize: 26.w, + color: Colors.white + ), + ), + SizedBox(width: 24.w,), + Image.asset( + "assets/first_pay.png", + width: 137.w, + height: 66.w, + ), + ], + ) , + Row( + children: [ + TDStepper( + theme: TDStepperTheme.filled, + value: giftNum, + min: 1, + onChange: (e){ + giftNum = e; + }, + ), + SizedBox(width: 18.w,), + Container( + width: 127.w, + height: 60.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(60.w)), + gradient: LinearGradient( + begin: Alignment.centerLeft, // 左侧开始 + end: Alignment.centerRight, // 右侧结束（90度） + colors: [ + Color.fromRGBO(61, 138, 224, 1), // 蓝色 + Color.fromRGBO(131, 89, 255, 1), // 紫色 + ], + ), + ), + child: Center( + child: Text( + "赠送", + style: TextStyle( + fontSize: 26.w, + color: Colors.white + ), + ), + ), + ) + ], + ) + ], + ), + ) + ], + ), + ), + ) + ], + ), + ); + } + ), + ); + })); + }, + child: Container( + width: 76.w, + height: 76.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(76.w)), + color: const Color.fromRGBO(0, 0, 0, .3) + ), + child: Center( + child: Image.asset( + "assets/gift_icon.png", + width: 57.w, + height: 57.w, + ), + ), + ), + ), + ), + SizedBox(width: 18.w,), + Container( + width: 410.w, + height: 76.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(76.w)), + color: const Color.fromRGBO(0, 0, 0, .3) + ), + child: TextField( + controller: _messageController, + keyboardType: TextInputType.number, + style: TextStyle( + fontSize: ScreenUtil().setWidth(28), + height: 1, + color: Colors.white + ), + decoration: InputDecoration( + contentPadding: EdgeInsets.symmetric( + vertical: 0, + horizontal: 34.w + ), + hintText: "聊点什么吧～", + hintStyle: TextStyle( + color: const Color.fromRGBO(144, 144, 144, 1) + ), + border: const OutlineInputBorder( + borderSide: BorderSide.none, // 这将移除边框 // 可选：设置圆角 + ), + // 如果你希望聚焦时和未聚焦时都没有边框，也可以设置 focusedBorder 和 enabledBorder + focusedBorder: const OutlineInputBorder( + borderSide: BorderSide.none, + borderRadius: BorderRadius.all(Radius.circular(8.0)), + ), + enabledBorder: const OutlineInputBorder( + borderSide: BorderSide.none, + borderRadius: BorderRadius.all(Radius.circular(8.0)), + ), + ), + onChanged: (value){ + message = value; + }, + ), + ), + SizedBox(width: 16.w,), + Container( + width: 76.w, + height: 76.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(76.w)), + color: const Color.fromRGBO(0, 0, 0, .3) + ), + child: Center( + child: Image.asset( + "assets/arrow_r.png", + width: 32.w, + height: 32.w, + ), + ), + ), + SizedBox(width: 16.w,), + InkWell( + onTap: (){ + Navigator.of(context).push(TDSlidePopupRoute( + modalBarrierColor: TDTheme.of(context).fontGyColor2, + slideTransitionFrom: SlideTransitionFrom.bottom, + builder: (context) { + return ClipRRect( + borderRadius: BorderRadius.vertical(top: Radius.circular(18.w)), + child: ValueListenableBuilder( + valueListenable: activePay, + builder: (context, active, _){ + return Material( + child: Container( + color: Colors.white, + height: 881.w, + padding: EdgeInsets.symmetric(horizontal: 20.w), + child: ValueListenableBuilder( + valueListenable: payChecked, + builder: (context, payCheckedV, _) { + return Column( + children: [ + Container( + height: 97.w, + padding: EdgeInsets.symmetric(horizontal: 17.w), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + InkWell( + onTap: (){ + Navigator.maybePop(context); + }, + child: Icon( + Icons.close, + size: 28.w, + color: const Color.fromRGBO(114, 114, 114, 1), + ), + ), + Text( + "玫瑰充值", + style: TextStyle( + fontSize: 35.w, + color: const Color.fromRGBO(51, 51, 51, 1), + fontWeight: FontWeight.w500 + ), + ), + Icon( + Icons.close, + size: 28.w, + color: Colors.transparent, + ), + ], + ), + ), + Container( + padding: EdgeInsets.symmetric(horizontal: 17.w), + margin: EdgeInsets.only(bottom: 30.w), + child: Row( + children: [ + Text( + "余额：9玫瑰", + style: TextStyle( + fontSize: 22.w, + color: const Color.fromRGBO(144, 144, 144, 1), + fontWeight: FontWeight.w500 + ), + ) + ], + ), + ), + Wrap( + spacing: 14.w, + runSpacing: 14.w, + children: [ + ...payList.asMap().entries.map((entry){ + return PayItem(item: entry.value, active: active ?? 0, index: entry.key, changeActive: changePayActive); + }), + ], + ), + Container( + height: 1, + margin: EdgeInsets.only( + top: 20.w, + bottom: 30.w + ), + color: const Color.fromRGBO(219, 219, 219, 1), + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Row( + children: [ + Image.asset( + "assets/ali_pay.png", + width: 35.w, + height: 35.w, + ), + SizedBox(width: 12.w,), + Text( + "支付宝支付", + style: TextStyle( + fontSize: 22.w, + color: const Color.fromRGBO(51, 51, 51, 1), + fontWeight: FontWeight.w500 + ), + ) + ], + ), + RoundCheckBox( + onTap: (bool? value) { + setState(() { + payChecked.value = true; + }); + }, + isChecked: payCheckedV, + size: ScreenUtil().setWidth(30), + checkedColor: const Color.fromRGBO(117, 98, 249, 1), + checkedWidget: Icon( + Icons.check, + color: const Color.fromRGBO(255, 255, 255, 1), + size: ScreenUtil().setWidth(14), + ), + ), + ], + ), + SizedBox(height: 20.w,), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Row( + children: [ + Image.asset( + "assets/wechat_pay.png", + width: 35.w, + height: 35.w, + ), + SizedBox(width: 12.w,), + Text( + "支付宝支付", + style: TextStyle( + fontSize: 22.w, + color: const Color.fromRGBO(51, 51, 51, 1), + fontWeight: FontWeight.w500 + ), + ) + ], + ), + RoundCheckBox( + onTap: (bool? value) { + setState(() { + payChecked.value = false; + }); + }, + isChecked: !payCheckedV, + size: ScreenUtil().setWidth(30), + checkedColor: const Color.fromRGBO(117, 98, 249, 1), + checkedWidget: Icon( + Icons.check, + color: const Color.fromRGBO(255, 255, 255, 1), + size: ScreenUtil().setWidth(14), + ), + ), + ], + ), + SizedBox(height: 17.w,), + Row( + children: [ + RichText( + text: TextSpan( + style: TextStyle( + fontSize: 22.w, + fontWeight: FontWeight.w500 + ), + children: const [ + TextSpan( + text: "充值既代表同意", + style: TextStyle( + color: Color.fromRGBO(189, 189, 189, 1) + ) + ), + TextSpan( + text: "《动我充值协议》", + style: TextStyle( + color: Color.fromRGBO(71, 123, 255, 1) + ) + ), + TextSpan( + text: "和隐私政策", + style: TextStyle( + color: Color.fromRGBO(189, 189, 189, 1) + ) + ), + ] + ), + ) + ], + ), + SizedBox(height: 28.w,), + Container( + width: 650.w, + height: 90.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(90.w)), + gradient: LinearGradient( + begin: Alignment.centerLeft, // 0%：左边开始 + end: Alignment.centerRight, // 100%：右边结束 + colors: [ + Color.fromRGBO(131, 89, 255, 1), // 紫色 + Color.fromRGBO(77, 127, 231, 1), // 中间淡蓝 + Color.fromRGBO(61, 138, 224, 1), // 右侧深蓝 + ], + stops: [0.0, 0.7753, 1.0], // 对应 CSS 百分比：0%、77.53%、100% + ), + ), + child: Center( + child: Text( + "立即充值", + style: TextStyle( + fontSize: 36.w, + color: Colors.white, + fontWeight: FontWeight.w500 + ), + ), + ), + ) + ], + ); + }, + ), + + + ), + ); + } + ), + + + + + ); + })); + }, + child: Container( + width: 76.w, + height: 76.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(76.w)), + gradient: LinearGradient( + // 144° ≈ 从左上角稍偏右下方向 + begin: Alignment.topLeft, + end: Alignment.bottomRight, + colors: [ + Color.fromRGBO(255, 43, 110, 1), // 起始色 + Color.fromRGBO(255, 52, 26, 1), // 结束色 + ], + ), + ), + child: Center( + child: Image.asset( + "assets/rose_white.png", + width: 28.w, + height: 51.w, + ), + ), + ), + ), + ], + ) + ], + ), + ) + ], + ), + ); + } +} + +class ChatItem extends StatelessWidget { + const ChatItem({super.key}); + + @override + Widget build(BuildContext context) { + return Container( + width: 520.w, + margin: EdgeInsets.only(bottom: 30.w), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Image.asset( + "assets/user_avatar.png", + width: 50.w, + height: 50.w, + ), + SizedBox(width: 21.w,), + SizedBox( + width: 449.w, + child: RichText( + text: TextSpan( + children: [ + TextSpan( + text: "沙发沙发：", + style: TextStyle( + fontSize: 22.w, + color: const Color.fromRGBO(155, 138, 246, 1) + ) + ), + TextSpan( + text: "大家好啊！大家好啊！大家好啊！大家好啊！大家好啊！大家好啊！大家好啊！大家好啊！大家好啊！", + style: TextStyle( + fontSize: 22.w, + color: Colors.white + ) + ) + ] + ), + ), + ) + ], + ), + ); + } +} + +class GiftItem extends StatefulWidget { + final Map item; + final int active; + final int index; + final void Function(int) changeActive; + const GiftItem({super.key, required this.item, required this.active, required this.index, required this.changeActive, }); + + @override + State createState() => _GiftItemState(); +} + +class _GiftItemState extends State { + @override + Widget build(BuildContext context) { + return InkWell( + onTap: (){ + widget.changeActive(widget.index); + }, + child: Container( + width: 167.w, + height: 189.w, + padding: EdgeInsets.only(top: 21.w), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(18.w)), + color: Color.fromRGBO(117, 98, 249, widget.active == widget.index ? .2 : 0), + border: Border.all(width: 1, color: Color.fromRGBO(117, 98, 249, widget.active == widget.index ? 1 : 0)) + ), + child: Column( + children: [ + Image.asset( + widget.item["icon"], + width: 82.w, + height: 82.w, + ), + SizedBox(height: 15.w,), + Text( + widget.item["title"], + style: TextStyle( + fontSize: 22.w, + color: Colors.white + ), + ), + SizedBox(height: 2.w,), + Text( + "${widget.item["price"]}支", + style: TextStyle( + fontSize: 15.w, + color: const Color.fromRGBO(144, 144, 144, 1) + ), + ), + ], + ), + ), + ); + } +} + +class PayItem extends StatefulWidget { + final Map item; + final int active; + final int index; + final void Function(int) changeActive; + const PayItem({super.key, required this.item, required this.active, required this.index, required this.changeActive, }); + + @override + State createState() => _PayItemState(); +} + +class _PayItemState extends State { + @override + Widget build(BuildContext context) { + return InkWell( + onTap: (){ + widget.changeActive(widget.index); + }, + child: Stack( + children: [ + Container( + width: 227.w, + height: 110.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(18.w)), + color: widget.active == widget.index ? const Color.fromRGBO(239, 19, 46, .05) : const Color.fromRGBO(247, 247, 247, 1), + border: widget.active == widget.index ? Border.all(width: 1, color: const Color.fromRGBO(239, 19, 46, 1)) : null + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + RichText( + text: TextSpan( + children: [ + TextSpan( + text: "${widget.item["num"]}", + style: TextStyle( + fontSize: 35.w, + color: const Color.fromRGBO(51, 51, 51, 1), + fontWeight: FontWeight.w700 + ), + ), + TextSpan( + text: "玫瑰", + style: TextStyle( + fontSize: 22.w, + color: const Color.fromRGBO(51, 51, 51, 1), + fontWeight: FontWeight.w500 + ), + ) + ] + ), + ), + Text( + "${widget.item["price"]}元", + style: TextStyle( + fontSize: 22.w, + color: const Color.fromRGBO(144, 144, 144, 144), + fontWeight: FontWeight.w500 + ), + ) + ], + ), + ), + if(widget.item["hasTag"]) Positioned( + top: 0, + left: 0, + child: Container( + width: 107.w, + height: 23.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.only( + topLeft: Radius.circular(18.w), + bottomRight: Radius.circular(18.w), + ), + color: widget.active == widget.index ? null :const Color.fromRGBO(238, 24, 50, .1), + gradient: widget.active == widget.index ? LinearGradient( + begin: Alignment.centerLeft, // 对应 0% + end: Alignment.centerRight, // 对应 100% + colors: [ + Color.fromRGBO(238, 24, 50, 1), // #EE1832 深红 + Color.fromRGBO(250, 101, 64, 1), // #FA6540 橙红 + Color.fromRGBO(255, 131, 69, 1), // #FF8345 浅橙 + ], + stops: [0.0, 0.7216, 1.0], // 对应 CSS 中的百分比位置 + ) : null, + ), + child: Center( + child: Text( + "送新人大礼包", + style: TextStyle( + fontSize: 12.w, + color: widget.active == widget.index ? Colors.white : const Color.fromRGBO(237, 23, 50, 1), + fontWeight: FontWeight.w500 + ), + ), + ), + ), + ), + if(widget.active == widget.index) Positioned( + right: 0, + bottom: 0, + child: Container( + width: 35.w, + height: 26.w, + decoration: BoxDecoration( + borderRadius: BorderRadius.only( + topLeft: Radius.circular(18.w), + bottomRight: Radius.circular(18.w), + ), + color: const Color.fromRGBO(239, 19, 46, 1) + ), + child: Center( + child: Image.asset( + "assets/check.png", + width: 13.w, + height: 9.w, + ), + ), + ), + ) + ], + ), + ); + } +} + diff --git a/lib/router/app_router.dart b/lib/router/app_router.dart index abb6ebf..169ea23 100644 --- a/lib/router/app_router.dart +++ b/lib/router/app_router.dart @@ -1,5 +1,6 @@ import 'package:dating_touchme_app/pages/complete_info.dart'; import 'package:dating_touchme_app/pages/home_page.dart'; +import 'package:dating_touchme_app/pages/live_room_page.dart'; import 'package:dating_touchme_app/pages/login_page.dart'; import 'package:dating_touchme_app/pages/open_webview.dart'; import 'package:dating_touchme_app/pages/test_page.dart'; @@ -58,6 +59,14 @@ class AppRouter { return UserInfoPage(id: id,); }, ), + GoRoute( + name: RouteNames.liveRoom, + path: RoutePaths.liveRoom, + builder: (context, state) { + final id = int.parse(state.uri.queryParameters['id'] ?? '0'); + return LiveRoomPage(id: id,); + }, + ), GoRoute( name: RouteNames.test, path: RoutePaths.test, diff --git a/lib/router/route_paths.dart b/lib/router/route_paths.dart index 8c62fac..6e2cd69 100644 --- a/lib/router/route_paths.dart +++ b/lib/router/route_paths.dart @@ -5,6 +5,7 @@ class RouteNames { static const webview = 'webview'; static const completeInfo = 'completeInfo'; static const userInfo = 'userInfo'; + static const liveRoom = 'liveRoom'; static const test = 'test'; } @@ -14,5 +15,6 @@ class RoutePaths { static const webview = '/webview'; static const completeInfo = '/completeInfo'; static const userInfo = '/userInfo'; + static const liveRoom = '/liveRoom'; static const test = '/test'; }