Flutter:photo_view图片预览功能

导入SDK

js 复制代码
photo_view: ^0.15.0

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

js 复制代码
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'),
        ),
      ),
    );
  }
}

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

js 复制代码
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),),
          )
        )
      ],
    );
  }
}
相关推荐
coding随想11 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
问道飞鱼15 分钟前
【移动端知识】移动端多 WebView 互访方案:Android、iOS 与鸿蒙实现
android·ios·harmonyos·多webview互访
然我39 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子44 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
aningxiaoxixi1 小时前
Android 之 audiotrack
android
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
DanB241 小时前
html复习
javascript·microsoft·html
Cao_Shixin攻城狮5 小时前
Flutter运行Android项目时显示java版本不兼容(Unsupported class file major version 65)的处理
android·java·flutter
呼啦啦呼啦啦啦啦啦啦8 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
idjl9 小时前
Mysql测试题
android·adb