Flutter图片展示插件gallery的使用

当然，以下是如何在Flutter项目中使用gallery（或更常见的图片展示插件如photo_view）来展示图片的示例代码。虽然没有一个名为gallery的官方Flutter插件，但photo_view是一个非常流行的图片放大缩小展示插件，可以满足类似的需求。

首先，你需要在pubspec.yaml文件中添加photo_view依赖：

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.14.0  # 请检查最新版本号

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

接下来是一个简单的Flutter应用示例，展示如何使用photo_view来展示图片：

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Photo View Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<String> imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Photo View Gallery Example'),
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 4.0,
          mainAxisSpacing: 4.0,
        ),
        itemCount: imageUrls.length,
        itemBuilder: (BuildContext context, int index) {
          return GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => FullScreenImagePage(imageUrl: imageUrls[index]),
                ),
              );
            },
            child: Image.network(
              imageUrls[index],
              fit: BoxFit.cover,
            ),
          );
        },
      ),
    );
  }
}

class FullScreenImagePage extends StatelessWidget {
  final String imageUrl;

  FullScreenImagePage({required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Full Screen Image'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () => Navigator.pop(context),
        ),
      ),
      body: Center(
        child: PhotoViewGallery.builder(
          scrollPhysics: BouncingScrollPhysics(),
          builder: (BuildContext context, int index) {
            return PhotoViewGalleryPageOptions(
              imageProvider: NetworkImageWithRetry(imageUrl),
              minScale: PhotoViewComputedScale.contained * 0.8,
              maxScale: PhotoViewComputedScale.covered * 3,
            );
          },
          itemCount: 1,
        ),
      ),
    );
  }
}

// 如果图片加载失败需要重试，可以使用这个自定义的 NetworkImageWithRetry 类
class NetworkImageWithRetry extends StatelessWidget {
  final String url;

  NetworkImageWithRetry(this.url);

  @override
  Widget build(BuildContext context) {
    return FadeInImage.memoryNetwork(
      placeholder: kTransparentImage,
      image: url,
      fit: BoxFit.cover,
      fadeInDuration: 300,
      fadeInCurve: Curves.easeInOut,
    );
  }
}

// 透明占位符图片（1x1像素）
final Uint8List kTransparentImage = Uint8List.fromList(
  List.filled(4, 255).concat([0, 0, 0, 0]).toList(),
);

解释

1. 依赖添加：在pubspec.yaml中添加photo_view依赖。
2. 主应用：MyApp和MyHomePage类定义了一个基本的Flutter应用结构。
3. 图片网格：在MyHomePage中，使用GridView.builder来显示一个图片网格。
4. 全屏图片查看：点击网格中的图片时，会导航到一个新的页面FullScreenImagePage，该页面使用PhotoViewGallery.builder来展示全屏图片，并支持缩放和拖动。
5. 网络图片重试：NetworkImageWithRetry是一个自定义的小部件，用于处理网络图片加载失败时的重试逻辑，这里使用FadeInImage.memoryNetwork来实现图片的淡入效果。

这样，你就可以在你的Flutter应用中展示一个图片网格，并且可以通过点击图片来查看全屏并放大缩小的图片了。