个人信息管理是艺考学习应用中的基础功能，它允许用户管理自己的基本资料和学习信息。今天我们将详细介绍如何构建一个功能完善的个人信息页面，包含资料编辑、头像上传、信息验证等功能。

个人信息架构

个人信息页面采用StatefulWidget设计，需要管理用户的基本信息、学习信息、头像等数据。页面提供编辑和查看两种模式，满足不同的使用需求。

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(),
          ],
        ),
      ),
    );
  }
}

个人资料头部

个人资料头部使用渐变背景设计，展示用户头像、基本信息和会员状态。这个区域是用户最直观的个人信息展示区域。

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');
          },
        ),
      ],
    ),
  );
}

学习统计卡片

学习统计卡片展示用户的学习统计数据，包括学习天数、完成题目、平均分数和连续天数等。这些数据能够帮助用户快速了解自己的学习状况。

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],
        ),
      ),
    ],
  );
}

功能菜单列表

功能菜单列表提供个人信息管理相关的功能入口，包括个人信息、学习报告、我的成就、收藏夹、学习记录和设置等。

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(),
    ),
  );
}

更多选项列表

更多选项列表提供其他相关功能入口，包括帮助中心、意见反馈、关于我们和退出登录等。

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显示确认对话框，确保用户明确操作后果。

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('确定'),
          ),
        ],
      );
    },
  );
}

个人信息编辑页面

个人信息编辑页面提供详细的表单，允许用户编辑姓名、性别、出生日期、年级、学校、专业、联系方式等信息。

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(),
            ],
          ),
        ),
      ),
    );
  }
}

头像上传区域

头像上传区域显示用户当前头像，并提供拍照和从相册选择的功能。用户可以轻松更换个人头像。

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],
          ),
        ),
      ],
    ),
  );
}

基本信息表单

基本信息表单包含姓名、性别、出生日期等基本个人信息。使用表单验证确保数据的完整性和正确性。

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')}',
                  ),
                ),
              ),
            ),
          ],
        ),
      ],
    ),
  );
}

学业信息表单

学业信息表单包含年级、学校、专业等学习相关信息。这些信息有助于系统为用户提供个性化的学习内容。

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(),
          ),
        ),
      ],
    ),
  );
}

联系信息表单

联系信息表单包含手机号和邮箱等联系方式。这些信息用于账户验证和重要通知的发送。

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让用户选择出生日期。我们设置合理的日期范围，确保用户选择有效的出生日期。

void _selectDate() {
  showDatePicker(
    context: context,
    initialDate: selectedDate,
    firstDate: DateTime(1990),
    lastDate: DateTime.now(),
  ).then((date) {
    if (date != null) {
      setState(() {
        selectedDate = date;
      });
    }
  });
}

头像更换功能

头像更换功能使用ModalBottomSheet提供拍照和从相册选择两个选项。用户可以根据需要选择合适的图片来源。

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('相册功能开发中...')),
                );
              },
            ),
          ],
        ),
      );
    },
  );
}

数据保存功能

数据保存功能使用表单验证确保数据完整性，然后保存用户信息。保存成功后显示成功提示并返回上一页面。

void _saveProfile() {
  if (_formKey.currentState!.validate()) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('个人信息已保存')),
    );
    Navigator.pop(context);a
  }
}a

数据验证规则

数据验证规则确保用户输入的信息符合要求。包括姓名不能为空、邮箱格式正确、手机号格式正确等验证规则。

响应式设计

个人信息页面采用响应式设计，能够适配不同屏幕尺寸。我们使用flutter_screenutil插件确保在不同设备上都有良好的显示效果。

性能优化

个人信息页面使用多个表单组件，需要注意性能优化。我们使用const构造函数减少不必要的重建，合理控制表单的复杂度。

数据持久化

个人信息数据需要持久化存储，确保用户信息不会丢失。我们可以使用SharedPreferences或数据库来存储用户信息。

隐私保护

个人信息处理需要严格遵守隐私保护法规，确保用户数据的安全性和保密性。在数据传输和存储过程中应该进行加密处理。

通过以上实现，我们创建了一个功能完善、用户友好的个人信息管理页面。这个页面不仅能够帮助用户管理个人资料，还提供了丰富的表单验证和头像上传功能，为用户的学习应用提供了完善的个人中心支持。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net