Flutter PageView点击图片如何实现全屏查看功能？

我用PageView组件展示图片，想实现点击图片时打开全屏查看的功能，请问该怎么实现？我的代码如下：

class BannerItem extends StatelessWidget {
  final AppBanner appBanner;
  const BannerItem({Key? key, required this.appBanner}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 14.0),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20.0),
          image: DecorationImage(
              image: NetworkImage(appBanner.url), fit: BoxFit.cover)),
    );
  }
}

效果如图：

实现方案 #

1. 给图片添加点击触发逻辑 #

用GestureDetector把原有的Container包裹起来，点击时跳转到全屏预览页面：

修改BannerItem的build方法：

@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTap: () {
      // 跳转至全屏预览页，传入当前图片的URL
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => FullScreenImageViewer(imageUrl: appBanner.url),
        ),
      );
    },
    child: Container(
      margin: EdgeInsets.symmetric(horizontal: 14.0),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20.0),
          image: DecorationImage(
              image: NetworkImage(appBanner.url), fit: BoxFit.cover)),
    ),
  );
}

2. 编写全屏预览页面 #

新建一个FullScreenImageViewer组件，实现全屏黑底显示图片，支持点击返回和手势缩放：

class FullScreenImageViewer extends StatelessWidget {
  final String imageUrl;
  const FullScreenImageViewer({Key? key, required this.imageUrl}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: GestureDetector(
        // 点击任意区域返回原页面
        onTap: () => Navigator.pop(context),
        child: Center(
          child: InteractiveViewer(
            // 开启图片缩放、拖动功能
            panEnabled: true,
            scaleEnabled: true,
            child: Image.network(
              imageUrl,
              fit: BoxFit.contain,
            ),
          ),
        ),
      ),
    );
  }
}

3. 进阶：支持多图全屏切换（可选） #

如果你的PageView是展示一组图片，可以传递整个图片列表和当前索引，实现全屏时左右滑动切换图片：

修改BannerItem的点击逻辑（需父组件传入图片列表和当前索引）

// 假设父组件持有List<AppBanner> banners列表和currentIndex当前索引
GestureDetector(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => FullScreenImageListViewer(
          banners: banners,
          initialIndex: currentIndex,
        ),
      ),
    );
  },
  child: Container(/* 原有代码 */),
)

编写多图全屏预览页面

class FullScreenImageListViewer extends StatefulWidget {
  final List<AppBanner> banners;
  final int initialIndex;
  const FullScreenImageListViewer({
    Key? key,
    required this.banners,
    required this.initialIndex,
  }) : super(key: key);

  @override
  State<FullScreenImageListViewer> createState() => _FullScreenImageListViewerState();
}

class _FullScreenImageListViewerState extends State<FullScreenImageListViewer> {
  late PageController _pageController;

  @override
  void initState() {
    super.initState();
    // 初始化PageController，跳转到当前点击的图片位置
    _pageController = PageController(initialPage: widget.initialIndex);
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: GestureDetector(
        onTap: () => Navigator.pop(context),
        child: PageView.builder(
          controller: _pageController,
          itemCount: widget.banners.length,
          itemBuilder: (context, index) {
            return InteractiveViewer(
              child: Image.network(
                widget.banners[index].url,
                fit: BoxFit.contain,
              ),
            );
          },
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者st4tic