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.
416 lines
17 KiB
416 lines
17 KiB
import 'package:dating_touchme_app/components/page_appbar.dart';
|
|
import 'package:dating_touchme_app/extension/ex_widget.dart';
|
|
import 'package:dating_touchme_app/generated/assets.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
|
|
class FeedbackPage extends StatefulWidget {
|
|
const FeedbackPage({super.key});
|
|
|
|
@override
|
|
State<FeedbackPage> createState() => _FeedbackPageState();
|
|
}
|
|
|
|
class _FeedbackPageState extends State<FeedbackPage> {
|
|
|
|
String message = '';
|
|
final TextEditingController _messageController = TextEditingController();
|
|
String phone = '';
|
|
final TextEditingController _phoneController = TextEditingController();
|
|
|
|
List<String> tagList = ["举报投诉", "账号与个人信息", "现有功能建议", "新功能或玩法建议"];
|
|
|
|
int active = 0;
|
|
|
|
changeActive(int i){
|
|
active = i;
|
|
setState(() {
|
|
|
|
});
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Stack(
|
|
children: [
|
|
Container(
|
|
width: 375.w,
|
|
height: 812.h,
|
|
color: Colors.white,
|
|
),
|
|
Positioned(
|
|
top: -320.w,
|
|
left: -270.w,
|
|
child: Image.asset(
|
|
Assets.imagesFeedbackBg,
|
|
width: 971.75.w,
|
|
height: 781.25.w,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 53.w,
|
|
left: 207.w,
|
|
child: Image.asset(
|
|
Assets.imagesFeedbackIcon,
|
|
width: 140.w,
|
|
height: 140.w,
|
|
),
|
|
),
|
|
Scaffold(
|
|
appBar: PageAppbar(title: "", backgroundColor: Colors.transparent,),
|
|
backgroundColor: Colors.transparent,
|
|
body: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Container(
|
|
padding: EdgeInsets.symmetric(
|
|
vertical: 22.w,
|
|
horizontal: 14.w
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
"意见反馈",
|
|
style: TextStyle(
|
|
fontSize: 21.w,
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
),
|
|
SizedBox(height: 5.w,),
|
|
Text(
|
|
"Hi,给出你的小建议吧~",
|
|
style: TextStyle(
|
|
fontSize: 13.w,
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Expanded(
|
|
child: Container(
|
|
width: 375.w,
|
|
padding: EdgeInsets.symmetric(
|
|
vertical: 11.w,
|
|
horizontal: 14.w
|
|
),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.vertical(top: Radius.circular(9.w)),
|
|
color: Colors.white
|
|
),
|
|
child: SingleChildScrollView(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
RichText(
|
|
text: TextSpan(
|
|
style: TextStyle(
|
|
fontSize: 16.w,
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
children: [
|
|
TextSpan(
|
|
text: "选择问题的类型",
|
|
style: TextStyle(
|
|
color: const Color.fromRGBO(51, 51, 51, 1)
|
|
)
|
|
),
|
|
TextSpan(
|
|
text: "*",
|
|
style: TextStyle(
|
|
color: const Color.fromRGBO(248, 85, 66, 1)
|
|
)
|
|
)
|
|
]
|
|
),
|
|
),
|
|
SizedBox(height: 11.w,),
|
|
Wrap(
|
|
alignment: WrapAlignment.spaceBetween,
|
|
spacing: 10.w,
|
|
runSpacing: 10.w,
|
|
children: [
|
|
...tagList.asMap().entries.map((entry){
|
|
return TagItem(title: entry.value, index: entry.key, active: active, changeActive: changeActive,);
|
|
}),
|
|
],
|
|
),
|
|
SizedBox(height: 20.w,),
|
|
RichText(
|
|
text: TextSpan(
|
|
style: TextStyle(
|
|
fontSize: 16.w,
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
children: [
|
|
TextSpan(
|
|
text: "问题描述",
|
|
style: TextStyle(
|
|
color: const Color.fromRGBO(51, 51, 51, 1)
|
|
)
|
|
),
|
|
TextSpan(
|
|
text: "*",
|
|
style: TextStyle(
|
|
color: const Color.fromRGBO(248, 85, 66, 1)
|
|
)
|
|
)
|
|
]
|
|
),
|
|
),
|
|
SizedBox(height: 11.w,),
|
|
Container(
|
|
padding: EdgeInsets.all(14.w),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(8.w)),
|
|
color: const Color.fromRGBO(245, 245, 245, 1)
|
|
),
|
|
child: TextField(
|
|
controller: _messageController,
|
|
maxLength: 500, // 上限
|
|
minLines: 5, // 多行
|
|
maxLines: 5, // 自适应高度
|
|
style: TextStyle(
|
|
fontSize: ScreenUtil().setWidth(13),
|
|
height: 1
|
|
),
|
|
decoration: InputDecoration(
|
|
contentPadding: EdgeInsets.symmetric(
|
|
vertical: 0,
|
|
horizontal: 0
|
|
),
|
|
hintText: "请输入交友心声",
|
|
|
|
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(height: 10.w,),
|
|
Wrap(
|
|
alignment: WrapAlignment.spaceBetween,
|
|
spacing: 10.w,
|
|
runSpacing: 10.w,
|
|
children: [
|
|
Container(
|
|
width: 70.w,
|
|
height: 70.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(9.w)),
|
|
border: Border.all(width: 1, color: const Color.fromRGBO(224, 224, 224, 1))
|
|
),
|
|
),
|
|
Container(
|
|
width: 70.w,
|
|
height: 70.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(9.w)),
|
|
border: Border.all(width: 1, color: const Color.fromRGBO(224, 224, 224, 1))
|
|
),
|
|
),
|
|
Container(
|
|
width: 70.w,
|
|
height: 70.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(9.w)),
|
|
border: Border.all(width: 1, color: const Color.fromRGBO(224, 224, 224, 1))
|
|
),
|
|
),
|
|
Container(
|
|
width: 70.w,
|
|
height: 70.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(9.w)),
|
|
border: Border.all(width: 1, color: const Color.fromRGBO(224, 224, 224, 1))
|
|
),
|
|
),
|
|
],
|
|
),
|
|
SizedBox(height: 10.w,),
|
|
Text(
|
|
"上传问题截图可以让问题快速解决！",
|
|
style: TextStyle(
|
|
fontSize: 11.w,
|
|
color: const Color.fromRGBO(189, 189, 189, 1)
|
|
),
|
|
),
|
|
SizedBox(height: 20.w,),
|
|
RichText(
|
|
text: TextSpan(
|
|
style: TextStyle(
|
|
fontSize: 16.w,
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
children: [
|
|
TextSpan(
|
|
text: "联系方式",
|
|
style: TextStyle(
|
|
color: const Color.fromRGBO(51, 51, 51, 1)
|
|
)
|
|
),
|
|
]
|
|
),
|
|
),
|
|
Container(
|
|
padding: EdgeInsets.symmetric(horizontal: 13.w),
|
|
margin: EdgeInsets.only(top: 7.w),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(8.w)),
|
|
color: const Color.fromRGBO(245, 245, 245, 1)
|
|
),
|
|
child: TextField(
|
|
controller: _phoneController,
|
|
keyboardType: TextInputType.number,
|
|
style: TextStyle(
|
|
fontSize: ScreenUtil().setWidth(14),
|
|
height: 1
|
|
),
|
|
decoration: InputDecoration(
|
|
hintText: "留下手机号、QQ、邮箱，以便我们回复您",
|
|
contentPadding: EdgeInsets.symmetric(
|
|
vertical: 0,
|
|
horizontal: 0
|
|
),
|
|
|
|
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){
|
|
phone = value;
|
|
setState(() {
|
|
|
|
});
|
|
},
|
|
),
|
|
),
|
|
Container(
|
|
margin: EdgeInsets.symmetric(vertical: 30.w),
|
|
child: Container(
|
|
width: 350.w,
|
|
height: 45.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(45.w)),
|
|
gradient: LinearGradient(
|
|
begin: Alignment.centerLeft, // 90deg: 从左到右
|
|
end: Alignment.centerRight,
|
|
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], // 对应 0%、77.53%、100%
|
|
),
|
|
),
|
|
child: Center(
|
|
child: Text(
|
|
"确认",
|
|
style: TextStyle(
|
|
fontSize: 18.w,
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
),
|
|
),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
)
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
class TagItem extends StatefulWidget {
|
|
final String title;
|
|
final int index;
|
|
final int active;
|
|
final void Function(int) changeActive;
|
|
const TagItem({super.key, required this.title, required this.index, required this.active, required this.changeActive});
|
|
|
|
@override
|
|
State<TagItem> createState() => _TagItemState();
|
|
}
|
|
|
|
class _TagItemState extends State<TagItem> {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Stack(
|
|
children: [
|
|
Container(
|
|
padding: EdgeInsets.symmetric(
|
|
vertical: 9.w,
|
|
horizontal: 14.w
|
|
),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(8.w)),
|
|
border: Border.all(width: 1, color: widget.index == widget.active ? const Color.fromRGBO(117, 98, 249, 1) : const Color.fromRGBO(207, 207, 207, 1)),
|
|
color: widget.index == widget.active ? const Color.fromRGBO(194, 195, 255, 0.2) : Colors.transparent
|
|
),
|
|
child: Text(
|
|
widget.title,
|
|
style: TextStyle(
|
|
fontSize: 13.w
|
|
),
|
|
),
|
|
).onTap((){
|
|
widget.changeActive(widget.index);
|
|
}),
|
|
if(widget.active == widget.index)Positioned(
|
|
bottom: 0,
|
|
right: 0,
|
|
child: Container(
|
|
width: 17.w,
|
|
height: 13.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(8.w),
|
|
bottomRight: Radius.circular(8.w)
|
|
),
|
|
color: const Color.fromRGBO(117, 98, 249, 1)
|
|
),
|
|
child: Center(
|
|
child: Image.asset(
|
|
Assets.imagesCheck,
|
|
width: 6.w,
|
|
),
|
|
),
|
|
),
|
|
)
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|