Flutter交互式画廊插件interactive_gallery的使用

interactive_gallery 是一个用于 Flutter 的交互式画廊插件，允许用户以交互方式浏览图片、视频或其他内容。它提供了平滑的过渡效果、缩放、拖拽等交互功能，适用于创建图片画廊、视频播放器等场景。

以下是如何使用 interactive_gallery 插件的步骤：

1. 添加依赖

在 pubspec.yaml 文件中添加 interactive_gallery 依赖：

dependencies:
  flutter:
    sdk: flutter
  interactive_gallery: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 以安装依赖。

2. 基本用法

以下是一个简单的示例，展示如何使用 InteractiveGallery 创建一个图片画廊：

import 'package:flutter/material.dart';
import 'package:interactive_gallery/interactive_gallery.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GalleryScreen(),
    );
  }
}

class GalleryScreen extends StatelessWidget {
  final List<String> imageUrls = [
    'https://via.placeholder.com/400',
    'https://via.placeholder.com/500',
    'https://via.placeholder.com/600',
    'https://via.placeholder.com/700',
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Interactive Gallery'),
      ),
      body: InteractiveGallery(
        items: imageUrls.map((url) => GalleryItem(url: url)).toList(),
      ),
    );
  }
}

3. 参数说明

InteractiveGallery 支持以下参数：

• items: 必填，List<GalleryItem>，表示画廊中的内容。GalleryItem 可以包含图片、视频或其他自定义内容。
• initialIndex: 初始显示的索引，默认为 0。
• onPageChanged: 当页面切换时的回调函数。
• controller: 用于控制画廊的 InteractiveGalleryController。
• scaleEnabled: 是否启用缩放功能，默认为 true。
• dragEnabled: 是否启用拖拽功能，默认为 true。

4. 高级用法

自定义内容

GalleryItem 支持自定义内容，例如视频或复杂布局：

InteractiveGallery(
  items: [
    GalleryItem(
      child: VideoPlayerWidget(videoUrl: 'https://example.com/video.mp4'),
    ),
    GalleryItem(
      child: Container(
        color: Colors.blue,
        child: Center(child: Text('Custom Content')),
      ),
    ),
  ],
)

控制画廊

使用 InteractiveGalleryController 控制画廊的行为，例如跳转到指定页面：

final controller = InteractiveGalleryController();

InteractiveGallery(
  controller: controller,
  items: imageUrls.map((url) => GalleryItem(url: url)).toList(),
);

// 跳转到第二页
controller.jumpToPage(1);

5. 注意事项

• 确保图片或视频的 URL 可访问。
• 如果需要加载网络图片，可以使用 Image.network 或 CachedNetworkImage。
• 如果需要支持视频，可以结合 video_player 插件。

6. 完整示例

以下是一个完整的示例，展示如何创建一个包含图片和视频的交互式画廊：

import 'package:flutter/material.dart';
import 'package:interactive_gallery/interactive_gallery.dart';
import 'package:video_player/video_player.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GalleryScreen(),
    );
  }
}

class GalleryScreen extends StatelessWidget {
  final List<GalleryItem> items = [
    GalleryItem(url: 'https://via.placeholder.com/400'),
    GalleryItem(url: 'https://via.placeholder.com/500'),
    GalleryItem(
      child: VideoPlayerWidget(videoUrl: 'https://www.example.com/sample.mp4'),
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Interactive Gallery'),
      ),
      body: InteractiveGallery(
        items: items,
      ),
    );
  }
}

class VideoPlayerWidget extends StatefulWidget {
  final String videoUrl;

  VideoPlayerWidget({required this.videoUrl});

  [@override](/user/override)
  _VideoPlayerWidgetState createState() => _VideoPlayerWidgetState();
}

class _VideoPlayerWidgetState extends State<VideoPlayerWidget> {
  late VideoPlayerController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(widget.videoUrl)
      ..initialize().then((_) {
        setState(() {});
      });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return _controller.value.isInitialized
        ? AspectRatio(
            aspectRatio: _controller.value.aspectRatio,
            child: VideoPlayer(_controller),
          )
        : Center(child: CircularProgressIndicator());
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}