7 changed files with 402 additions and 2 deletions
Unified View
Diff Options
-
BINassets/images/avatars_example.png
-
BINassets/images/bg_edit_avatars.png
-
BINassets/images/bg_information.png
-
BINassets/images/edit_avatars_icon.png
-
5lib/generated/assets.dart
-
6lib/pages/mine/login_controller.dart
-
393lib/pages/mine/user_info_page.dart
@ -0,0 +1,393 @@ |
|||||
|
import 'package:flutter/material.dart'; |
||||
|
import 'package:dating_touchme_app/generated/assets.dart'; |
||||
|
|
||||
|
class UserInfoPage extends StatefulWidget { |
||||
|
const UserInfoPage({Key? key}) : super(key: key); |
||||
|
|
||||
|
@override |
||||
|
State<UserInfoPage> createState() => _UserInfoPageState(); |
||||
|
} |
||||
|
|
||||
|
class _UserInfoPageState extends State<UserInfoPage> { |
||||
|
String _gender = 'male'; // 默认选择男性 |
||||
|
String _nickname = '强壮的瘦子'; |
||||
|
String _birthday = ''; |
||||
|
String _education = ''; |
||||
|
String _invitationCode = ''; |
||||
|
|
||||
|
@override |
||||
|
Widget build(BuildContext context) { |
||||
|
return Scaffold( |
||||
|
body: Stack( |
||||
|
children: [ |
||||
|
// 背景图 |
||||
|
Positioned.fill( |
||||
|
child: Image.asset( |
||||
|
Assets.imagesBgInformation, |
||||
|
fit: BoxFit.cover, |
||||
|
), |
||||
|
), |
||||
|
// 内容区域 |
||||
|
SafeArea( |
||||
|
child: SingleChildScrollView( |
||||
|
padding: const EdgeInsets.symmetric(horizontal: 20.0), |
||||
|
child: Column( |
||||
|
children: [ |
||||
|
// 标题 |
||||
|
const SizedBox(height: 20), |
||||
|
Text( |
||||
|
'完善信息', |
||||
|
style: TextStyle( |
||||
|
fontSize: 24, |
||||
|
fontWeight: FontWeight.bold, |
||||
|
color: Color.fromRGBO(51, 51, 51, 1), |
||||
|
), |
||||
|
), |
||||
|
const SizedBox(height: 30), |
||||
|
|
||||
|
// 头像 |
||||
|
Stack( |
||||
|
children: [ |
||||
|
Container( |
||||
|
width: 85, |
||||
|
height: 85, |
||||
|
decoration: const BoxDecoration( |
||||
|
shape: BoxShape.circle, |
||||
|
color: Colors.grey, |
||||
|
), |
||||
|
child: ClipOval( |
||||
|
// 这里可以替换为实际的头像图片 |
||||
|
child: Image.asset( |
||||
|
Assets.imagesAvatarsExample, |
||||
|
fit: BoxFit.cover, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
Positioned( |
||||
|
bottom: 0, |
||||
|
right: 0, |
||||
|
child: Container( |
||||
|
width: 30, |
||||
|
height: 30, |
||||
|
decoration: const BoxDecoration( |
||||
|
shape: BoxShape.circle, |
||||
|
color: Colors.blue, |
||||
|
), |
||||
|
child: Image.asset( |
||||
|
Assets.imagesBgEditAvatars, |
||||
|
width: 16, |
||||
|
height: 16, |
||||
|
color: Colors.white, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
const SizedBox(height: 30), |
||||
|
|
||||
|
// 性别选择 |
||||
|
const Align( |
||||
|
alignment: Alignment.centerLeft, |
||||
|
child: Text( |
||||
|
'性别 (注册后不可修改)', |
||||
|
style: TextStyle( |
||||
|
fontSize: 16, |
||||
|
color: Color.fromRGBO(144, 144, 144, 1), |
||||
|
fontWeight: FontWeight.w500, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
const SizedBox(height: 10), |
||||
|
Row( |
||||
|
children: [ |
||||
|
GestureDetector( |
||||
|
onTap: () { |
||||
|
setState(() { |
||||
|
_gender = 'male'; |
||||
|
}); |
||||
|
}, |
||||
|
child: Container( |
||||
|
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10), |
||||
|
decoration: BoxDecoration( |
||||
|
borderRadius: BorderRadius.circular(20), |
||||
|
color: _gender == 'male' ? Colors.black : Colors.grey[200], |
||||
|
), |
||||
|
child: Row( |
||||
|
children: [ |
||||
|
Image.asset( |
||||
|
Assets.imagesManIcon, |
||||
|
width: 20, |
||||
|
height: 20, |
||||
|
color: _gender == 'male' ? Colors.white : Colors.black, |
||||
|
), |
||||
|
const SizedBox(width: 5), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
const SizedBox(width: 20), |
||||
|
GestureDetector( |
||||
|
onTap: () { |
||||
|
setState(() { |
||||
|
_gender = 'female'; |
||||
|
}); |
||||
|
}, |
||||
|
child: Container( |
||||
|
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10), |
||||
|
decoration: BoxDecoration( |
||||
|
borderRadius: BorderRadius.circular(20), |
||||
|
color: _gender == 'female' ? Colors.pink : Colors.grey[200], |
||||
|
), |
||||
|
child: Row( |
||||
|
children: [ |
||||
|
Image.asset( |
||||
|
Assets.imagesWomenIcon, |
||||
|
width: 20, |
||||
|
height: 20, |
||||
|
color: _gender == 'female' ? Colors.white : Colors.black, |
||||
|
), |
||||
|
const SizedBox(width: 5), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
const SizedBox(height: 30), |
||||
|
|
||||
|
// 昵称 |
||||
|
const Align( |
||||
|
alignment: Alignment.centerLeft, |
||||
|
child: Text( |
||||
|
'昵称', |
||||
|
style: TextStyle( |
||||
|
fontSize: 16, |
||||
|
color: Colors.black, |
||||
|
fontWeight: FontWeight.w500, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
const SizedBox(height: 10), |
||||
|
Container( |
||||
|
padding: const EdgeInsets.symmetric(horizontal: 16), |
||||
|
decoration: BoxDecoration( |
||||
|
borderRadius: BorderRadius.circular(8), |
||||
|
color: Colors.white, |
||||
|
), |
||||
|
child: Row( |
||||
|
children: [ |
||||
|
Expanded( |
||||
|
child: TextField( |
||||
|
controller: TextEditingController(text: _nickname), |
||||
|
onChanged: (value) { |
||||
|
_nickname = value; |
||||
|
}, |
||||
|
decoration: const InputDecoration( |
||||
|
border: InputBorder.none, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
TextButton( |
||||
|
onPressed: () { |
||||
|
// 随机昵称功能(不需要实现) |
||||
|
}, |
||||
|
child: const Text( |
||||
|
'随机', |
||||
|
style: TextStyle( |
||||
|
color: Colors.grey, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
const SizedBox(height: 30), |
||||
|
|
||||
|
// 出生日期 |
||||
|
const Align( |
||||
|
alignment: Alignment.centerLeft, |
||||
|
child: Text( |
||||
|
'年龄', |
||||
|
style: TextStyle( |
||||
|
fontSize: 16, |
||||
|
color: Colors.black, |
||||
|
fontWeight: FontWeight.w500, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
const SizedBox(height: 10), |
||||
|
GestureDetector( |
||||
|
onTap: () { |
||||
|
// 打开日期选择器 |
||||
|
_selectDate(); |
||||
|
}, |
||||
|
child: Container( |
||||
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14), |
||||
|
decoration: BoxDecoration( |
||||
|
borderRadius: BorderRadius.circular(8), |
||||
|
color: Colors.white, |
||||
|
), |
||||
|
child: Row( |
||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
||||
|
children: [ |
||||
|
Text( |
||||
|
_birthday.isEmpty ? '请选择你的出生日期' : _birthday, |
||||
|
style: TextStyle( |
||||
|
color: _birthday.isEmpty ? Colors.grey : Colors.black, |
||||
|
), |
||||
|
), |
||||
|
const Icon(Icons.arrow_forward_ios, color: Colors.grey), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
const SizedBox(height: 30), |
||||
|
|
||||
|
// 学历 |
||||
|
const Align( |
||||
|
alignment: Alignment.centerLeft, |
||||
|
child: Text( |
||||
|
'学历', |
||||
|
style: TextStyle( |
||||
|
fontSize: 16, |
||||
|
color: Colors.black, |
||||
|
fontWeight: FontWeight.w500, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
const SizedBox(height: 10), |
||||
|
GestureDetector( |
||||
|
onTap: () { |
||||
|
// 打开学历选择器 |
||||
|
_selectEducation(); |
||||
|
}, |
||||
|
child: Container( |
||||
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14), |
||||
|
decoration: BoxDecoration( |
||||
|
borderRadius: BorderRadius.circular(8), |
||||
|
color: Colors.white, |
||||
|
), |
||||
|
child: Row( |
||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
||||
|
children: [ |
||||
|
Text( |
||||
|
_education.isEmpty ? '请选择你的学历' : _education, |
||||
|
style: TextStyle( |
||||
|
color: _education.isEmpty ? Colors.grey : Colors.black, |
||||
|
), |
||||
|
), |
||||
|
const Icon(Icons.arrow_forward_ios, color: Colors.grey), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
const SizedBox(height: 30), |
||||
|
|
||||
|
// 邀请码 |
||||
|
const Align( |
||||
|
alignment: Alignment.centerLeft, |
||||
|
child: Text( |
||||
|
'邀请码 (非必填)', |
||||
|
style: TextStyle( |
||||
|
fontSize: 16, |
||||
|
color: Colors.black, |
||||
|
fontWeight: FontWeight.w500, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
const SizedBox(height: 10), |
||||
|
Container( |
||||
|
padding: const EdgeInsets.symmetric(horizontal: 16), |
||||
|
decoration: BoxDecoration( |
||||
|
borderRadius: BorderRadius.circular(8), |
||||
|
color: Colors.white, |
||||
|
), |
||||
|
child: TextField( |
||||
|
onChanged: (value) { |
||||
|
_invitationCode = value; |
||||
|
}, |
||||
|
decoration: const InputDecoration( |
||||
|
hintText: '请输入邀请码', |
||||
|
hintStyle: TextStyle(color: Colors.grey), |
||||
|
border: InputBorder.none, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
const SizedBox(height: 50), |
||||
|
|
||||
|
// 开始交友按钮 |
||||
|
SizedBox( |
||||
|
width: double.infinity, |
||||
|
height: 50, |
||||
|
child: ElevatedButton( |
||||
|
onPressed: () { |
||||
|
// 提交用户信息 |
||||
|
_submitUserInfo(); |
||||
|
}, |
||||
|
style: ElevatedButton.styleFrom( |
||||
|
backgroundColor: Colors.blue, |
||||
|
shape: RoundedRectangleBorder( |
||||
|
borderRadius: BorderRadius.circular(25), |
||||
|
), |
||||
|
), |
||||
|
child: const Text( |
||||
|
'开始交友', |
||||
|
style: TextStyle( |
||||
|
fontSize: 18, |
||||
|
color: Colors.white, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
const SizedBox(height: 30), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// 选择日期 |
||||
|
void _selectDate() { |
||||
|
// 这里可以实现日期选择逻辑 |
||||
|
// 为了简单起见,我们先设置一个默认日期 |
||||
|
setState(() { |
||||
|
_birthday = '1990-01-01'; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 选择学历 |
||||
|
void _selectEducation() { |
||||
|
// 这里可以实现学历选择逻辑 |
||||
|
// 为了简单起见,我们先设置一个默认学历 |
||||
|
setState(() { |
||||
|
_education = '本科'; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 提交用户信息 |
||||
|
void _submitUserInfo() { |
||||
|
// 这里可以实现提交逻辑 |
||||
|
print('提交用户信息:'); |
||||
|
print('性别: $_gender'); |
||||
|
print('昵称: $_nickname'); |
||||
|
print('生日: $_birthday'); |
||||
|
print('学历: $_education'); |
||||
|
print('邀请码: $_invitationCode'); |
||||
|
|
||||
|
// 可以添加验证逻辑 |
||||
|
if (_birthday.isEmpty || _education.isEmpty) { |
||||
|
ScaffoldMessenger.of(context).showSnackBar( |
||||
|
const SnackBar(content: Text('请完善所有必填信息')), |
||||
|
); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 提交成功后跳转到下一个页面 |
||||
|
ScaffoldMessenger.of(context).showSnackBar( |
||||
|
const SnackBar(content: Text('信息提交成功')), |
||||
|
); |
||||
|
} |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save