前言

动态列表（Activity Feed）是社交应用中展示用户活动和系统通知的重要组件。它以时间线形式展示关注用户的最新动态、系统消息、互动通知等内容。本文将详细介绍如何在Flutter和OpenHarmony平台上实现一个功能完善的动态列表组件。

动态列表的设计需要考虑信息的时效性展示、不同类型动态的区分、以及加载更多的性能优化。

Flutter动态列表实现

动态数据结构

定义动态数据，包含用户、类型、内容和时间。

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

  @override
  Widget build(BuildContext context) {
    final activities = [
      {'user': '王淑英', 'type': 'publish', 'content': '发布了新作品《春日牡丹》', 'time': '10分钟前'},
      {'user': '李雪芬', 'type': 'like', 'content': '赞了你的作品', 'time': '30分钟前'},
      {'user': '系统', 'type': 'system', 'content': '您的作品已通过审核', 'time': '1小时前'},
      {'user': '陈美华', 'type': 'follow', 'content': '关注了你', 'time': '2小时前'},
    ];

type字段区分不同类型的动态：发布、点赞、系统通知、关注等。不同类型显示不同的图标和样式。

动态列表构建

使用Column构建动态列表。

    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      child: Column(
        children: activities.map((activity) {
          return Container(
            margin: const EdgeInsets.only(bottom: 12),
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(12),
              boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 5)],
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _buildActivityIcon(activity['type'] as String),
                const SizedBox(width: 12),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      RichText(
                        text: TextSpan(
                          children: [
                            TextSpan(
                              text: activity['user'] as String,
                              style: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold, color: Color(0xFF8B4513)),
                            ),
                            TextSpan(
                              text: ' ${activity['content']}',
                              style: TextStyle(fontSize: 14, color: Colors.grey[700]),
                            ),
                          ],
                        ),
                      ),
                      const SizedBox(height: 4),
                      Text(activity['time'] as String, style: TextStyle(fontSize: 12, color: Colors.grey[500])),
                    ],
                  ),
                ),
              ],
            ),
          );
        }).toList(),
      ),
    );
  }

RichText实现用户名和内容的不同样式。CrossAxisAlignment.start使图标和内容顶部对齐。

动态图标构建

根据动态类型返回对应的图标。

  Widget _buildActivityIcon(String type) {
    IconData icon;
    Color color;
    
    switch (type) {
      case 'publish':
        icon = Icons.add_circle;
        color = Colors.green;
        break;
      case 'like':
        icon = Icons.favorite;
        color = Colors.red;
        break;
      case 'system':
        icon = Icons.notifications;
        color = Colors.blue;
        break;
      case 'follow':
        icon = Icons.person_add;
        color = Colors.purple;
        break;
      default:
        icon = Icons.circle;
        color = Colors.grey;
    }
    
    return Container(
      padding: const EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: color.withOpacity(0.1),
        shape: BoxShape.circle,
      ),
      child: Icon(icon, size: 18, color: color),
    );
  }
}

不同类型使用不同颜色的图标，帮助用户快速识别动态类型。圆形背景增强视觉效果。

OpenHarmony鸿蒙实现

组件与数据定义

鸿蒙平台定义动态数据接口。

interface ActivityItem {
  user: string
  type: string
  content: string
  time: string
}

@Component
struct ActivityFeedComponent {
  private activities: Array<ActivityItem> = [
    { user: '王淑英', type: 'publish', content: '发布了新作品《春日牡丹》', time: '10分钟前' },
    { user: '李雪芬', type: 'like', content: '赞了你的作品', time: '30分钟前' },
    { user: '系统', type: 'system', content: '您的作品已通过审核', time: '1小时前' },
    { user: '陈美华', type: 'follow', content: '关注了你', time: '2小时前' }
  ]

动态列表实现

使用ForEach构建动态列表。

  build() {
    Column() {
      ForEach(this.activities, (item: ActivityItem) => {
        Row() {
          this.ActivityIcon(item.type)
          
          Column() {
            Text() {
              Span(item.user)
                .fontSize(14)
                .fontWeight(FontWeight.Bold)
                .fontColor('#8B4513')
              Span(' ' + item.content)
                .fontSize(14)
                .fontColor('#666666')
            }
            Text(item.time)
              .fontSize(12)
              .fontColor('#999999')
              .margin({ top: 4 })
          }
          .layoutWeight(1)
          .alignItems(HorizontalAlign.Start)
          .margin({ left: 12 })
        }
        .width('100%')
        .padding(12)
        .backgroundColor(Color.White)
        .borderRadius(12)
        .alignItems(VerticalAlign.Top)
        .margin({ bottom: 12 })
      })
    }
    .width('90%')
  }

  @Builder ActivityIcon(type: string) {
    Row() {
      Image(this.getIconByType(type))
        .width(18)
        .height(18)
        .fillColor(this.getColorByType(type))
    }
    .width(34)
    .height(34)
    .borderRadius(17)
    .backgroundColor(this.getColorByType(type) + '1A')
    .justifyContent(FlexAlign.Center)
  }

  getIconByType(type: string): Resource {
    const iconMap: Record<string, Resource> = {
      'publish': $r('app.media.add_circle'),
      'like': $r('app.media.heart'),
      'system': $r('app.media.notification'),
      'follow': $r('app.media.person_add')
    }
    return iconMap[type] || $r('app.media.circle')
  }

  getColorByType(type: string): string {
    const colorMap: Record<string, string> = {
      'publish': '#4CAF50',
      'like': '#F44336',
      'system': '#2196F3',
      'follow': '#9C27B0'
    }
    return colorMap[type] || '#9E9E9E'
  }
}

Text组件内使用Span实现富文本效果。@Builder定义可复用的图标构建函数。辅助方法返回类型对应的图标和颜色。

功能扩展

动态列表还可以添加下拉刷新、上拉加载更多、动态筛选（全部/关注/系统）、点击跳转详情等功能。对于大量动态数据，需要使用虚拟列表优化性能。

总结

本文介绍了Flutter和OpenHarmony平台上动态列表组件的实现方法。动态列表是社交应用的核心功能，其设计需要清晰展示不同类型的动态，帮助用户快速了解最新信息。欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net