前言

用户资料卡片是社交应用中展示用户信息的核心组件。它通常出现在用户列表、推荐用户、关注列表等场景中，需要在有限的空间内展示头像、昵称、简介、关注状态等关键信息。本文将详细介绍如何在Flutter和OpenHarmony平台上实现一个设计精美、功能完善的用户资料卡片组件。

用户资料卡片的设计需要在信息完整性和视觉简洁性之间取得平衡。过多的信息会让卡片显得拥挤，而过少的信息则无法帮助用户做出关注决策。通过本文的学习，开发者将掌握在两个平台上实现专业级用户卡片的核心技术。

Flutter用户卡片实现

组件结构设计

用户卡片需要管理关注状态，因此使用StatefulWidget。

class UserProfileCardWidget extends StatefulWidget {
  const UserProfileCardWidget({super.key});

  @override
  State<UserProfileCardWidget> createState() => _UserProfileCardWidgetState();
}

class _UserProfileCardWidgetState extends State<UserProfileCardWidget> {
  bool _isFollowed = false;

_isFollowed状态变量控制关注按钮的显示状态。在实际项目中，这个状态通常来自后端数据或全局状态管理。

使用局部状态管理关注状态适合简单场景，复杂应用中建议使用Provider、Riverpod等状态管理方案来统一管理用户关注关系。

卡片整体布局

卡片使用垂直布局，从上到下依次是头像、用户信息、统计数据和关注按钮。

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.1), blurRadius: 10, offset: const Offset(0, 4))],
      ),
      child: Column(
        children: [
          CircleAvatar(
            radius: 40,
            backgroundColor: const Color(0xFF8B4513),
            child: const Text('李', style: TextStyle(fontSize: 28, color: Colors.white, fontWeight: FontWeight.bold)),
          ),
          const SizedBox(height: 12),

Container设置较大的内边距(20)和圆角(16)，使卡片更加精致。boxShadow添加偏移量使阴影更加自然。CircleAvatar使用较大的半径(40)突出头像的视觉重要性。

用户信息展示

展示用户昵称、认证标识和个人简介。

          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('李雪芬', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Color(0xFF8B4513))),
              const SizedBox(width: 4),
              const Icon(Icons.verified, size: 18, color: Colors.blue),
            ],
          ),
          const SizedBox(height: 4),
          Text('湘绣非遗传承人 | 从业20年', style: TextStyle(fontSize: 12, color: Colors.grey[600])),
          const SizedBox(height: 8),
          Text(
            '专注湘绣艺术传承与创新，致力于将传统工艺与现代设计相结合',
            style: TextStyle(fontSize: 13, color: Colors.grey[700], height: 1.4),
            textAlign: TextAlign.center,
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),

Row居中排列用户名和认证图标。个人简介使用较小字号和灰色，作为辅助信息。maxLines和overflow处理长文本，避免破坏布局。textAlign居中对齐使整体视觉更加平衡。

统计数据展示

展示作品数、粉丝数和关注数等统计信息。

          const SizedBox(height: 16),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              _buildStatItem('作品', '156'),
              Container(width: 1, height: 30, color: Colors.grey[300]),
              _buildStatItem('粉丝', '2.3K'),
              Container(width: 1, height: 30, color: Colors.grey[300]),
              _buildStatItem('关注', '89'),
            ],
          ),

Row配合spaceEvenly均匀分布三个统计项。Container作为垂直分隔线，增强视觉区分。这种三栏统计布局是社交应用中的经典设计模式。

统计项构建方法

抽取统计项的构建逻辑为独立方法。

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

数值使用较大字号和粗体突出显示，标签使用较小字号作为说明。这种方法抽取避免了代码重复，也便于统一修改样式。

关注按钮实现

关注按钮根据状态显示不同的样式和文字。

          const SizedBox(height: 20),
          SizedBox(
            width: double.infinity,
            child: ElevatedButton(
              onPressed: () => setState(() => _isFollowed = !_isFollowed),
              style: ElevatedButton.styleFrom(
                backgroundColor: _isFollowed ? Colors.grey[300] : const Color(0xFF8B4513),
                padding: const EdgeInsets.symmetric(vertical: 12),
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
              ),
              child: Text(
                _isFollowed ? '已关注' : '+ 关注',
                style: TextStyle(fontSize: 14, color: _isFollowed ? Colors.grey[700] : Colors.white),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

SizedBox配合double.infinity使按钮宽度填满容器。RoundedRectangleBorder设置胶囊形状的圆角。点击按钮切换关注状态，同时更新按钮的背景色和文字。

OpenHarmony鸿蒙实现

组件定义

鸿蒙平台使用@State管理关注状态。

@Component
struct UserProfileCardComponent {
  @State isFollowed: boolean = false
  
  private userData = {
    name: '李雪芬',
    title: '湘绣非遗传承人 | 从业20年',
    bio: '专注湘绣艺术传承与创新，致力于将传统工艺与现代设计相结合',
    works: 156,
    followers: '2.3K',
    following: 89,
    verified: true
  }

用户数据使用对象字面量定义，包含所有需要展示的信息。@State装饰的isFollowed在变化时会自动触发UI更新。

头像与基本信息

使用Column垂直排列头像和用户信息。

  build() {
    Column() {
      Text(this.userData.name.charAt(0))
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.White)
        .width(80)
        .height(80)
        .borderRadius(40)
        .backgroundColor('#8B4513')
        .textAlign(TextAlign.Center)
      
      Row() {
        Text(this.userData.name)
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .fontColor('#8B4513')
        if (this.userData.verified) {
          Image($r('app.media.verified'))
            .width(18)
            .height(18)
            .margin({ left: 4 })
        }
      }
      .margin({ top: 12 })

Text组件配合圆角模拟头像效果。条件渲染根据verified字段决定是否显示认证图标。margin控制元素间距。

简介与统计数据

展示个人简介和统计信息。

      Text(this.userData.title)
        .fontSize(12)
        .fontColor('#666666')
        .margin({ top: 4 })
      
      Text(this.userData.bio)
        .fontSize(13)
        .fontColor('#666666')
        .lineHeight(18)
        .textAlign(TextAlign.Center)
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .margin({ top: 8 })
        .width('90%')
      
      Row() {
        this.StatItem('作品', this.userData.works.toString())
        Divider()
          .vertical(true)
          .height(30)
          .color('#EEEEEE')
        this.StatItem('粉丝', this.userData.followers)
        Divider()
          .vertical(true)
          .height(30)
          .color('#EEEEEE')
        this.StatItem('关注', this.userData.following.toString())
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .margin({ top: 16 })

maxLines和textOverflow处理长文本溢出。Divider组件的vertical属性设为true绘制垂直分隔线。justifyContent均匀分布统计项。

统计项与关注按钮

使用@Builder定义可复用的统计项构建函数。

  @Builder StatItem(label: string, value: string) {
    Column() {
      Text(value)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .fontColor('#8B4513')
      Text(label)
        .fontSize(12)
        .fontColor('#666666')
        .margin({ top: 4 })
    }
  }

      Button(this.isFollowed ? '已关注' : '+ 关注')
        .width('90%')
        .height(44)
        .fontSize(14)
        .fontColor(this.isFollowed ? '#666666' : Color.White)
        .backgroundColor(this.isFollowed ? '#EEEEEE' : '#8B4513')
        .borderRadius(22)
        .margin({ top: 20 })
        .onClick(() => {
          this.isFollowed = !this.isFollowed
        })
    }
    .width('90%')
    .padding(20)
    .backgroundColor(Color.White)
    .borderRadius(16)
  }
}

@Builder装饰器创建可复用的UI构建函数。Button组件根据关注状态动态设置样式。onClick事件切换关注状态。

设计优化建议

用户卡片的设计还可以进一步优化：添加头像加载占位图和错误处理；关注按钮添加加载状态防止重复点击；统计数据支持点击查看详情；添加私信、分享等更多操作入口。这些优化可以提升用户体验和功能完整性。

总结

本文详细介绍了Flutter和OpenHarmony平台上用户资料卡片组件的实现方法。从布局设计、信息展示、到交互功能，每个环节都进行了深入讲解。用户卡片是社交应用的基础组件，其设计质量直接影响用户对平台的第一印象。欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net