个人信息管理是艺考学习应用中的基础功能，它允许用户管理自己的基本资料和学习信息。今天我们将详细介绍如何构建一个功能完善的个人信息页面，包含资料编辑、头像上传、信息验证等功能。
个人信息架构
个人信息页面采用StatefulWidget设计，需要管理用户的基本信息、学习信息、头像等数据。页面提供编辑和查看两种模式，满足不同的使用需求。
dart
class ProfilePage extends StatefulWidget {
const ProfilePage({Key? key}) : super(key: key);
@override
State<ProfilePage> createState() => _ProfilePageState();
}
class _ProfilePageState extends State<ProfilePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('个人中心'),
backgroundColor: Colors.indigo,
),
body: SingleChildScrollView(
padding: EdgeInsets.all(16.w),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildProfileHeader(),
SizedBox(height: 24.h),
_buildStudyStats(),
SizedBox(height: 24.h),
_buildMenuItems(),
SizedBox(height: 24.h),
_buildMoreOptions(),
],
),
),
);
}
}个人资料头部
个人资料头部使用渐变背景设计，展示用户头像、基本信息和会员状态。这个区域是用户最直观的个人信息展示区域。
dart
Widget _buildProfileHeader() {
return Container(
padding: EdgeInsets.all(20.w),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.indigo[400]!, Colors.indigo[600]!],
),
borderRadius: BorderRadius.circular(16.r),
),
child: Row(
children: [
CircleAvatar(
radius: 40.r,
backgroundColor: Colors.white,
child: Icon(
Icons.person,
size: 40.w,
color: Colors.indigo,
),
),
SizedBox(width: 16.w),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'艺术考生',
style: TextStyle(
fontSize: 20.sp,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(height: 4.h),
Text(
'ID: 2024001',
style: TextStyle(
fontSize: 14.sp,
color: Colors.white70,
),
),
SizedBox(height: 8.h),
Container(
padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 4.h),
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(12.r),
),
child: Text(
'VIP会员',
style: TextStyle(
fontSize: 12.sp,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
IconButton(
icon: const Icon(Icons.edit, color: Colors.white),
onPressed: () {
Navigator.pushNamed(context, '/edit_profile');
},
),
],
),
);
}学习统计卡片
学习统计卡片展示用户的学习统计数据，包括学习天数、完成题目、平均分数和连续天数等。这些数据能够帮助用户快速了解自己的学习状况。
dart
Widget _buildStudyStats() {
return Container(
padding: EdgeInsets.all(16.w),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.r),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.1),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_buildStatItem('学习天数', '45', Colors.blue),
_buildStatItem('完成题目', '1,234', Colors.green),
_buildStatItem('平均分数', '85.6', Colors.orange),
_buildStatItem('连续天数', '15', Colors.red),
],
),
);
}
Widget _buildStatItem(String label, String value, Color color) {
return Column(
children: [
Text(
value,
style: TextStyle(
fontSize: 20.sp,
fontWeight: FontWeight.bold,
color: color,
),
),
SizedBox(height: 4.h),
Text(
label,
style: TextStyle(
fontSize: 12.sp,
color: Colors.grey[600],
),
),
],
);
}功能菜单列表
功能菜单列表提供个人信息管理相关的功能入口，包括个人信息、学习报告、我的成就、收藏夹、学习记录和设置等。
dart
Widget _buildMenuItems() {
final menuItems = [
{'icon': Icons.person, 'title': '个人信息', 'route': '/edit_profile'},
{'icon': Icons.assessment, 'title': '学习报告', 'route': '/learning_report'},
{'icon': Icons.emoji_events, 'title': '我的成就', 'route': '/achievements'},
{'icon': Icons.bookmark, 'title': '我的收藏', 'route': '/favorites'},
{'icon': Icons.history, 'title': '学习记录', 'route': '/study_history'},
{'icon': Icons.settings, 'title': '设置', 'route': '/settings'},
];
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.r),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.1),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: Column(
children: menuItems.map((item) {
return ListTile(
leading: Icon(
item['icon'] as IconData,
color: Colors.indigo,
),
title: Text(
item['title'] as String,
style: TextStyle(fontSize: 16.sp),
),
trailing: const Icon(Icons.arrow_forward_ios),
onTap: () {
Navigator.pushNamed(context, item['route'] as String);
},
);
}).toList(),
),
);
}更多选项列表
更多选项列表提供其他相关功能入口，包括帮助中心、意见反馈、关于我们和退出登录等。
dart
Widget _buildMoreOptions() {
final moreOptions = [
{'icon': Icons.help, 'title': '帮助中心', 'route': '/help'},
{'icon': Icons.feedback, 'title': '意见反馈', 'route': '/feedback'},
{'icon': Icons.info, 'title': '关于我们', 'route': '/about'},
{'icon': Icons.logout, 'title': '退出登录', 'route': '/logout'},
];
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.r),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.1),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: Column(
children: moreOptions.map((item) {
final isLogout = item['title'] == '退出登录';
return ListTile(
leading: Icon(
item['icon'] as IconData,
color: isLogout ? Colors.red : Colors.grey,
),
title: Text(
item['title'] as String,
style: TextStyle(
fontSize: 16.sp,
color: isLogout ? Colors.red : Colors.black,
),
),
trailing: const Icon(Icons.arrow_forward_ios),
onTap: () {
if (isLogout) {
_showLogoutDialog();
} else {
Navigator.pushNamed(context, item['route'] as String);
}
},
);
}).toList(),
),
);
}退出登录确认
退出登录功能需要用户确认，避免误操作。我们使用AlertDialog显示确认对话框，确保用户明确操作后果。
dart
void _showLogoutDialog() {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('退出登录'),
content: const Text('确定要退出登录吗？'),
actions: [
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('取消'),
),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('已退出登录')),
);
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
),
child: const Text('确定'),
),
],
);
},
);
}个人信息编辑页面
个人信息编辑页面提供详细的表单，允许用户编辑姓名、性别、出生日期、年级、学校、专业、联系方式等信息。
dart
class EditProfilePage extends StatefulWidget {
const EditProfilePage({Key? key}) : super(key: key);
@override
State<EditProfilePage> createState() => _EditProfilePageState();
}
class _EditProfilePageState extends State<EditProfilePage> {
final _formKey = GlobalKey<FormState>();
final _nameController = TextEditingController(text: '艺术考生');
final _emailController = TextEditingController(text: 'art@example.com');
final _phoneController = TextEditingController(text: '138****8888');
final _schoolController = TextEditingController(text: '艺术学校');
final _majorController = TextEditingController(text: '美术专业');
String selectedGrade = '高三';
String selectedGender = '男';
DateTime selectedDate = DateTime(2005, 5, 15);
final List<String> grades = ['高一', '高二', '高三', '复读'];
final List<String> genders = ['男', '女'];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('个人信息'),
backgroundColor: Colors.indigo,
actions: [
TextButton(
onPressed: _saveProfile,
child: const Text(
'保存',
style: TextStyle(color: Colors.white),
),
),
],
),
body: SingleChildScrollView(
padding: EdgeInsets.all(16.w),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildAvatarSection(),
SizedBox(height: 24.h),
_buildBasicInfo(),
SizedBox(height: 24.h),
_buildAcademicInfo(),
SizedBox(height: 24.h),
_buildContactInfo(),
],
),
),
),
);
}
}头像上传区域
头像上传区域显示用户当前头像，并提供拍照和从相册选择的功能。用户可以轻松更换个人头像。
dart
Widget _buildAvatarSection() {
return Center(
child: Column(
children: [
GestureDetector(
onTap: _changeAvatar,
child: Stack(
children: [
CircleAvatar(
radius: 50.r,
backgroundColor: Colors.indigo[100],
child: Icon(
Icons.person,
size: 50.w,
color: Colors.indigo,
),
),
Positioned(
bottom: 0,
right: 0,
child: Container(
width: 30.w,
height: 30.w,
decoration: BoxDecoration(
color: Colors.indigo,
borderRadius: BorderRadius.circular(15.r),
),
child: Icon(
Icons.camera_alt,
color: Colors.white,
size: 16.w,
),
),
),
],
),
),
SizedBox(height: 8.h),
Text(
'点击更换头像',
style: TextStyle(
fontSize: 14.sp,
color: Colors.grey[600],
),
),
],
),
);
}基本信息表单
基本信息表单包含姓名、性别、出生日期等基本个人信息。使用表单验证确保数据的完整性和正确性。
dart
Widget _buildBasicInfo() {
return Container(
padding: EdgeInsets.all(16.w),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.r),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.1),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'基本信息',
style: TextStyle(
fontSize: 18.sp,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 16.h),
TextFormField(
controller: _nameController,
decoration: const InputDecoration(
labelText: '姓名',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || value.isEmpty) {
return '请输入姓名';
}
return null;
},
),
SizedBox(height: 16.h),
Row(
children: [
Expanded(
child: DropdownButtonFormField<String>(
value: selectedGender,
decoration: const InputDecoration(
labelText: '性别',
border: OutlineInputBorder(),
),
items: genders.map((gender) {
return DropdownMenuItem(
value: gender,
child: Text(gender),
);
}).toList(),
onChanged: (value) {
setState(() {
selectedGender = value!;
});
},
),
),
SizedBox(width: 16.w),
Expanded(
child: GestureDetector(
onTap: _selectDate,
child: InputDecorator(
decoration: const InputDecoration(
labelText: '出生日期',
border: OutlineInputBorder(),
),
child: Text(
'${selectedDate.year}-${selectedDate.month.toString().padLeft(2, '0')}-${selectedDate.day.toString().padLeft(2, '0')}',
),
),
),
),
],
),
],
),
);
}学业信息表单
学业信息表单包含年级、学校、专业等学习相关信息。这些信息有助于系统为用户提供个性化的学习内容。
dart
Widget _buildAcademicInfo() {
return Container(
padding: EdgeInsets.all(16.w),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.r),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.1),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'学业信息',
style: TextStyle(
fontSize: 18.sp,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 16.h),
DropdownButtonFormField<String>(
value: selectedGrade,
decoration: const InputDecoration(
labelText: '年级',
border: OutlineInputBorder(),
),
items: grades.map((grade) {
return DropdownMenuItem(
value: grade,
child: Text(grade),
);
}).toList(),
onChanged: (value) {
setState(() {
selectedGrade = value!;
});
},
),
SizedBox(height: 16.h),
TextFormField(
controller: _schoolController,
decoration: const InputDecoration(
labelText: '学校',
border: OutlineInputBorder(),
),
),
SizedBox(height: 16.h),
TextFormField(
controller: _majorController,
decoration: const InputDecoration(
labelText: '专业',
border: OutlineInputBorder(),
),
),
],
),
);
}联系信息表单
联系信息表单包含手机号和邮箱等联系方式。这些信息用于账户验证和重要通知的发送。
dart
Widget _buildContactInfo() {
return Container(
padding: EdgeInsets.all(16.w),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.r),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.1),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'联系方式',
style: TextStyle(
fontSize: 18.sp,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 16.h),
TextFormField(
controller: _phoneController,
decoration: const InputDecoration(
labelText: '手机号',
border: OutlineInputBorder(),
),
keyboardType: TextInputType.phone,
),
SizedBox(height: 16.h),
TextFormField(
controller: _emailController,
decoration: const InputDecoration(
labelText: '邮箱',
border: OutlineInputBorder(),
),
keyboardType: TextInputType.emailAddress,
),
],
),
);
}日期选择功能
日期选择功能使用showDatePicker让用户选择出生日期。我们设置合理的日期范围，确保用户选择有效的出生日期。
dart
void _selectDate() {
showDatePicker(
context: context,
initialDate: selectedDate,
firstDate: DateTime(1990),
lastDate: DateTime.now(),
).then((date) {
if (date != null) {
setState(() {
selectedDate = date;
});
}
});
}头像更换功能
头像更换功能使用ModalBottomSheet提供拍照和从相册选择两个选项。用户可以根据需要选择合适的图片来源。
dart
void _changeAvatar() {
showModalBottomSheet(
context: context,
builder: (context) {
return Container(
padding: EdgeInsets.all(20.w),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'更换头像',
style: TextStyle(
fontSize: 18.sp,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 20.h),
ListTile(
leading: const Icon(Icons.camera_alt),
title: const Text('拍照'),
onTap: () {
Navigator.pop(context);
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('拍照功能开发中...')),
);
},
),
ListTile(
leading: const Icon(Icons.photo_library),
title: const Text('从相册选择'),
onTap: () {
Navigator.pop(context);
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('相册功能开发中...')),
);
},
),
],
),
);
},
);
}数据保存功能
数据保存功能使用表单验证确保数据完整性，然后保存用户信息。保存成功后显示成功提示并返回上一页面。
dart
void _saveProfile() {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('个人信息已保存')),
);
Navigator.pop(context);
}
}数据验证规则
数据验证规则确保用户输入的信息符合要求。包括姓名不能为空、邮箱格式正确、手机号格式正确等验证规则。
响应式设计
个人信息页面采用响应式设计，能够适配不同屏幕尺寸。我们使用flutter_screenutil插件确保在不同设备上都有良好的显示效果。
性能优化
个人信息页面使用多个表单组件，需要注意性能优化。我们使用const构造函数减少不必要的重建，合理控制表单的复杂度。
数据持久化
个人信息数据需要持久化存储，确保用户信息不会丢失。我们可以使用SharedPreferences或数据库来存储用户信息。
隐私保护
个人信息处理需要严格遵守隐私保护法规，确保用户数据的安全性和保密性。在数据传输和存储过程中应该进行加密处理。
通过以上实现，我们创建了一个功能完善、用户友好的个人信息管理页面。这个页面不仅能够帮助用户管理个人资料，还提供了丰富的表单验证和头像上传功能，为用户的学习应用提供了完善的个人中心支持。
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net