flutter 选择图片 用九宫格显示图片，右上角X删除选择图片，点击查看图片放大缩小，在多张图片可以左右滑动查看图片

flutter 选择图片 用九宫格显示图片，右上角X删除选择图片，点击查看图片放大缩小，在多张图片可以左右滑动查看图片

************ 暂无压缩图片功能 *********

显示图片 —

import 'dart:io';

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

///图片选择和查看图片
class ImageSelectorGrid extends StatefulWidget {
  @override
  _ImageSelectorGridState createState() => _ImageSelectorGridState();
}

class _ImageSelectorGridState extends State<ImageSelectorGrid> {
  final ImagePicker _picker = ImagePicker();
  List<File> selectedImages = [];
  int maxImages = 9; // 最大允许选择的图片数量

  Future<void> _pickImages2() async {
    //暂时没有限制
    final pickedFiles = await _picker.pickMultiImage(limit: 2);
    if (pickedFiles.isNotEmpty) {
      setState(() {
        selectedImages.addAll(pickedFiles.map((f) => File(f.path)));
      });
    }
  }

  ///选取9张
  Future<void> _pickImages() async {
    final pickedFiles = await _picker.pickMultiImage();
    List<XFile> list =
        pickedFiles.take(maxImages - selectedImages.length).toList();
    if (list.isNotEmpty) {
      setState(() {
        selectedImages.addAll(list.map((f) => File(f.path)));
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3, // 九宫格布局
        crossAxisSpacing: 8.0,
        mainAxisSpacing: 8.0,
      ),
      itemCount: (selectedImages.length >= 9)
          ? selectedImages.length
          : selectedImages.length + 1, // +1 表示加号按钮
      itemBuilder: (context, index) {
        if (index == selectedImages.length) {
          // 最后一个位置放加号按钮
          return GestureDetector(
            onTap: _pickImages,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8.0),
                color: Colors.grey[200], // 设置背景颜色
              ),
              child: const Center(
                child: Icon(Icons.add, size: 40, color: Colors.blue), // 加号图标
              ),
            ),
          );
        } else {
          return Stack(
            children: [
              GestureDetector(
                onTap: () {
                  // 如果有多张图片，使用 PhotoView 支持滑动切换
                  final PageController controller =
                      PageController(initialPage: index);
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => Scaffold(
                        appBar: AppBar(
                          title: const Text('图片预览'),
                        ),
                        body: PageView.builder(
                          controller: controller,
                          // 使用 PageController 控制初始页面
                          itemCount: selectedImages.length,
                          onPageChanged: (int page) {},
                          itemBuilder: (context, pageIndex) {
                            return Hero(
                              tag: 'image_$pageIndex',
                              child: PhotoView(
                                imageProvider: FileImage(
                                    File(selectedImages[pageIndex].path)),
                              ),
                            );
                          },
                        ),
                      ),
                    ),
                  );

                  /// 点击图片查看大图 --- 单张图
                  // Navigator.push(
                  //   context,
                  //   MaterialPageRoute(
                  //     builder: (context) => PhotoView(
                  //       imageProvider: FileImage(selectedImages[index]),
                  //     ),
                  //   ),
                  // );
                },
                child: Container(
                  decoration: BoxDecoration(
                    //border: Border.all(color: Colors.blue, width: 2.0), // 添加蓝色边框
                    borderRadius: BorderRadius.circular(8.0), // 添加圆角
                    image: DecorationImage(
                      image: FileImage(selectedImages[index]),
                      fit: BoxFit.cover, // 将图片适应容器
                    ),
                  ),
                ),
              ),
              Positioned(
                top: 5.0,
                right: 5.0,
                child: GestureDetector(
                  onTap: () => _handleIconTap(index),
                  child: const Icon(Icons.clear, size: 30, color: Colors.red),
                ),
              ),
            ],

            /* Image.file(
              selectedImages[index],
              fit: BoxFit.cover, // 将图片适应容器
            ),*/
          );
        }
      },
    );
  }

  // 处理图标点击事件
  void _handleIconTap(int index) {
    // 这里可以添加图标点击后要执行的操作，例如删除图片等
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('操作提示'),
        content: Text('是否删除这张图片？'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('取消'),
          ),
          TextButton(
            onPressed: () {
              setState(() {
                selectedImages.removeAt(index);
              });
              Navigator.pop(context);
            },
            child: const Text('删除'),
          ),
        ],
      ),
    );
  }
}

添加插件

需要自己添加权限申请

  #选择图片
  image_picker: ^1.0.4
  #查看图片
  photo_view: ^0.14.0