Flutter图片轮播展示插件swipe_image_gallery的使用

插件介绍

swipe_image_gallery 是一个Flutter插件，它提供了一个可滚动、可通过滑动关闭并且可以缩放的画廊。该画廊主要用于图片展示，但也可以添加动态覆盖层，并且支持不同类型的小部件。

安装

在你的pubspec.yaml文件中添加swipe_image_gallery作为依赖项：

dependencies:
  swipe_image_gallery: ^latest_version

请将latest_version替换为最新版本号，你可以在pub.dev上查看最新的版本信息。

使用方法

使用图片小部件列表

你可以通过传递一个包含Image小部件的列表来创建一个图片画廊：

final assets = const [
  Image(image: AssetImage('assets/1.jpeg')),
  Image(image: AssetImage('assets/2.jpeg')),
  Image(image: AssetImage('assets/3.jpeg')),
  Image(image: AssetImage('assets/4.jpeg')),
];

// 在需要展示的地方调用
SwipeImageGallery(
  context: context,
  children: assets,
).show();

使用普通小部件列表

除了图片，还可以使用其他类型的小部件来构建画廊：

final widgets = [
  Container(
    color: Colors.white,
    child: Center(
      child: Text('First Page', style: TextStyle(fontSize: 24.0)),
    ),
  ),
  Container(
    color: Colors.grey,
    child: Center(
      child: Text('Second Page', style: TextStyle(fontSize: 24.0)),
    ),
  ),
];

// 展示
SwipeImageGallery(
  context: context,
  children: widgets,
).show();

使用Builder构建

如果不想一次性加载所有图片，可以通过itemBuilder按需加载：

final urls = [
  'https://via.placeholder.com/400',
  'https://via.placeholder.com/800',
  'https://via.placeholder.com/900x350',
  'https://via.placeholder.com/1000',
  'https://via.placeholder.com/100',
];

// 展示
SwipeImageGallery(
  context: context,
  itemBuilder: (context, index) {
    return Image.network(urls[index]);
  },
  itemCount: urls.length,
).show();

添加覆盖层

为了增强用户体验，可以为画廊添加覆盖层，例如显示当前页码等信息：

StreamController<Widget> overlayController = StreamController<Widget>.broadcast();

@override
void dispose() {
  overlayController.close();
  super.dispose();
}

// 创建并展示带覆盖层的画廊
SwipeImageGallery(
  context: context,
  children: remoteImages,
  onSwipe: (index) {
    overlayController.add(OverlayExample(
      title: '${index + 1}/${remoteImages.length}',
    ));
  },
  overlayController: overlayController,
  initialOverlay: OverlayExample(
    title: '1/${remoteImages.length}',
  ),
).show();

英雄动画（Hero Animation）

为了实现平滑过渡效果，可以结合英雄动画使用：

final heroProperties = [
  ImageGalleryHeroProperties(tag: 'imageId1'),
  ImageGalleryHeroProperties(tag: 'imageId2'),
];

final assets = const [
  Image(image: AssetImage('assets/1.jpeg')),
  Image(image: AssetImage('assets/2.jpeg')),
];

Row(
  children: [
    Expanded(
      child: InkWell(
        onTap: () => SwipeImageGallery(
          context: context,
          children: assets,
          heroProperties: heroProperties,
        ).show(),
        child: Hero(
          tag: 'imageId1',
          child: Image(
            image: AssetImage('assets/1.jpeg'),
          ),
        ),
      ),
    ),
    Expanded(
      child: InkWell(
        onTap: () => SwipeImageGallery(
          context: context,
          children: assets,
          initialIndex: 1,
          heroProperties: heroProperties,
        ).show(),
        child: Hero(
          tag: 'imageId2',
          child: Image(
            image: AssetImage('assets/2.jpeg'),
          ),
        ),
      ),
    ),
  ],
),

示例代码

以下是一个完整的示例应用，展示了如何集成上述功能：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:swipe_image_gallery/swipe_image_gallery.dart';

void main() {
  runApp(const ImageGalleryExampleApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Gallery Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ImageGalleryExamplesPage(
        title: 'Image Gallery Demo Home Page',
      ),
    );
  }
}

final urls = [
  'https://picsum.photos/400?image=9',
  'https://picsum.photos/800?image=1',
  'https://picsum.photos/900/350?image=2',
  'https://picsum.photos/1000?image=7',
  'https://picsum.photos/100?image=4',
];

final remoteImages = urls.map((url) => Image.network(url)).toList();

const assets = [
  Image(image: AssetImage('assets/1.jpeg')),
  Image(image: AssetImage('assets/2.jpeg')),
  Image(image: AssetImage('assets/3.jpeg')),
  Image(image: AssetImage('assets/4.jpeg')),
];

final widgets = [
  Container(
    color: Colors.white,
    child: const Center(
      child: Text('First Page', style: TextStyle(fontSize: 24.0)),
    ),
  ),
  Container(
    color: Colors.grey,
    child: const Center(
      child: Text('Second Page', style: TextStyle(fontSize: 24.0)),
    ),
  ),
];

class ImageGalleryExamplesPage extends StatefulWidget {
  const ImageGalleryExamplesPage({super.key, required this.title});
  final String title;

  @override
  State<ImageGalleryExamplesPage> createState() => _ImageGalleryExamplesPageState();
}

class _ImageGalleryExamplesPageState extends State<ImageGalleryExamplesPage> {
  StreamController<Widget> overlayController = StreamController<Widget>.broadcast();

  @override
  void dispose() {
    overlayController.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        padding: const EdgeInsets.all(16.0),
        child: ListView(
          children: [
            ElevatedButton(
              onPressed: () async {
                await SwipeImageGallery(
                  context: context,
                  children: remoteImages,
                  onSwipe: (index) {
                    overlayController.add(Text('${index + 1}/${remoteImages.length}'));
                  },
                  overlayController: overlayController,
                  initialOverlay: Text('1/${remoteImages.length}'),
                  backgroundOpacity: 0.5,
                ).show();

                debugPrint('DONE');
              },
              child: const Text('Open Gallery With Overlay'),
            ),
            ElevatedButton(
              onPressed: () => SwipeImageGallery(
                context: context,
                children: remoteImages,
                initialIndex: 2,
              ).show(),
              child: const Text('Open Gallery With URLs'),
            ),
            ElevatedButton(
              onPressed: () => SwipeImageGallery(
                context: context,
                children: widgets,
              ).show(),
              child: const Text('Open Gallery With Widgets'),
            ),
            ElevatedButton(
              onPressed: () => SwipeImageGallery(
                context: context,
                children: assets,
              ).show(),
              child: const Text('Open Gallery With Assets'),
            ),
            ElevatedButton(
              onPressed: () => SwipeImageGallery(
                context: context,
                itemBuilder: (context, index) {
                  return Image.network(urls[index]);
                },
                itemCount: urls.length,
                // ignore: avoid_print
                onSwipe: (index) => print(index),
              ).show(),
              child: const Text('Open Gallery With Builder'),
            ),
            ElevatedButton(
              onPressed: () => SwipeImageGallery(
                context: context,
                children: remoteImages,
                initialIndex: 2,
                scrollDirection: Axis.vertical,
              ).show(),
              child: const Text('Open Vertical Gallery'),
            ),
            const Text('Hero Animation Example'),
            InkWell(
              onTap: () => SwipeImageGallery(
                context: context,
                children: [assets[0]],
                heroProperties: [
                  const ImageGalleryHeroProperties(tag: 'imageId1')
                ],
              ).show(),
              child: const Hero(
                tag: 'imageId1',
                child: Image(
                  image: AssetImage('assets/1.jpeg'),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

以上就是swipe_image_gallery插件的基本使用指南和完整示例代码。希望这能帮助到你！如果你有任何问题或需要进一步的帮助，请随时提问。