You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1956 lines
102 KiB
1956 lines
102 KiB
import 'package:flutter/material.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
import 'package:roundcheckbox/roundcheckbox.dart';
|
|
import 'package:tdesign_flutter/tdesign_flutter.dart';
|
|
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
|
|
|
|
class LiveRoomPage extends StatefulWidget {
|
|
final int id;
|
|
const LiveRoomPage({super.key, required this.id});
|
|
|
|
@override
|
|
State<LiveRoomPage> createState() => _LiveRoomPageState();
|
|
}
|
|
|
|
class _LiveRoomPageState extends State<LiveRoomPage> {
|
|
|
|
|
|
String message = '';
|
|
final TextEditingController _messageController = TextEditingController();
|
|
|
|
final activeGift = ValueNotifier<int?>(null);
|
|
|
|
List<Map> 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},
|
|
];
|
|
|
|
final giftNum = ValueNotifier<int>(1);
|
|
|
|
final activePay = ValueNotifier<int?>(null);
|
|
List<Map> 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<bool>(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<int?>(
|
|
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: Swiper(
|
|
autoplay: false,
|
|
itemCount: 6,
|
|
loop: true,
|
|
pagination: const SwiperPagination(
|
|
alignment: Alignment.bottomCenter,
|
|
builder: TDSwiperDotsPagination(
|
|
color: Color.fromRGBO(144, 144, 144, 1),
|
|
activeColor: Color.fromRGBO(77, 77, 77, 1),
|
|
)),
|
|
itemBuilder: (BuildContext context, int index) {
|
|
return Align(
|
|
alignment: Alignment.topCenter,
|
|
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,
|
|
),
|
|
],
|
|
) ,
|
|
ValueListenableBuilder<int>(
|
|
valueListenable: giftNum,
|
|
builder: (context, num, _) {
|
|
return Row(
|
|
children: [
|
|
// TDStepper(
|
|
// theme: TDStepperTheme.filled,
|
|
// value: giftNum,
|
|
// min: 1,
|
|
// onChange: (e){
|
|
// giftNum = e;
|
|
// },
|
|
// ),
|
|
InkWell(
|
|
onTap: (){
|
|
if(giftNum.value <= 1) return;
|
|
giftNum.value -= 1;
|
|
setState(() {
|
|
|
|
});
|
|
},
|
|
child: Container(
|
|
width: 29.w,
|
|
height: 29.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(29.w)),
|
|
color: Color.fromRGBO(117, 98, 249, giftNum.value <= 1 ? 0 : 1),
|
|
border: Border.all(width: 1, color: Color.fromRGBO(117, 98, 249, 1))
|
|
),
|
|
child: Center(
|
|
child: Text(
|
|
"-",
|
|
style: TextStyle(
|
|
fontSize: 26.w,
|
|
color: giftNum.value <= 1 ? Color.fromRGBO(117, 98, 249, 1) : Colors.white,
|
|
height: 1
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
SizedBox(
|
|
width: 46.w,
|
|
child: Center(
|
|
child: Text(
|
|
"$num",
|
|
style: TextStyle(
|
|
fontSize: 26.w,
|
|
color: Colors.white
|
|
),
|
|
),
|
|
),
|
|
),
|
|
InkWell(
|
|
onTap: (){
|
|
giftNum.value += 1;
|
|
setState(() {
|
|
|
|
});
|
|
},
|
|
child: Container(
|
|
width: 29.w,
|
|
height: 29.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(29.w)),
|
|
color: Color.fromRGBO(117, 98, 249, 1)
|
|
),
|
|
child: Center(
|
|
child: Text(
|
|
"+",
|
|
style: TextStyle(
|
|
fontSize: 26.w,
|
|
color: Colors.white,
|
|
height: 1
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
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<int?>(
|
|
valueListenable: activePay,
|
|
builder: (context, active, _){
|
|
return Material(
|
|
child: Container(
|
|
color: Colors.white,
|
|
height: 881.w,
|
|
padding: EdgeInsets.symmetric(horizontal: 20.w),
|
|
child: ValueListenableBuilder<bool>(
|
|
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<GiftItem> createState() => _GiftItemState();
|
|
}
|
|
|
|
class _GiftItemState extends State<GiftItem> {
|
|
@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<PayItem> createState() => _PayItemState();
|
|
}
|
|
|
|
class _PayItemState extends State<PayItem> {
|
|
@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,
|
|
),
|
|
),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|