个人中心是用户管理自己账号和查看个人数据的地方，包括头像昵称、发布卖出等统计数据、以及各种功能入口。今天我们来实现"闲置换"的个人中心页面。

个人中心的设计思路

个人中心页面从上到下依次是：带渐变背景的头部区域（头像、昵称、登录提示）、数据统计栏（发布、卖出、关注、粉丝）、功能菜单列表（我的发布、我的收藏、浏览记录等）。整个页面用CustomScrollView实现，让头部可以有折叠效果，滚动时头部会收起来只保留标题栏。

完整代码实现

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'settings_page.dart';
import 'my_products_page.dart';
import 'favorites_page.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          _buildHeader(),
          SliverToBoxAdapter(child: _buildStats()),
          SliverToBoxAdapter(child: _buildMenuSection()),
        ],
      ),
    );
  }

导入设置页、我的发布页、收藏页，这些是从个人中心跳转过去的子页面。ProfilePage用StatelessWidget因为这个页面主要是展示和导航，没有复杂的状态管理需求。页面用CustomScrollView，子元素都是Sliver类型，这样可以实现头部折叠效果。头部用SliverAppBar实现可折叠效果，统计栏和菜单用SliverToBoxAdapter包裹普通Widget转成Sliver类型。这种结构让页面滚动更流畅，头部折叠动画也更自然。

  Widget _buildHeader() {
    return SliverAppBar(
      expandedHeight: 200,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        background: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Color(0xFF07C160), Color(0xFF06AD56)],
            ),
          ),
          child: SafeArea(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const SizedBox(height: 20),
                Container(
                  width: 80,
                  height: 80,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    shape: BoxShape.circle,
                    border: Border.all(color: Colors.white, width: 3),
                  ),
                  child: const Icon(Icons.person, size: 50, color: Color(0xFF07C160)),
                ),

SliverAppBar的expandedHeight设置展开时的高度为200像素，pinned: true让它在折叠后固定在顶部不会完全消失。FlexibleSpaceBar的background是展开时显示的内容，滚动时会逐渐收起。头部用渐变绿色背景，从上到下由浅绿0xFF07C160过渡到深绿0xFF06AD56，比纯色背景更有质感和层次感。SafeArea确保内容不会被状态栏遮挡。头像区域是一个白色圆形，里面放人物图标，border加一圈白色边框让头像更突出，实际项目中这里应该显示用户的真实头像。

                const SizedBox(height: 12),
                const Text(
                  '点击登录',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 4),
                const Text(
                  '登录后享受更多服务',
                  style: TextStyle(color: Colors.white70, fontSize: 14),
                ),
              ],
            ),
          ),
        ),
      ),
      actions: [
        IconButton(
          icon: const Icon(Icons.settings, color: Colors.white),
          onPressed: () => Get.to(() => const SettingsPage()),
        ),
      ],
    );
  }

头像下面显示"点击登录"和提示文字，这是未登录状态下的显示内容，引导用户登录。登录后这里应该显示用户昵称和个性签名。Colors.white70是70%不透明度的白色，比纯白色柔和一些，形成主次分明的视觉层次。右上角放设置按钮，白色图标在绿色背景上很醒目，点击跳转到设置页面。actions里的按钮会固定在AppBar右边，不管头部是展开还是折叠状态都能看到。

  Widget _buildStats() {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 20),
      color: Colors.white,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          _buildStatItem('0', '发布'),
          _buildDivider(),
          _buildStatItem('0', '卖出'),
          _buildDivider(),
          _buildStatItem('0', '关注'),
          _buildDivider(),
          _buildStatItem('0', '粉丝'),
        ],
      ),
    );
  }

统计栏用Row水平排列四个数据项，spaceEvenly让它们均匀分布，每个数据项之间有相等的间距。每两个数据项之间用竖线分隔，视觉上更清晰。这四个数据是用户最关心的：发布了多少商品、卖出了多少、关注了多少人、有多少粉丝。数字用大字号突出显示，标签用小字号说明含义。白色背景让统计栏看起来像一个独立的卡片，和头部的绿色背景形成对比。

  Widget _buildStatItem(String count, String label) {
    return Column(
      children: [
        Text(
          count,
          style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
        const SizedBox(height: 4),
        Text(label, style: TextStyle(color: Colors.grey[600], fontSize: 14)),
      ],
    );
  }

  Widget _buildDivider() {
    return Container(
      width: 1,
      height: 30,
      color: Colors.grey[200],
    );
  }

每个统计项是数字加标签的组合，数字用20号粗体突出显示，标签用14号灰色小字说明这个数字代表什么。分隔线是一个1像素宽30像素高的灰色容器，颜色用浅灰色不会太突兀。这种数字+标签的布局在很多App的个人中心都能看到，是一种成熟的设计模式，用户一眼就能理解每个数字的含义。

  Widget _buildMenuSection() {
    return Container(
      margin: const EdgeInsets.only(top: 10),
      color: Colors.white,
      child: Column(
        children: [
          _buildMenuItem(Icons.shopping_bag, '我的发布', () => Get.to(() => const MyProductsPage())),
          _buildMenuItem(Icons.favorite, '我的收藏', () => Get.to(() => const FavoritesPage())),
          _buildMenuItem(Icons.history, '浏览记录', () {}),
          _buildMenuItem(Icons.location_on, '收货地址', () {}),
          _buildMenuItem(Icons.help_outline, '帮助中心', () {}),
          _buildMenuItem(Icons.info_outline, '关于我们', () {}),
        ],
      ),
    );
  }

菜单区域和统计栏之间有10像素的灰色间隔，视觉上分成两个卡片，层次分明。菜单项用Column垂直排列，每个菜单项点击跳转到对应的页面。这些菜单覆盖了用户常用的功能：管理自己发布的商品、查看收藏的商品、浏览历史、收货地址管理、帮助和关于。菜单项的顺序按使用频率排列，最常用的放在最上面，用户不需要滚动就能看到。

  Widget _buildMenuItem(IconData icon, String title, VoidCallback onTap) {
    return ListTile(
      leading: Icon(icon, color: const Color(0xFF07C160)),
      title: Text(title),
      trailing: const Icon(Icons.chevron_right, color: Colors.grey),
      onTap: onTap,
    );
  }
}

菜单项用ListTile实现，左边是绿色图标，中间是标题，右边是灰色箭头表示可以点击进入下一级页面。ListTile内置了合理的间距和点击效果，用起来很方便，不需要自己处理点击态和布局。所有图标都用主题绿色0xFF07C160，保持视觉统一。箭头用灰色，不会太抢眼但又能提示用户这是可点击的。封装成独立方法方便复用，如果要加更多菜单项只需要调用这个方法。

登录状态的处理

实际项目中个人中心需要区分登录和未登录状态：未登录时头部显示"点击登录"，点击跳转到登录页面，统计数据显示0或者显示"–"，部分功能菜单点击后提示需要登录；登录后头部显示用户头像和昵称，统计数据显示真实数字，所有功能都可以正常使用。可以用GetX的状态管理来处理登录状态，在页面中用Obx监听状态变化自动更新UI。

小结

这篇实现了"闲置换"App的个人中心页面，包括渐变背景的头部区域、四项数据统计、六个功能菜单。页面用CustomScrollView和SliverAppBar实现可折叠的头部效果。个人中心是用户管理账号的核心页面，设计要简洁清晰，让用户快速找到需要的功能。

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