滑动图片画廊

一个可滚动的、可通过滑动关闭的、可缩放、可旋转的图片画廊，您可以在其中添加动态叠加层。虽然它旨在用于图片画廊，但也可以使用不同类型的控件。

安装

将 swipe_image_gallery 添加为 pubspec.yaml 文件中的依赖项。

用法

使用图片控件列表

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,
  images: assets,
).show();

Image Widgets

使用构建器

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();

添加叠加层

您可以在 此处 找到 OverlayExample 控件。

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

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

  ...

  SwipeImageGallery(
    context: context,
    images: remoteImages,
    onSwipe: (index) {
      overlayController.add(OverlayExample(
        title: '${index + 1}/${remoteImages.length}',
      ));
    },
    overlayController: overlayController,
    initialOverlay: OverlayExample(
      title: '1/${remoteImages.length}',
    ),
  ).show();

overlay

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,
          images: assets,
          heroProperties: heroProperties,
        ).show(),
        child: Hero(
          tag: 'imageId1',
          child: Image(
            image: AssetImage('assets/1.jpeg'),
          ),
        ),
      ),
    ),
    Expanded(
      child: InkWell(
        onTap: () => SwipeImageGallery(
          context: context,
          images: assets,
          initialIndex: 1,
          heroProperties: heroProperties,
        ).show(),
        child: Hero(
          tag: 'imageId2',
          child: Image(
            image: AssetImage('assets/2.jpeg'),
          ),
        ),
      ),
    ),
  ],
),

hero

有关更详细的示例，您可以查看 示例项目。

GitHub

https://github.com/dbilgin/swipe_image_gallery