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)));});}}@overrideWidget 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