Flutter:photo_view图片预览功能

导入SDK

photo_view: ^0.15.0

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

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

...
...

class _MyHomePageState extends State<MyHomePage>{
  @override
  Widget 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;
  @override
  Widget 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),),
          )
        )
      ],
    );
  }
}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/920312.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

第二课 Model模型资源导入设置检查与优化

上期我们学习了最简单的audio音效的优化&#xff0c;接下来我们继续model模型资源的优化&#xff0c;我将汇总各路大神关于模型优化的思路和方法供你和我学习。 首先我们还是要把我们优化的目标重申一遍&#xff1a; 优化的目标 1.文件体积尽可能小 2.内存占用尽可能小 3.…

RabbitMQ实现异步下单与退单

前言&#xff1a; 在电商项目中的支付模块也是一个很重要的模块&#xff0c;其中下订操作以及退订操作就是主要的操作。其次的下单是同步下单&#xff0c;也就是第三方支付、数据库扣减、积分增加、等等其他业务操作&#xff0c;等待全部执行完毕后向用户返回成功响应请求。对…

macOS 无法安装第三方app,启用任何来源的方法

升级新版本 MacOS 后&#xff0c;安装下载的软件时&#xff0c;不能在 ”安全性与隐私” 中找不到 ”任何来源” 选项。 1. 允许展示任何来源 点击 启动器 (Launchpad) – 其他 (Other) – 终端 (Terminal)&#xff1a; 打开终端后&#xff0c;输入以下代码回车&#xff1a; …

微服务即时通讯系统的实现(服务端)----(1)

目录 1. 项目介绍和服务器功能设计2. 基础工具安装3. gflags的安装与使用3.1 gflags的介绍3.2 gflags的安装3.3 gflags的认识3.4 gflags的使用 4. gtest的安装与使用4.1 gtest的介绍4.2 gtest的安装4.3 gtest的使用 5 Spdlog日志组件的安装与使用5.1 Spdlog的介绍5.2 Spdlog的安…

欧洲新车安全评鉴协会(Euro NCAP)2026 年规程的 5 项关键更新

数十年来,欧洲新车安全评鉴协会为全球车辆安全评级树立了黄金标准。该协会向来以引领潮流著称,常常在法规强制要求之前数年就采用新的安全技术。 随着 2026 年欧洲新车安全评鉴协会的更新即将到来,汽车行业急切地想知道需要格外密切关注哪些特性和技术。 尽管欧洲新车安全…

Jenkins迁移数据目录

查看当前容器挂载的目录 [roottest-server01 ~]# docker inspect -f "{{.Mounts}}" jenkins [{bind /etc/localtime /etc/localtime true rprivate} {bind /opt/jenkins_data /var/jenkins_home true rprivate}]复制数据目录到数据盘 [roottest-server01 opt…

利用 TensorFlow Profiler:在 AMD GPU 上优化 TensorFlow 模型

TensorFlow Profiler in practice: Optimizing TensorFlow models on AMD GPUs — ROCm Blogs 简介 TensorFlow Profiler 是一组旨在衡量 TensorFlow 模型执行期间资源利用率和性能的工具。它提供了关于模型如何与硬件资源交互的深入见解&#xff0c;包括执行时间和内存使用情…

二叉树——输出叶子到根节点的路径

目录 代码 算法思想 例子 思维拓展 代码 int LeaveBit(Bitree T,int flag,int g) {if (!T) {return 0;}if (T->rchild NULL && T->lchild NULL) {//cout << "empty:" << T->data << endl;s.push(T->data);while (!s.emp…

PIL学习---彩色RGB图像按通道输出

要将 RGB 图像拆分为单独的 R、G、B 通道并分别展示&#xff0c;可以通过 PIL 中的 split() 方法将图像的三个通道分开&#xff0c;并使用 matplotlib 来显示每个通道的图像。效果如下图所示&#xff1a; 代码部分&#xff1a; from PIL import Image import matplotlib.pypl…

CSS实现实现当文本内容过长时,中间显示省略号...,两端正常展示

HTML 结构解析 文档结构: <ul class"con">: 一个无序列表&#xff0c;包含多个列表项。 每个 <li class"wrap"> 表示一个列表项&#xff0c;内部有两个 <span> 元素&#xff1a; <span class"txt">: 显示文本内容。<…

ROS VRRP软路由双线组网方式

虚拟路由冗余协议 Virtual Router Redundancy Protocol (VRRP)&#xff0c;MikroTik RouteROS VRRP 协议遵循 RFC 2338。 VRRP 协议是保证访问一些资源不会中断&#xff0c;即通过多台路由器组成一个网关集合&#xff0c;如果其中一台路由器出现故障&#xff0c;会自动启用另外…

设计编程网站集:简述可扩展性系统设计(笔记)

视频连接&#xff1a;简述可扩展性系统设计 三个关键原则 无状态 松散耦合 异步处理 扩展 负载均衡 缓存 分片

openCV与eigen两种方法---旋转向量转旋转矩阵

#include <Eigen/Dense> #include <opencv2/core/eigen.hpp> #include <opencv2/opencv.hpp> using namespace cv; using namespace std; int main() {// opencv 旋转向量cv::Vec3d rvec(1.0, 2.0, 3.0);cv::Mat rotation_matrix;cv::Rodrigues(rvec, rotati…

卷积运算和卷积定理

卷积运算 卷积运算是信号处理、图像处理和深度学习中的核心概念&#xff0c;用于表示两个函数之间的相互作用。它将一个函数通过滑动窗口的方式与另一个函数结合&#xff0c;产生一个新的函数&#xff0c;反映两者的重叠程度。 1. 定义 连续信号的卷积&#xff1a; 给定两个连…

【板间连接器焊接】

一、背景 近期工作需要,用到了AX7Z020核心板(黑金),官网链接:https://www.alinx.com/detail/271。 板子打好之后,遇到了焊接问题。对自身焊接技术还是比较自信的,直接上去焊接了2个连接器。拖锡搞了3小时后,放弃了。热风枪1分钟不到就把连接器吹下来了,看引脚90%都是…

低代码开发平台搭建思考与实战

什么是低代码开发平台&#xff1f; 低代码开发平台是一种平台软件&#xff0c;人们能通过它提供的图形化配置功能&#xff0c;快速配置出满足各种特定业务需求的功能软件。 具有以下特点&#xff1a; 提供可视化界面进行程序开发0代码或少量代码快速生成应用 什么是低代码产…

React Native 基础

React 的核心概念 定义函数式组件 import组件 要定义一个Cat组件,第一步要使用 import 语句来引入React以及React Native的 Text 组件: import React from react; import { Text } from react-native; 定义函数作为组件 const CatApp = () => {}; 渲染Text组件

ftdi_sio应用学习笔记 3 - GPIO

目录 1. 查找gpiochip 2. 打开GPIO 2.1 libgpiod库方式 2.2 系统方式 3. 关闭GPIO 3.1 libgpiod库方式 3.2 系统方式 4. 设置方向 4.1 libgpiod库方式 4.2 系统方式 5. 设置GPIO电平 5.1 libgpiod库方式 5.2 系统方式 6. 读取GPIO电平 6.1 libgpiod库方式 6.2 …

微信小程序登录注册页面设计(小程序项目)

需求 在微信小程序设计并实现登录页面&#xff0c;并填写相关登录注册函数 实现效果 代码实现 html代码 <view class"top" style"border-bottom-style: none;background-color:#FF8C69;"><!-- <view class"back" bind:tap"…

神经网络(系统性学习三):多层感知机(MLP)

相关文章&#xff1a; 神经网络中常用的激活函数 神经网络&#xff08;系统性学习一&#xff09;&#xff1a;入门篇 神经网络&#xff08;系统性学习二&#xff09;&#xff1a;单层神经网络&#xff08;感知机&#xff09; 多层感知机&#xff08;MLP&#xff09; 多层感…