Flutter实现点击抽屉图片打开全屏可切换滑块的方案

需求：点击抽屉内图片列表中的某张图片时，关闭抽屉并打开全屏图片滑块，支持直接在滑块中切换图片。

修改后的GetImages组件 #

通过添加点击回调，将图片点击事件传递给父组件：

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class GetImages extends StatefulWidget {
  // 新增：图片点击回调，传递点击索引和图片列表
  final Function(int index, List<String> images)? onImageTap;
  
  const GetImages({super.key, this.onImageTap});

  @override
  State<GetImages> createState() => _GetImagesState();
}

class _GetImagesState extends State<GetImages> {
  List<String> imagePaths = [];
  
  @override
  void initState() {
    _initImages();
    super.initState();
  }

  Future _initImages() async {
    final Map<String, dynamic> assets =
        jsonDecode(await rootBundle.loadString('AssetManifest.json'));

    setState(() {
      imagePaths = assets.keys
          .where((String key) => key.contains('photos/'))
          .where((String key) => key.contains('.JPG'))
          .toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      return GridView.count(
        crossAxisCount: constraints.maxWidth > 700 ? 4 : 2,
        children: imagePaths
            .map(
              (path) => GestureDetector(
                // 给单张图片添加点击监听
                onTap: () {
                  int index = imagePaths.indexOf(path);
                  widget.onImageTap?.call(index, imagePaths);
                },
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 17),
                  child: Image.asset(path),
                ),
              ),
            )
            .toList(),
      );
    });
  }
}

修改后的SideBar组件 #

接收图片点击事件，先关闭抽屉再打开全屏滑块：

import 'package:flutter/material.dart';
import 'package:myapp/widgets/get_images.dart';
import 'package:image_viewer/image_viewer.dart';

class SideBar extends StatelessWidget {
  const SideBar({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: const Center(
        child: Text('My Page!'),
      ),
      drawer: Drawer(
        child: GetImages(
          onImageTap: (index, images) {
            // 1. 关闭抽屉
            Navigator.pop(context);
            // 2. 打开全屏图片滑块，传入所有图片并设置初始显示索引
            ImageViewer.showImageSlider(
              images: images,
              startIndex: index,
            );
          },
        ),
      ),
    );
  }
}

关键修改说明 #

• 给GetImages新增回调函数onImageTap，实现子组件到父组件的事件传递
• 用GestureDetector包裹每张图片，单独监听点击事件，而非给整个GetImages加全局点击
• 在回调中先执行Navigator.pop(context)关闭抽屉，再调用图片滑块组件，传入完整图片列表和初始索引，确保滑块支持图片切换

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