前言

个人中心是用户管理账户信息和个性化设置的入口，在青花瓷App中，用户可以在这里查看收藏的藏品、浏览历史、学习进度等个人数据。我们将设计一个功能完善且视觉优雅的个人中心页面。

个人中心的设计理念是"以用户为中心"，将用户最关心的信息和最常用的功能放在显眼的位置。页面的视觉风格延续青花瓷的典雅气质，让用户在管理个人信息时也能感受到文化氛围。

个人中心页面结构

个人中心页面采用列表布局，从上到下依次展示用户信息、功能入口和设置选项。

// lib/screens/profile/profile_screen.dart
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('我的'),
        actions: [
          IconButton(
            icon: const Icon(Icons.settings),
            onPressed: () {},
          ),
        ],
      ),
      body: ListView(
        children: const [
          UserInfoCard(),
          StatsSection(),
          MenuSection(),
        ],
      ),
    );
  }
}


页面使用`ListView`作为主体容器，从上到下依次展示用户信息卡片、统计数据区域和功能菜单。应用栏右侧提供设置入口，方便用户进入设置页面。这种布局结构清晰，用户可以快速找到需要的功能。

## 用户信息卡片

用户信息卡片展示头像、昵称和简介，是个人中心的视觉焦点。

```dart
// lib/screens/profile/widgets/user_info_card.dart
class UserInfoCard extends StatelessWidget {
  const UserInfoCard({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        gradient: PorcelainGradients.blueGradient,
      ),
      child: Row(
        children: [
          const CircleAvatar(
            radius: 36,
            backgroundImage: AssetImage('assets/images/avatar.png'),
          ),
          const SizedBox(width: 16),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              Text('青花爱好者',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                )),
              SizedBox(height: 4),
              Text('探索青花瓷的美',
                style: TextStyle(color: Colors.white70)),
            ],
          ),
        ],
      ),
    );
  }
}

用户信息卡片使用青花蓝渐变背景，与应用主题呼应。头像使用CircleAvatar组件显示圆形图片，昵称使用白色粗体字突出显示，简介使用半透明白色形成层次。这种设计让用户信息区域成为页面的视觉亮点。

OpenHarmony用户信息组件

在OpenHarmony端实现用户信息展示组件。

// ohos/entry/src/main/ets/components/UserInfoCard.ets
@Component
export struct UserInfoCard {
  build() {
    Row() {
      Image($r('app.media.avatar'))
        .width(72)
        .height(72)
        .borderRadius(36)
      
      Column() {
        Text('青花爱好者')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .fontColor('#FFFFFF')
        Text('探索青花瓷的美')
          .fontSize(14)
          .fontColor('#FFFFFFB3')
          .margin({ top: 4 })
      }
      .alignItems(HorizontalAlign.Start)
      .margin({ left: 16 })
    }
    .width('100%')
    .padding(20)
    .linearGradient({
      direction: GradientDirection.Top,
      colors: [['#5B8AC7', 0], ['#1E4B8E', 0.5], ['#0D2E5C', 1]]
    })
  }
}

ArkTS使用linearGradient属性实现渐变背景，颜色数组定义了渐变的色值和位置。borderRadius设置图片为圆形。文字颜色使用十六进制格式，#FFFFFFB3表示70%透明度的白色。这种实现与Flutter端保持视觉一致性。

统计数据区域

统计区域展示用户的收藏数量、浏览记录和学习进度等数据。

// lib/screens/profile/widgets/stats_section.dart
class StatsSection extends StatelessWidget {
  const StatsSection({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 16),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: const [
          StatItem(label: '收藏', value: '28'),
          StatItem(label: '浏览', value: '156'),
          StatItem(label: '学习', value: '12'),
        ],
      ),
    );
  }
}

class StatItem extends StatelessWidget {
  final String label;
  final String value;

  const StatItem({super.key, required this.label, required this.value});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(value,
          style: const TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: PorcelainColors.primaryBlue,
          )),
        const SizedBox(height: 4),
        Text(label, style: const TextStyle(color: Colors.grey)),
      ],
    );
  }
}

统计区域使用Row布局均匀分布三个统计项，每个统计项显示数值和标签。数值使用大号蓝色粗体字突出显示，标签使用灰色小字。spaceEvenly使三个统计项等间距分布，视觉上更加平衡。

功能菜单区域

功能菜单提供各种功能入口，如收藏夹、浏览历史、设置等。

// lib/screens/profile/widgets/menu_section.dart
class MenuSection extends StatelessWidget {
  const MenuSection({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        MenuItem(
          icon: Icons.favorite,
          title: '我的收藏',
          onTap: () {},
        ),
        MenuItem(
          icon: Icons.history,
          title: '浏览历史',
          onTap: () {},
        ),
        MenuItem(
          icon: Icons.download,
          title: '离线内容',
          onTap: () {},
        ),
        MenuItem(
          icon: Icons.help,
          title: '帮助反馈',
          onTap: () {},
        ),
      ],
    );
  }
}

菜单区域使用Column垂直排列多个菜单项，每个菜单项包含图标、标题和点击回调。菜单项涵盖了用户常用的功能：收藏管理、历史记录、离线内容和帮助反馈。这种设计让用户可以快速访问各项功能。

菜单项组件

自定义菜单项组件，统一菜单的视觉样式和交互行为。

// lib/screens/profile/widgets/menu_item.dart
class MenuItem extends StatelessWidget {
  final IconData icon;
  final String title;
  final VoidCallback onTap;

  const MenuItem({
    super.key,
    required this.icon,
    required this.title,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Icon(icon, color: PorcelainColors.primaryBlue),
      title: Text(title),
      trailing: const Icon(Icons.chevron_right, color: Colors.grey),
      onTap: onTap,
    );
  }
}

菜单项使用ListTile组件实现标准的列表项布局，图标使用青花蓝色与主题呼应，右侧箭头提示可点击。onTap回调处理点击事件，导航到对应的功能页面。统一的组件设计确保了菜单的视觉一致性。

总结

本篇文章详细介绍了青花瓷App用户个人中心页面的设计与实现，包括用户信息展示、统计数据和功能菜单。通过精心的布局设计，用户可以方便地管理个人信息和访问各项功能。下一篇文章将介绍收藏夹功能的开发。欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net