Flutter:photo_view图片预览功能

server/2024/11/25 17:39:31/

导入SDK

photo_view: ^0.15.0

单张图片预览,支持放大缩小

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';...
...class _MyHomePageState extends State<MyHomePage>{@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('标题'),),body: Center(child: PhotoView(imageProvider: const NetworkImage('https://cdn.uviewui.com/uview/swiper/1.jpg'),),),);}
}

多张图片预览,支持放大缩小,滑动显示

class _MyHomePageState extends State<MyHomePage>{var bannerList = ['https://cdn.uviewui.com/uview/swiper/1.jpg','https://cdn.uviewui.com/uview/swiper/2.jpg','https://cdn.uviewui.com/uview/swiper/3.jpg',];int _current = 0;@overrideWidget build(BuildContext context) {return Stack(children: [Scaffold(appBar: AppBar(title: const Text('标题'),),body: Center(child: PhotoViewGallery.builder(itemCount: bannerList.length,builder: (context,index){return PhotoViewGalleryPageOptions(imageProvider: NetworkImage(bannerList[index]));},onPageChanged: ((index){setState(() {_current = index;print('图片滑动触发:$_current');});}),pageController: PageController(initialPage: _current), // 可以配置默认显示第几张图片)),),Positioned(left: 0,bottom: 0,right: 0,child: Container(alignment: Alignment.center,child: Text('${_current+1}/${bannerList.length}',style: TextStyle(fontSize: 20,color: Colors.white,decoration: TextDecoration.none),),))],);}
}

在这里插入图片描述


http://www.ppmy.cn/server/144856.html

相关文章

图片生成视频-右进

右侧进入 ffmpeg -loop 1 -i image.jpg -f lavfi -i colorcblack:s1280x720:d20 -filter_complex "[1:v]formatrgba[bg];[0:v]formatrgba,scale1280:720[img];[bg][img]overlayxif(lt(t,3),W,if(lt(t,8),W-(t-3)*W/5,0)):y(H-h)/2:enablegte(t,3)" -c:v libx264 -t 2…

Vite基本概要

一、Vite 简介 Vite 是一种新型的前端构建工具&#xff0c;旨在为现代 web 开发提供更快、更精简的开发体验。它由尤雨溪&#xff08;Vue.js 的作者&#xff09;团队开发&#xff0c;在当下的前端项目中被广泛应用&#xff0c;尤其适合基于现代 JavaScript 框架&#xff08;如 …

【AIGC】破解ChatGPT!如何使用高价值提示词Prompt提升响应质量

文章目录 为什么高价值提示词如此重要&#xff1f;&#x1f50d;1.1 提升响应的相关性和准确性1.2 节省时间与资源1.3 增强用户体验 了解ChatGPT的工作原理&#x1f9e0;2.1 语言模型的训练过程2.2 上下文理解与生成2.3 限制与挑战 高价值提示词的核心要素✍️3.1 清晰明确的指…

CSS 3D球形旋转

csshtml即可实现3D球形旋转效果你敢信&#xff1f;你可以信&#xff01;废话不多说&#xff0c;直接上代码&#xff01; <html> <head> </head> <body> <div id"box-preserve-3d"><div class"ball-center-x"></div…

3349、检测相邻递增子数组 Ⅰ

3349、[简单] 检测相邻递增子数组 Ⅰ 1、题目描述 给你一个由 n 个整数组成的数组 nums 和一个整数 k&#xff0c;请你确定是否存在 两个 相邻 且长度为 k 的 严格递增 子数组。具体来说&#xff0c;需要检查是否存在从下标 a 和 b (a < b) 开始的 两个 子数组&#xff0c…

FIber + webWorker

文章目录 Fiber主要功能解决的问题如何解决 webworker 多线程作用使用注意点使用1 主线程3 Worker 加载脚本4 错误处理5 关闭 Worker 数据通信 Fiber 主要功能 为每个增加了优先级&#xff0c;优先级高的任务可以中断低优先级的任务。然后再重新执行优先级低的任务增加了异步…

TCP为什么需要三次握手?两次握手或四次握手可以吗?

&#xff08;1&#xff09;三次握手可以保证双方具有接收和发送的能力 第一次握手服务端可以确认客户端的发送能力和服务端的接收能力是正常的&#xff1b;第二次握手客户端可以确认客户端和服务端的收发能力是正常的&#xff0c;但是服务端无法确认客户端的接收能力是正常的&…

使用php和Xunsearch提升音乐网站的歌曲搜索效果

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons&#xff1a;JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram&#xff0c;自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 &#xff1f; 5 IDEA必装的插件&…