Flutter免费影视聚合搜索应用开发教程

项目简介

这是一个影视资源聚合搜索应用，整合多个影视资源站点，提供统一的搜索、浏览和收藏功能。用户可以快速找到想看的影视资源，并从多个来源选择播放。
运行效果图

主要功能

• 🔍 全局搜索（支持片名、演员、导演搜索）
• 🎬 5大影视分类（电影、电视剧、综艺、动漫、纪录片）
• 📺 多资源聚合（整合5个资源站）
• ⭐ 收藏功能
• 📊 评分展示
• 💬 分享功能

应用特色

1. 资源丰富：聚合多个影视资源站
2. 搜索强大：支持多维度搜索
3. 界面美观：卡片式布局，视觉效果好
4. 操作便捷：简单直观的交互设计
5. 信息全面：详细的影视信息展示

数据模型设计

1. 影视类型枚举（MovieType）

enum MovieType {
  movie('电影', Icons.movie),
  tv('电视剧', Icons.tv),
  variety('综艺', Icons.mic),
  anime('动漫', Icons.animation),
  documentary('纪录片', Icons.video_library);

  final String label;
  final IconData icon;
  const MovieType(this.label, this.icon);
}

2. 影视来源枚举（VideoSource）

enum VideoSource {
  source1('资源站1', Colors.blue),
  source2('资源站2', Colors.green),
  source3('资源站3', Colors.orange),
  source4('资源站4', Colors.purple),
  source5('资源站5', Colors.red);

  final String label;
  final Color color;
  const VideoSource(this.label, this.color);
}

3. 影视模型（Movie）

class Movie {
  final String id;
  final String title;
  final String cover;
  final MovieType type;
  final String year;
  final String area;
  final String director;
  final String actors;
  final String description;
  final double rating;
  final List<VideoSource> sources;
  bool isFavorite;
}

核心功能实现

1. 全局搜索

支持按片名、演员、导演进行搜索。

void _performSearch(String query) {
  if (query.isEmpty) {
    setState(() {
      _isSearching = false;
      _searchResults = [];
    });
    return;
  }

  setState(() {
    _isSearching = true;
    _searchResults = _movies
        .where((m) =>
            m.title.toLowerCase().contains(query.toLowerCase()) ||
            m.actors.toLowerCase().contains(query.toLowerCase()) ||
            m.director.toLowerCase().contains(query.toLowerCase()))
        .toList();
  });
}

2. 分类筛选

用户可以按影视类型筛选内容。

List<Movie> get _filteredMovies {
  if (_selectedType == null) {
    return _movies;
  }
  return _movies.where((m) => m.type == _selectedType).toList();
}

3. 影视卡片展示

使用网格布局展示影视卡片，包含封面、评分、类型等信息。

Widget _buildMovieCard(Movie movie) {
  return Card(
    clipBehavior: Clip.antiAlias,
    child: InkWell(
      onTap: () => Navigator.push(...),
      child: Column(
        children: [
          // 封面图
          Expanded(
            child: Stack(
              children: [
                Container(color: Colors.grey[300]),
                // 评分标签
                Positioned(
                  top: 8,
                  right: 8,
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.orange,
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: Row(
                      children: [
                        Icon(Icons.star),
                        Text(movie.rating.toStringAsFixed(1)),
                      ],
                    ),
                  ),
                ),
                // 类型标签
                Positioned(
                  bottom: 8,
                  left: 8,
                  child: Text(movie.type.label),
                ),
              ],
            ),
          ),
          // 标题和信息
          Padding(
            padding: EdgeInsets.all(8),
            child: Column(
              children: [
                Text(movie.title),
                Text('${movie.year} · ${movie.area}'),
              ],
            ),
          ),
        ],
      ),
    ),
  );
}

4. 详情页展示

展示影视的详细信息和播放资源。

class MovieDetailPage extends StatefulWidget {
  final Movie movie;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('影视详情'),
        actions: [
          IconButton(
            icon: Icon(movie.isFavorite ? Icons.favorite : Icons.favorite_border),
            onPressed: () => toggleFavorite(),
          ),
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            // 封面和基本信息
            Container(height: 300, child: ...),
            // 详细信息
            _buildInfoRow('类型', movie.type.label),
            _buildInfoRow('导演', movie.director),
            _buildInfoRow('主演', movie.actors),
            // 剧情简介
            Text(movie.description),
            // 播放资源
            ...movie.sources.map((source) => ListTile(...)),
          ],
        ),
      ),
    );
  }
}

UI组件结构

整体架构

应用采用3页NavigationBar结构：

┌─────────────────────────────────┐
│         首页（搜索和列表）       │
│  ┌───────────────────────────┐  │
│  │   搜索框                   │  │
│  └───────────────────────────┘  │
│  ┌───────────────────────────┐  │
│  │   类型筛选栏               │  │
│  │  [全部][电影][电视剧]...  │  │
│  └───────────────────────────┘  │
│  ┌──────┐  ┌──────┐            │
│  │ 封面  │  │ 封面  │            │
│  │ ⭐8.3│  │ ⭐9.1│            │
│  │ 标题  │  │ 标题  │            │
│  └──────┘  └──────┘            │
└─────────────────────────────────┘
┌─────────────────────────────────┐
│         分类页（影视分类）       │
│  ┌──────────┐  ┌──────────┐    │
│  │   电影    │  │  电视剧   │    │
│  │   🎬     │  │   📺     │    │
│  └──────────┘  └──────────┘    │
└─────────────────────────────────┘
┌─────────────────────────────────┐
│         收藏页（我的收藏）       │
│         [收藏的影视列表]         │
└─────────────────────────────────┘

详情页布局

┌─────────────────────────────────┐
│  AppBar [收藏] [分享]           │
├─────────────────────────────────┤
│  ┌───────────────────────────┐  │
│  │   封面图（300高度）        │  │
│  │   底部渐变显示标题和评分   │  │
│  └───────────────────────────┘  │
│  类型：电影                     │
│  导演：XXX                      │
│  主演：XXX                      │
│  ─────────────────────────      │
│  剧情简介                       │
│  详细的剧情描述...              │
│  ─────────────────────────      │
│  播放资源                       │
│  [资源站1] 点击播放 >           │
│  [资源站2] 点击播放 >           │
│  [资源站3] 点击播放 >           │
└─────────────────────────────────┘

功能扩展建议

1. 历史记录

记录用户的观看历史。

class WatchHistory {
  final String movieId;
  final DateTime watchTime;
  final int progress;  // 观看进度（秒）
}

2. 在线播放

集成视频播放器，支持在线播放。

import 'package:video_player/video_player.dart';

class VideoPlayerPage extends StatefulWidget {
  final String videoUrl;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: VideoPlayer(_controller),
    );
  }
}

3. 下载功能

支持离线下载影视资源。

4. 评论功能

用户可以发表评论和评分。

class Comment {
  final String userId;
  final String userName;
  final String content;
  final double rating;
  final DateTime time;
}

5. 推荐算法

根据用户观看历史推荐相似影视。

部署指南

环境要求

• Flutter SDK: 3.0+
• Dart SDK: 3.0+
• 支持平台: Android、iOS、Web、HarmonyOS

依赖包配置

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

运行步骤

1. 安装依赖

flutter pub get

2. 运行应用

flutter run

3. 打包发布

# Android
flutter build apk --release

# iOS
flutter build ios --release

# HarmonyOS
flutter build hap --release

技术要点

1. 搜索功能实现

使用TextField的onChanged回调实时搜索。

2. 网格布局

使用GridView.builder创建响应式网格布局。

3. 状态管理

使用StatefulWidget管理搜索状态和收藏状态。

4. 页面导航

使用Navigator进行页面跳转和参数传递。

注意事项

1. 版权问题

• 仅聚合公开的免费资源
• 不存储任何影视内容
• 添加版权声明

2. 资源有效性

• 定期检查资源链接
• 提供资源失效反馈
• 及时更新资源列表

3. 用户体验

• 加载状态提示
• 错误处理
• 网络异常提示

总结

本教程介绍了免费影视聚合搜索应用的开发过程，包括数据模型设计、核心功能实现、UI组件构建等。应用整合了多个影视资源，提供便捷的搜索和浏览功能，是一个实用的影视工具。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net