Flutter 与 HarmonyOS 6.0 推荐视频功能实现解析

Flutter 与 HarmonyOS 6.0 推荐视频功能实现解析

前言

在移动应用开发日益多样化的今天，视频内容已成为用户粘性的重要来源。如何在应用中构建一个既美观又高效的推荐视频模块，直接影响用户的留存率和体验。本文将结合 Flutter × HarmonyOS 6.0 跨端开发，带你实现一个可跨端运行的视频播放器应用，并详细解析推荐视频功能的实现细节。

背景

在现代短视频与在线视频应用中，'推荐视频'是最核心的功能之一。用户打开应用后，第一眼看到的内容很大程度上决定了用户是否继续浏览。

传统开发模式中，开发者往往需要针对 Android 和 HarmonyOS 分别实现 UI 和逻辑，这不仅增加开发成本，还可能导致体验不一致。Flutter 跨端开发能够一次编写代码，同时兼容 HarmonyOS 6.0、Android 和 iOS，大大提高了开发效率。

Flutter × HarmonyOS 6.0 跨端开发介绍

Flutter 是 Google 推出的 UI 框架，基于 Dart 语言，可通过 Widget 组合快速构建跨平台界面。

HarmonyOS 6.0 则提供了多设备生态支持，包括手机、平板、智能屏等。通过 OpenHarmony SDK 与 Flutter 的整合，可以实现以下优势：

1. 统一 UI：一次编写，保证各设备界面一致。
2. 高性能渲染：Flutter 的渲染引擎 Skia 支持 GPU 加速，实现流畅动画。
3. 丰富插件生态：借助 Flutter 插件，可快速集成视频播放、网络请求、数据库等功能。

在构建推荐视频模块时，Flutter 的 ListView.builder 和 Stack/Positioned 布局非常适合展示带封面、时长、作者信息的横向视频列表。

开发核心代码

推荐视频模块主要包含两个部分：

1. 推荐视频列表容器
2. 单个推荐视频卡片

下面逐行解析关键代码实现：

/// 构建推荐视频 Widget
Widget _buildFeaturedVideos(ThemeData theme) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // 标题与'查看全部'按钮
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text('推荐视频', style: theme.textTheme.titleLarge?.copyWith(fontWeight: FontWeight.bold)),
          TextButton(
            onPressed: () => _viewAllFeatured(),
            child: const Text('查看全部'),
          ),
        ],
      ),
      const SizedBox(height: 16),
      // 横向视频列表
      SizedBox(
        height: 200,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: _featuredVideos.length,
          itemBuilder: (context, index) {
            final video = _featuredVideos[index];
            return _buildFeaturedVideoCard(video, theme);
          },
        ),
      ),
    ],
  );
}

解析：

• Column 用于垂直布局标题和视频列表。
• Row 用于显示标题和右侧按钮，MainAxisAlignment.spaceBetween 确保左右对齐。
• ListView.builder 提供高性能懒加载，适合长列表展示。
• _featuredVideos 是视频数据源，包括封面、标题、作者、时长等信息。

单个推荐视频卡片

Widget _buildFeaturedVideoCard(Video video, ThemeData theme) {
  return GestureDetector(
    onTap: () => _playVideo(video),
    child: Container(
      width: 300,
      margin: const EdgeInsets.only(right: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Stack(
            children: [
              // 视频封面
              ClipRRect(
                borderRadius: BorderRadius.circular(12),
                child: Image.network(video.thumbnail, width: 300, height: 160, fit: BoxFit.cover),
              ),
              // 视频时长
              Positioned(
                bottom: 8,
                right: 8,
                child: Container(
                  padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                  decoration: BoxDecoration(
                    color: Colors.black.withOpacity(0.7),
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: Text(
                    video.duration,
                    style: theme.textTheme.bodySmall?.copyWith(color: Colors.white, fontWeight: FontWeight.bold),
                  ),
                ),
              ),
              // 直播标识
              if (video.isLive)
                Positioned(
                  top: 8,
                  left: 8,
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: Text('直播', style: theme.textTheme.bodySmall?.copyWith(color: Colors.white, fontWeight: FontWeight.bold)),
                  ),
                ),
            ],
          ),
          const SizedBox(height: 8),
          // 视频标题
          Text(
            video.title,
            style: theme.textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.bold),
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
          const SizedBox(height: 4),
          // 作者信息与播放量
          Row(
            children: [
              CircleAvatar(radius: 10, backgroundImage: NetworkImage(video.authorAvatar)),
              const SizedBox(width: 6),
              Expanded(
                child: Text(
                  video.author,
                  style: theme.textTheme.bodySmall?.copyWith(color: theme.colorScheme.onSurfaceVariant),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
              const SizedBox(width: 8),
              Text(_formatViews(video.views), style: theme.textTheme.bodySmall?.copyWith(color: theme.colorScheme.onSurfaceVariant)),
            ],
          ),
        ],
      ),
    ),
  );
}