Flutter for OpenHarmony 看书管理记录App实战：个人中心实现

个人中心是用户的主页，展示用户信息和各种功能入口。这个页面是"我的"Tab 的主要内容，用户可以从这里进入各种管理页面。

做这个页面的时候，我把功能入口按类别分组，用户可以快速找到想要的功能。顶部是用户信息和阅读统计，下面是功能菜单。

依赖引入

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import '../../app/routes/app_routes.dart';

导入必要的依赖包，app_routes 用于页面跳转。

页面主体结构

class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFDF8F3),
      body: SingleChildScrollView(
        child: Column(
          children: [
            _buildHeader(),
            _buildStatsRow(),
            SizedBox(height: 16.h),
            _buildMenuSection('阅读管理', [
              _buildMenuItem(Icons.menu_book, '我的书籍', () => Get.toNamed(AppRoutes.bookList)),
              _buildMenuItem(Icons.collections_bookmark, '我的书架', () => Get.toNamed(AppRoutes.bookshelf)),
              _buildMenuItem(Icons.edit_note, '读书笔记', () => Get.toNamed(AppRoutes.noteList)),
              _buildMenuItem(Icons.bookmark_add, '想读清单', () => Get.toNamed(AppRoutes.wishlist)),
            ]),

页面没有 AppBar，因为它是 Tab 页面的一部分。内容从头部开始，包括用户信息、统计数据、功能菜单。

更多菜单分组

            SizedBox(height: 12.h),
            _buildMenuSection('数据统计', [
              _buildMenuItem(Icons.bar_chart, '阅读统计', () => Get.toNamed(AppRoutes.statistics)),
              _buildMenuItem(Icons.flag, '阅读目标', () => Get.toNamed(AppRoutes.readingGoal)),
              _buildMenuItem(Icons.history, '阅读记录', () => Get.toNamed(AppRoutes.readingRecord)),
            ]),
            SizedBox(height: 12.h),
            _buildMenuSection('分类管理', [
              _buildMenuItem(Icons.label, '标签管理', () => Get.toNamed(AppRoutes.tagManage)),
              _buildMenuItem(Icons.person, '作者管理', () => Get.toNamed(AppRoutes.authorManage)),
              _buildMenuItem(Icons.business, '出版社管理', () => Get.toNamed(AppRoutes.publisherManage)),
            ]),
            SizedBox(height: 12.h),
            _buildMenuSection('其他', [
              _buildMenuItem(Icons.cloud_upload, '数据备份', () => Get.toNamed(AppRoutes.dataBackup)),
              _buildMenuItem(Icons.settings, '设置', () => Get.toNamed(AppRoutes.settings)),
              _buildMenuItem(Icons.info_outline, '关于我们', () => Get.toNamed(AppRoutes.about)),
            ]),
            SizedBox(height: 30.h),
          ],
        ),
      ),
    );
  }

功能菜单分四组：阅读管理、数据统计、分类管理、其他。

头部用户信息

  Widget _buildHeader() {
    return Container(
      padding: EdgeInsets.only(top: 60.h, bottom: 24.h),
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [Color(0xFF5B4636), Color(0xFF8B7355)],
        ),
      ),
      child: Column(
        children: [
          CircleAvatar(
            radius: 40.r,
            backgroundColor: Colors.white,
            child: Icon(Icons.person, size: 40.sp, color: const Color(0xFF5B4636)),
          ),
          SizedBox(height: 12.h),
          Text('阅读达人', style: TextStyle(
            color: Colors.white,
            fontSize: 20.sp,
            fontWeight: FontWeight.bold,
          )),
          SizedBox(height: 4.h),
          Text('书中自有黄金屋', style: TextStyle(
            color: Colors.white70,
            fontSize: 13.sp,
          )),
        ],
      ),
    );
  }

头部用渐变背景，显示用户头像、昵称、签名。头像用圆形，里面是人物图标。

阅读统计行

  Widget _buildStatsRow() {
    return Container(
      margin: EdgeInsets.all(16.w),
      padding: EdgeInsets.all(16.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16.r),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          _buildStatItem('86', '已读'),
          Container(width: 1, height: 40.h, color: Colors.grey[200]),
          _buildStatItem('12', '在读'),
          Container(width: 1, height: 40.h, color: Colors.grey[200]),
          _buildStatItem('156', '笔记'),
        ],
      ),
    );
  }

统计行显示三个数据：已读书籍数、在读书籍数、笔记数。用竖线分隔。

统计项组件

  Widget _buildStatItem(String value, String label) {
    return Column(
      children: [
        Text(value, style: TextStyle(
          fontSize: 20.sp,
          fontWeight: FontWeight.bold,
          color: const Color(0xFF5B4636),
        )),
        SizedBox(height: 4.h),
        Text(label, style: TextStyle(
          color: Colors.grey[600],
          fontSize: 12.sp,
        )),
      ],
    );
  }

每个统计项是数值在上、标签在下的布局。数值用主题色加粗。

菜单分组组件

  Widget _buildMenuSection(String title, List<Widget> items) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16.r),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.all(16.w),
            child: Text(title, style: TextStyle(
              fontSize: 14.sp,
              fontWeight: FontWeight.bold,
              color: const Color(0xFF3D2914),
            )),
          ),
          ...items,
        ],
      ),
    );
  }

每个菜单分组是一个白色卡片，有标题和菜单项列表。

菜单项组件

  Widget _buildMenuItem(IconData icon, String title, VoidCallback onTap) {
    return InkWell(
      onTap: onTap,
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 14.h),
        child: Row(
          children: [
            Icon(icon, color: const Color(0xFF5B4636), size: 22.sp),
            SizedBox(width: 14.w),
            Expanded(child: Text(title, style: TextStyle(fontSize: 14.sp))),
            Icon(Icons.chevron_right, color: Colors.grey[400], size: 20.sp),
          ],
        ),
      ),
    );
  }
}

每个菜单项有图标、标题、箭头。点击跳转到对应的页面。

功能入口设计

个人中心作为功能入口，需要考虑：

分类清晰：相关功能放在一起，方便用户查找。

图标直观：每个功能有对应的图标，一眼就能认出。

层级合理：常用功能放在前面，不常用的放后面。

用户信息展示

用户信息区域可以扩展：

显示真实头像（需要用户上传）。

显示阅读等级或成就。

显示加入天数。

小结

个人中心页面作为用户的主页，展示用户信息和各种功能入口。头部用渐变背景突出用户信息，统计行展示阅读数据。

功能菜单按类别分组，用户可以快速找到想要的功能。每个菜单项有图标和箭头，点击跳转到对应页面。

下一篇会讲关于我们页面的实现，展示App的信息和相关链接。

---

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