前言

快速统计卡片是首页或仪表盘中展示关键数据指标的重要组件。它以简洁的方式展示用户关心的核心数据，如作品数、粉丝数、收益等。本文将详细介绍如何在Flutter和OpenHarmony平台上实现一个设计精美的快速统计卡片组件。

统计卡片的设计需要突出数据的重要性，同时保持视觉的简洁性。数字应该醒目易读，标签应该清晰明了。

Flutter统计卡片实现

组件结构设计

统计卡片通常是纯展示组件。

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

  @override
  Widget build(BuildContext context) {
    final stats = [
      {'icon': Icons.brush, 'value': '28', 'label': '作品', 'color': Colors.orange},
      {'icon': Icons.favorite, 'value': '1.2K', 'label': '获赞', 'color': Colors.red},
      {'icon': Icons.people, 'value': '856', 'label': '粉丝', 'color': Colors.blue},
      {'icon': Icons.star, 'value': '4.9', 'label': '评分', 'color': Colors.amber},
    ];

每个统计项包含图标、数值、标签和主题色。不同的统计项使用不同颜色区分。

网格布局实现

使用GridView展示统计卡片。

    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      child: GridView.count(
        crossAxisCount: 4,
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        childAspectRatio: 0.9,
        children: stats.map((stat) {
          return Container(
            margin: const EdgeInsets.all(4),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(12),
              boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 5)],
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    color: (stat['color'] as Color).withOpacity(0.1),
                    shape: BoxShape.circle,
                  ),
                  child: Icon(stat['icon'] as IconData, size: 20, color: stat['color'] as Color),
                ),
                const SizedBox(height: 8),
                Text(
                  stat['value'] as String,
                  style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Color(0xFF333333)),
                ),
                const SizedBox(height: 2),
                Text(
                  stat['label'] as String,
                  style: TextStyle(fontSize: 11, color: Colors.grey[600]),
                ),
              ],
            ),
          );
        }).toList(),
      ),
    );
  }
}

crossAxisCount设为4实现四列布局。每个卡片包含彩色图标、数值和标签。图标使用对应颜色的浅色背景增强视觉效果。

OpenHarmony鸿蒙实现

组件与数据定义

鸿蒙平台定义统计数据接口。

interface StatItem {
  icon: Resource
  value: string
  label: string
  color: string
}

@Component
struct QuickStatsComponent {
  private stats: Array<StatItem> = [
    { icon: $r('app.media.brush'), value: '28', label: '作品', color: '#FF9800' },
    { icon: $r('app.media.heart'), value: '1.2K', label: '获赞', color: '#F44336' },
    { icon: $r('app.media.people'), value: '856', label: '粉丝', color: '#2196F3' },
    { icon: $r('app.media.star'), value: '4.9', label: '评分', color: '#FFC107' }
  ]

网格布局实现

使用Grid组件实现四列布局。

  build() {
    Grid() {
      ForEach(this.stats, (item: StatItem) => {
        GridItem() {
          Column() {
            Row() {
              Image(item.icon)
                .width(20)
                .height(20)
                .fillColor(item.color)
            }
            .width(36)
            .height(36)
            .borderRadius(18)
            .backgroundColor(item.color + '1A')
            .justifyContent(FlexAlign.Center)
            
            Text(item.value)
              .fontSize(18)
              .fontWeight(FontWeight.Bold)
              .fontColor('#333333')
              .margin({ top: 8 })
            
            Text(item.label)
              .fontSize(11)
              .fontColor('#666666')
              .margin({ top: 2 })
          }
          .width('100%')
          .height('100%')
          .backgroundColor(Color.White)
          .borderRadius(12)
          .justifyContent(FlexAlign.Center)
        }
        .padding(4)
      })
    }
    .columnsTemplate('1fr 1fr 1fr 1fr')
    .rowsTemplate('1fr')
    .width('90%')
    .height(100)
  }
}

columnsTemplate定义四列等宽布局。backgroundColor使用颜色值加透明度后缀实现浅色背景。

数据动态更新

在实际项目中，统计数据通常需要从后端获取并实时更新。可以使用定时器定期刷新数据，或者通过WebSocket接收实时推送。数据变化时可以添加数字滚动动画增强视觉效果。

总结

本文介绍了Flutter和OpenHarmony平台上快速统计卡片组件的实现方法。统计卡片是展示关键数据的有效方式，其设计需要在信息密度和视觉美观之间取得平衡。欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net