当前位置：首页 > news >正文

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

news 来源：原创 2025/6/8 13:14:09

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

显示图片 —

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

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

flutter 选择图片用九宫格显示图片，右上角X删除选择图片，点击查看图片放大缩小，在多张图片可以左右滑动查看图片 ************ 暂无压缩图片功能 ********* 显示图片 — import dart:io;import package:flutter/material.dart; import pa…...

编程日记 2025/5/18 10:39:48

机器学习day2-seaborn绘图练习

1.使用tips数据集，创建一个展示不同时间段(午餐/晚餐)账单总额分布的箱线图 import seaborn as sns import matplotlib.pyplot as plt import pandas as pd import numpy as np# 设置主题 sns.set_theme(style"darkgrid")# 设置中文 plt.rcParams[font.s…...

编程日记 2025/5/17 11:04:22

如何优雅地解决AI生成内容粘贴到Word排版混乱的问题？

随着AI工具的广泛应用，越来越多人开始使用AI辅助撰写论文、报告或博客。然而，当我们直接将AI生成的文本复制到Word文档中时，常常会遇到排版混乱、格式异常的问题。这是因为大部分AI输出时默认使用了Markdown格式，而Word对Markdown…...

编程日记 2025/5/29 12:36:26

设计一个食品种类表

需求：设计一个食品种类表，注意食品种类有多层，比如面食下面，面条、方便面，面条下有干面、湿面等一、食品种类表结构设计（food_category） CREATE TABLE food_category (category_id INT IDENT…...

编程日记 2025/5/29 16:10:20

Haply MinVerse触觉3D 鼠标—沉浸式数字操作，助力 3D 设计与仿真

在2025年CES展上，Haply MinVerse触觉3D鼠标凭借创新交互方式引发关注。这款设备为用户与数字环境的互动带来新维度，操作虚拟物体时能感受真实触觉反馈。三维交互与触觉反馈 MinVerse 突破传统鼠标二维限制，增加第三运动轴，实现真…...

编程日记 2025/5/31 10:09:55

神经网络预测评估机制：损失函数详解

文章目录一、引言二、损失函数的引入三、回顾预测算法四、损失函数的形式五、成本函数六、损失函数的定义与作用七、损失函数的重要性注释思维导图一、引言在上一篇文章中，我们了解到神经网络可通过逻辑回归等算法对输入进行预测。而判断预测结果是否准确至关重要…...

编程日记 2025/5/28 15:41:26

PHP实现 Apple ID 登录的服务端验证指南

在 iOS 应用中启用 “通过 Apple 登录”（Sign In with Apple）后，客户端会获取一个身份令牌（identity token）。该令牌是一个JWT（JSON Web Token），需要由服务端验证其真实性和完整性&…...

编程日记 2025/5/5 8:49:18

一、linux系统启动过程操作记录

一、linux系统启动过程经历： 上电–>uboot–>加载内核–>挂载根文件系统–>执行应用程序 uboot等效bootloader，启动过程进行了跳转到固定的位置执行相应的代码初始化硬件设备，如：cpu初始化 ，看门狗&a…...

编程日记 2025/5/30 10:12:42

【首款Armv9开源芯片“星睿“O6测评】SVE2指令集介绍与测试

SVE2指令集介绍与测试一、什么是SVE2 在Neon架构扩展（其指令集向量长度固定为128位）的基础上，Arm设计了可伸缩向量扩展（Scalable vector extension， SVE）。SVE是一种新的单指令多数据（SIMD&am…...

编程日记 2025/6/4 17:22:39

获取电脑mac地址

Windows 系统方法1：通过命令提示符 1. 按下 `Win + R`，输入 `cmd` 后按回车，打开命令提示符。 2. 输入以下命令并按回车：...

编程日记 2025/5/29 10:40:03

AI核心技术与应用场景的深度解析

AI核心技术与应用场景的深度解析在互联网大厂Java求职者的面试中，经常会被问到关于AI核心技术与应用场景的问题。本文通过一个故事场景来展示这些问题的实际解决方案。第一轮提问面试官：马架构，欢迎来到我们公司的面试现场。请问您对AI…...

编程日记 2025/5/29 12:44:18

练习普通话，声音细柔和

《繁星》我爱月夜，但我也爱星天。从前在家乡七八月的夜晚，在庭院里纳凉的时候，我最爱看天上密密麻麻的繁星。望着星天，我就会忘记一切，仿佛回到了母亲的怀里似的。三年前在南京我住的地方，有…...

编程日记 2025/5/14 8:21:24

Linux进程详细解析

1.操作系统概念任何计算机系统都包含⼀个基本的程序集合，称为操作系统(OS)。笼统的理解，操作系统包括： • 内核（进程管理，内存管理，文件管理，驱动管理） • 其他程序&#xff08…...

编程日记 2025/5/27 17:34:02

Linux执行脚本报错

执行脚本报错：./startup.sh -bash: ./startup.sh: /bin/bash^M: bad interpreter: No such file or directory ./startup.sh -bash: ./startup.sh: /bin/bash^M: bad interpreter: No such file or directory可能的原因： 文件开头格式问题&#xff1a…...

编程日记 2025/5/18 1:07:33

C++学习：六个月从基础到就业——模板编程：类模板

C学习：六个月从基础到就业——模板编程：类模板本文是我C学习之旅系列的第三十三篇技术文章，也是第二阶段"C进阶特性"的第十一篇，主要介绍C中的类模板编程。查看完整系列目录了解更多内容。目录引言类模板的基本语法…...

编程日记 2025/5/29 16:18:29

Conda 虚拟环境复用

文章目录一、导出环境配置二、克隆环境配置三、区别小结一、导出环境配置导出：将当前虚拟环境导出成一个yml配置文件。conda activate your_env conda env export > your_env.yml导入：基于yml文件创建新环境，会自动按照yml里的配置&am…...

编程日记 2025/5/7 8:29:40

Nacos简介—4.Nacos架构和原理三

大纲 1.Nacos的定位和优势 2.Nacos的整体架构 3.Nacos的配置模型 4.Nacos内核设计之一致性协议 5.Nacos内核设计之自研Distro协议 6.Nacos内核设计之通信通道 7.Nacos内核设计之寻址机制 8.服务注册发现模块的注册中心的设计原理 9.服务注册发现模块的注册中心的服务数…...

编程日记 2025/6/1 9:56:42

4月27日日记

现在想来，可以想到什么就记录下来，这也是网上写日记的一个好处，然后今天英语课上看到一个有关迷信的视频，就是老师课件里的，感觉画风很不错，但是我贫瘠的语言形容不出来，就想到是不是世界上的…...

编程日记 2025/5/20 12:45:08

CentOS7.9安装OpenSSL 1.1.1t和OpenSSH9.9p1

一、临时开启telnet登录方式，避免升级失败无法登录系统 （注意telnet登录方式存在安全隐患，升级openssh相关服务后要记得关闭） 1.安装telnet服务 yum -y install xinetd telnet* 2.允许root用户通过telnet登陆，编辑…...

编程日记 2025/6/3 20:37:23

单例模式：全局唯一性在软件设计中的艺术实践

引言在软件架构设计中，单例模式（Singleton Pattern）以其独特的实例控制能力，成为解决资源复用与全局访问矛盾的经典方案。该模式通过私有化构造方法、静态实例存储与全局访问接口三大核心机制，确保系统中特定类仅存在…...

编程日记 2025/5/29 10:34:52

Spring 与 ActiveMQ 的深度集成实践（三）

五、实战案例分析 5.1 案例背景与需求假设我们正在开发一个电商系统，其中订单模块和库存模块是两个独立的子系统。当用户下单后，订单模块需要通知库存模块进行库存扣减操作。在传统的同步调用方式下，订单模块需要等待库存模块完成扣减操…...

编程日记 2025/5/3 9:01:52

30-算法打卡-字符串-重复的子字符串-leetcode(459)-第三十天

1 题目地址 459. 重复的子字符串 - 力扣（LeetCode）459. 重复的子字符串 - 给定一个非空的字符串 s ，检查是否可以通过由它的一个子串重复多次构成。示例 1:输入: s "abab"输出: true解释: 可由子串 "ab" 重复两次构成…...

编程日记 2025/5/27 5:59:30

rocketmq一些异常记录

rocketmq一些异常记录 Product 设置不重复发送发送一次失败，不会在被发送到mq消息队列中，相当于消息丢失。 2、 Consumer 消费失败重试三次消费都失败则消息消费失败，失败后会放入死信队列，可以手动处理在mq面板处理死信队…...

编程日记 2025/5/18 0:15:40

SQLMesh 测试自动化：提升数据工程效率

在现代数据工程中，确保数据模型的准确性和可靠性至关重要。SQLMesh 提供了一套强大的测试工具，用于验证数据模型的输出是否符合预期。本文将深入探讨 SQLMesh 的测试功能，包括如何创建测试、支持的数据格式以及如何运行和调试测试。 SQLMesh …...

编程日记 2025/5/28 7:55:45

WPF使用SQLite与JSON文本文件结合存储体侧平衡数据的设计与实现

✅作者简介：2022年博客新星第八。热爱国学的Java后端开发者，修心和技术同步精进。 🍎个人主页：Java Fans的博客 🍊个人信条：不迁怒，不贰过。小知识，大智慧。 💞当前专栏…...

编程日记 2025/5/28 7:07:52

关系型数据库PostgreSQL vs MySQL 深度对比：专业术语+白话解析+实战案例

PostgreSQL 与 MySQL 的详细对比 PostgreSQL 和 MySQL 是两种最流行的开源关系型数据库，它们在设计理念、功能特性和适用场景上有显著差异。以下是它们的详细对比： 一、基本架构与设计理念 PostgreSQL：多进程架构，使用共享内存通…...

编程日记 2025/5/30 8:35:13

利用 SSRF 和 Redis 渗透

环境搭建在本次实验中，我们使用 Docker 环境进行测试。解压实验包，搭建 docker 环境。 docker环境 web的dockerfile 主要利用代码 ： redis服务器通过 docker-compose up -d 启动相关容器，初次启动失败。发现 docker 版本问…...

编程日记 2025/5/29 20:15:27

脏读、幻读、可重复读

脏读定义：一个事务读取了另一个事务尚未提交的数据。比如事务 A 修改了某条数据但还没提交，此时事务 B 读取了这条被修改但未提交的数据。若事务 A 后续回滚，事务 B 读到的数据就是无效的，相当于读到了 “脏数据”。危害&#…...

编程日记 2025/5/3 23:34:14

第1讲、#PyTorch教学环境搭建与Tensor基础操作详解

引言 PyTorch是当前深度学习领域最流行的框架之一，因其动态计算图和直观的API而备受开发者青睐。本文将从零开始介绍PyTorch的环境搭建与基础操作，适合各种平台的用户和深度学习初学者。 1. 安装和环境搭建 macOS (Apple Silicon) 对于Mac M1/M2/M3用…...

编程日记 2025/5/16 13:39:59

【创新实训个人博客】数据库搭建

1.原因为了降低模型使用以前训练的数据或者幻觉知识，我们在对话时需要提供相关内容的数据，同时由于需要最新的广告实时数据，实时爬取和版权问题。数据由团队在网上爬取，为了广告内容的有效性，如果长期使用&#xff0…...

编程日记 2025/5/28 19:24:42

《代码整洁之道》第6章对象和数据结构 - 笔记

数据抽象 (Data Abstraction) 这个小节主要讲的是**面向对象编程（OOP）**的一种核心思想：对象应该隐藏它的内部数据，只暴露可以操作这些数据的“行为”（也就是方法/函数）。大白话： 你创建一个…...

编程日记 2025/5/9 13:57:18

Python判断字符串中是否包含特殊字符

在 Python 中，判断一个字符串是否包含特殊字符可以通过多种方法实现。常见的特殊字符包括空格、感叹号、单引号、括号、星号、加号、逗号、斜杠、冒号、分号、等号、问号、符号、方括号、花括号和 & 符号等。为了判断字符串中是否包含这些特殊字符&#xff0…...

编程日记 2025/5/27 5:23:20

disruptor-spring-boot-start版本优化升级

文章目录 1.前言2.升级内容3.依赖4.总结 1.前言由于之前写了一篇《disruptor-spring-boot-start生产实践导致pod节点CPU爆表100%的问题解决说明》的文章，里面说本地启动没有啥问题，后面我启动之前写的那个测试的controller发现，本地电脑的CP…...

编程日记 2025/5/26 9:58:40

复杂背景下无人机影像小目标检测：MPE-YOLO抗遮挡与抗背景干扰设计

目录一、引言二、挑战和贡献密集小目标和遮挡实时性要求与精度权衡复杂背景三、MPE-YOLO模型细节多级特征集成器（MFI） 感知增强卷积（PEC） 增强范围C2f模块（ES-C2f） 四、Coovally AI模型训…...

编程日记 2025/5/25 0:11:23

项目实战 -- 状态管理

redux基础还记得好久好久之前就想要实现的一个功能吗？ 收起侧边栏折叠菜单，没错，现在才实现因为不是父子通信，所以处理起来相对麻烦一点可以使用状态树或者中间人模式这就需要会redux了 Redux工作流： 异步就…...

编程日记 2025/5/16 11:49:50

基于单片机的智能药盒系统

标题:基于单片机的智能药盒系统内容:1.摘要本文聚焦于基于单片机的智能药盒系统。背景方面，随着人口老龄化加剧，老年人按时准确服药问题愈发凸显，同时现代快节奏生活也使人们容易遗忘服药时间。目的是设计并实现一个能帮助人们按时、按量服…...

编程日记 2025/5/11 14:56:40

【PyCharm- Python- ArcGIS】：安装一个和 ArcGIS 不冲突的独立 Python让PyCharm 使用（解决全过程记录）

之前电脑上安装了anaconda3，python3和arcgis10.2.其中anaconda3带有python3，arcgis10.2自带python2.7。arcgis不能正常使用，之前为了使用arcgis，因此卸载了anaconda3和python3，PyCharm不能正常使用了之前安装的卸载后…...

编程日记 2025/5/13 23:30:18

【C语言干货】回调函数

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、回调函数前言提示：以下是本篇文章正文内容，下面案例可供参考一、回调函数在 C 语言中，当你有一个函数并希望将其作…...

编程日记 2025/5/25 7:58:28

Redis使用总结

NoSQL 1.1为什么要用NoSQL 面对现在用户数据的急剧上升，我们需要对这些用户数据进行挖掘，传统的关系型数据库已经不适合这些应用了.Nosql 的发展可以很了的处理这些大的数据. 1.2什么是NoSQL Not Only Sql->NoSQL(不仅仅是SQL) 非关系型数据库.随…...

编程日记 2025/5/29 8:15:02

现场问题排查-postgresql某表索引损坏导致指定数据无法更新影响卷宗材料上传

问题现象今天突然被拉进一个群，说某地区友商推送编目结果报错，在我们自己的卷宗系统上传材料也一直转圈，也删除不了案件卷宗，重置模板也没用，只有个别案件有问题。虽然这事儿不属于我负责，但还是抽时间给…...

编程日记 2025/5/28 8:04:47

数字化转型的未来趋势：从工具到生态，聚焦生态合作、绿色转型与全球化布局

摘要本文将深入探讨了数字化转型的演进路径，特别是从依赖单一数字化工具向构建和参与复杂商业生态系统的战略转变。分析表明，这一转变不仅是技术升级，更是商业模式、运营逻辑和价值创造方式的根本性变革。云计算、人工智能和大数据分析等 f…...

编程日记 2025/5/6 15:03:31

记录学习记录学习《手动学习深度学习》这本书的笔记（九）

马不停蹄地来到了第十二章：计算性能…… 感觉应该是讲并行计算方面的，比如GPU、CPU、CUDA那些。第十二章：计算性能 12.1 编译器和解释器这里先提出了命令式编程和符号式编程的概念。命令式编程VS符号式编程目前为止，本书…...

编程日记 2025/5/27 6:53:38

麒麟系统通过 Service 启动 JAR 包的完整指南

🧑 博主简介：CSDN博客专家、CSDN平台优质创作者，高级开发工程师，数学专业，10年以上C/C, C#, Java等多种编程语言开发经验，拥有高级工程师证书；擅长C/C、C#等开发语言，熟悉Java常用开…...

编程日记 2025/5/27 16:51:03

【记录maven依赖规则-dependencyManagement，dependencies】

记录maven依赖规则-dependencyManagement，dependencies 依赖方式直接依赖间接依赖依赖关系直接依赖： 父级管理定义的版本，并且在中进行引用了的版本。优先使用dependencyManagement定义的版本。间接依赖： 如果间接依赖…...

编程日记 2025/5/30 19:43:01

macos下mysql 5.7/8.0版本切换

1、首先安装好mysql 5.7/8.0，可以用brew进行安装 5.7 的原始配置文件路径： /usr/local/Cellar/mysql5.7/5.7.44_1/homebrew.mxcl.mysql5.7.plist 配置内容如下： 对应的.cnf配置文件内容如下： 8.0 的原始配置文件路径&#xff1…...

编程日记 2025/5/25 23:04:19

FPGA时钟设计

实现功能：基于Verilog的动态显示时钟设计，支持整点（时:00:00）闪烁功能。代码包含时钟计数、动态扫描、整点检测和闪烁控制模块： module dynamic_clock(input clk, // 主时钟（假设50MHz&#xff0…...

编程日记 2025/5/18 1:28:54

【NVM】管理不同版本的node.js

目录一、下载nvm 二、安装nvm 三、验证安装四、配置下载镜像五、使用NVM 前言：不同的node.js版本会让你在使用过程很费劲，nvm是一个node版本管理工具，通过它可以安装多种node版本并且可以快速、简单的切换node版本。一、下载nvm htt…...

编程日记 2025/5/26 14:21:22

【今日三题】笨小猴(模拟) / 主持人调度(排序) / 分割等和子集(01背包)

⭐️个人主页：小羊 ⭐️所属专栏：每日两三题很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~ 目录笨小猴(模拟)主持人调度(排序)分割等和子集(01背包) 笨小猴(模拟) 笨小猴 #include <iostream> #include <string…...

编程日记 2025/5/7 6:11:36

android10 卸载应用出现回退栈异常问题

打开设置，打开APP1，使用adb uninstall 卸载APP1/或者杀掉APP1进程，没有回到设置而是回到了桌面抓取eventlog，查看ams/wms打印，发现“am_focused_stack: appDied leftTaskHistoryEmpty”源码中搜索“leftTaskHistoryE…...

编程日记 2025/6/1 4:05:52

位置差在坐标系间的相互转换

1 NED转经纬高 （n 系下的北向、东向和垂向位置差异（单位 m）转化为纬度、经度和高程分量的差异） 2 基站坐标转换纬度、经度、高程到 ECEF %纬度、经度、高程到 ECEF clc; clear; glvs; addpath(genpath(E:\GNSSINS\ACES)…...

编程日记 2025/5/29 13:33:25

显示图片 —

添加插件

相关文章：