Flutter & OpenHarmony OA系统个人中心组件开发指南

前言

个人中心是OA系统中用户管理个人信息和设置的入口，它承载着个人资料展示、账户设置、消息管理、系统设置等功能。一个优秀的个人中心组件需要清晰展示用户信息、提供便捷的功能入口、支持个性化设置。本文将详细介绍如何使用Flutter和OpenHarmony开发一个功能完善的个人中心组件。

组件功能规划

个人中心组件通常采用顶部用户信息卡片加下方功能列表的布局。用户信息卡片展示头像、姓名、部门、职位等基本信息，支持点击编辑。功能列表分组展示各类设置入口，如我的审批、我的日程、消息设置、账户安全、关于我们等。组件还需要支持退出登录功能。

Flutter端实现

定义用户信息数据模型：

class UserProfile {
  final String id;
  final String name;
  final String avatar;
  final String department;
  final String position;
  final String phone;
  final String email;
  final DateTime joinDate;
  
  UserProfile({
    required this.id,
    required this.name,
    required this.avatar,
    required this.department,
    required this.position,
    required this.phone,
    required this.email,
    required this.joinDate,
  });
}

用户信息模型包含个人基本信息，joinDate记录入职日期用于计算工龄。这些信息在个人中心页面展示，部分信息可以编辑修改。

个人中心组件的基础结构：

class ProfileWidget extends StatelessWidget {
  final UserProfile user;
  final VoidCallback onEditProfile;
  final VoidCallback onLogout;
  
  const ProfileWidget({
    Key? key,
    required this.user,
    required this.onEditProfile,
    required this.onLogout,
  }) : super(key: key);
}

组件接收用户信息和操作回调函数，onEditProfile处理编辑资料，onLogout处理退出登录。使用StatelessWidget因为组件本身不管理状态。

用户信息卡片：

Widget _buildUserCard() {
  return Container(
    padding: EdgeInsets.all(20),
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.blue, Colors.blue.shade700],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
    ),
    child: Row(
      children: [
        GestureDetector(
          onTap: onEditProfile,
          child: CircleAvatar(
            radius: 40,
            backgroundImage: NetworkImage(user.avatar),
          ),
        ),
        SizedBox(width: 16),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(user.name, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white)),
              SizedBox(height: 4),
              Text('${user.department} · ${user.position}', style: TextStyle(fontSize: 14, color: Colors.white70)),
              SizedBox(height: 8),
              Text('工号：${user.id}', style: TextStyle(fontSize: 12, color: Colors.white60)),
            ],
          ),
        ),
        Icon(Icons.qr_code, color: Colors.white, size: 28),
      ],
    ),
  );
}

用户信息卡片使用渐变背景突出显示，展示头像、姓名、部门职位和工号。点击头像可以编辑资料，右侧显示二维码图标用于名片分享。

功能菜单列表：

Widget _buildMenuList() {
  final menuGroups = [
    MenuGroup(title: '工作', items: [
      MenuItem(icon: Icons.approval, title: '我的审批', badge: 5),
      MenuItem(icon: Icons.calendar_today, title: '我的日程'),
      MenuItem(icon: Icons.task, title: '我的任务', badge: 3),
    ]),
    MenuGroup(title: '设置', items: [
      MenuItem(icon: Icons.notifications, title: '消息设置'),
      MenuItem(icon: Icons.security, title: '账户安全'),
      MenuItem(icon: Icons.help, title: '帮助与反馈'),
      MenuItem(icon: Icons.info, title: '关于我们'),
    ]),
  ];
  
  return Column(
    children: menuGroups.map((group) => _buildMenuGroup(group)).toList(),
  );
}

功能菜单按分组展示，每个分组包含相关的功能入口。badge字段显示未处理数量，如待审批数、待办任务数等。

菜单项构建：

Widget _buildMenuItem(MenuItem item) {
  return ListTile(
    leading: Container(
      width: 36,
      height: 36,
      decoration: BoxDecoration(
        color: Colors.blue.withOpacity(0.1),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Icon(item.icon, color: Colors.blue, size: 20),
    ),
    title: Text(item.title),
    trailing: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        if (item.badge != null && item.badge! > 0)
          Container(
            padding: EdgeInsets.symmetric(horizontal: 8, vertical: 2),
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(10),
            ),
            child: Text('${item.badge}', style: TextStyle(color: Colors.white, fontSize: 12)),
          ),
        Icon(Icons.chevron_right, color: Colors.grey),
      ],
    ),
    onTap: item.onTap,
  );
}

菜单项使用ListTile布局，leading显示图标，trailing显示角标和箭头。角标使用红色圆形背景突出显示未处理数量。

OpenHarmony鸿蒙端实现

定义用户信息接口：

interface UserProfile {
  id: string
  name: string
  avatar: string
  department: string
  position: string
  phone: string
  email: string
  joinDate: number
}

用户信息接口定义个人基本信息，joinDate使用时间戳格式记录入职日期。

个人中心组件的基础结构：

@Component
struct ProfileWidget {
  @Prop user: UserProfile
  private onEditProfile: () => void = () => {}
  private onLogout: () => void = () => {}
}

使用@Prop接收用户信息，回调函数处理编辑和退出操作。

用户信息卡片：

@Builder
UserCard() {
  Row() {
    Image(this.user.avatar)
      .width(80)
      .height(80)
      .borderRadius(40)
      .onClick(() => this.onEditProfile())
    
    Column() {
      Text(this.user.name)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.White)
      
      Text(`${this.user.department} · ${this.user.position}`)
        .fontSize(14)
        .fontColor('#FFFFFFB3')
        .margin({ top: 4 })
      
      Text(`工号：${this.user.id}`)
        .fontSize(12)
        .fontColor('#FFFFFF99')
        .margin({ top: 8 })
    }
    .alignItems(HorizontalAlign.Start)
    .layoutWeight(1)
    .margin({ left: 16 })
    
    Image($r('app.media.qrcode'))
      .width(28)
      .height(28)
  }
  .width('100%')
  .padding(20)
  .linearGradient({
    angle: 135,
    colors: [['#1890FF', 0], ['#096DD9', 1]]
  })
}

用户信息卡片使用linearGradient创建渐变背景，展示头像和基本信息。点击头像触发编辑资料，二维码图标用于名片分享。

功能菜单列表：

@Builder
MenuList() {
  Column() {
    this.MenuGroup('工作', [
      { icon: $r('app.media.approval'), title: '我的审批', badge: 5 },
      { icon: $r('app.media.calendar'), title: '我的日程' },
      { icon: $r('app.media.task'), title: '我的任务', badge: 3 }
    ])
    
    this.MenuGroup('设置', [
      { icon: $r('app.media.notification'), title: '消息设置' },
      { icon: $r('app.media.security'), title: '账户安全' },
      { icon: $r('app.media.help'), title: '帮助与反馈' },
      { icon: $r('app.media.info'), title: '关于我们' }
    ])
  }
}

功能菜单按分组展示，每个分组调用MenuGroup方法构建。badge字段显示未处理数量角标。

菜单项构建：

@Builder
MenuItem(item: { icon: Resource, title: string, badge?: number }) {
  Row() {
    Column() {
      Image(item.icon)
        .width(20)
        .height(20)
    }
    .width(36)
    .height(36)
    .backgroundColor('#E6F7FF')
    .borderRadius(8)
    .justifyContent(FlexAlign.Center)
    
    Text(item.title)
      .fontSize(14)
      .margin({ left: 12 })
      .layoutWeight(1)
    
    if (item.badge && item.badge > 0) {
      Text(`${item.badge}`)
        .fontSize(12)
        .fontColor(Color.White)
        .backgroundColor('#F5222D')
        .padding({ left: 8, right: 8, top: 2, bottom: 2 })
        .borderRadius(10)
    }
    
    Image($r('app.media.arrow_right'))
      .width(16)
      .height(16)
      .margin({ left: 8 })
  }
  .width('100%')
  .padding({ left: 16, right: 16, top: 14, bottom: 14 })
  .backgroundColor(Color.White)
}

菜单项水平排列图标、标题、角标和箭头。图标使用浅蓝色背景的圆角方块，角标使用红色圆形背景突出显示。

退出登录按钮：

@Builder
LogoutButton() {
  Button('退出登录')
    .type(ButtonType.Normal)
    .width('100%')
    .height(48)
    .fontSize(16)
    .fontColor('#F5222D')
    .backgroundColor(Color.White)
    .margin({ top: 24, left: 16, right: 16 })
    .onClick(() => {
      AlertDialog.show({
        title: '提示',
        message: '确定要退出登录吗？',
        primaryButton: {
          value: '取消',
          action: () => {}
        },
        secondaryButton: {
          value: '确定',
          action: () => this.onLogout()
        }
      })
    })
}

退出登录按钮使用红色文字提示危险操作，点击后弹出确认对话框。AlertDialog.show显示系统对话框，确认后调用退出回调。

总结

本文详细介绍了Flutter和OpenHarmony平台上个人中心组件的开发方法。个人中心是OA系统中用户管理个人信息的入口，需要清晰展示用户信息和提供便捷的功能入口。两个平台都提供了丰富的布局组件来实现个人中心界面，开发者需要注意信息层次的设计和交互反馈的处理。