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 createState() => _FeedbackPageState(); } class _FeedbackPageState extends State { String message = ''; final TextEditingController _messageController = TextEditingController(); String phone = ''; final TextEditingController _phoneController = TextEditingController(); List 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)) ), child: Center( child: Icon( Icons.add, size: 18.w, 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 createState() => _TagItemState(); } class _TagItemState extends State { @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, ), ), ), ) ], ); } }