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),),
          )
        )
      ],
    );
  }
}
相关推荐
然我几秒前
面试必问:JS 事件机制从绑定到委托,一篇吃透所有考点
前端·javascript·面试
小蜜蜂嗡嗡10 分钟前
flutter封装vlcplayer的控制器
前端·javascript·flutter
AirDroid_cn23 分钟前
OPPO手机怎样被其他手机远程控制?两台OPPO手机如何相互远程控制?
android·windows·ios·智能手机·iphone·远程工作·远程控制
尊治23 分钟前
手机电工仿真软件更新了
android
山河木马1 小时前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
努力只为躺平1 小时前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
Web小助手1 小时前
大保剑:Promise的有趣体验
javascript
李大玄1 小时前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵1 小时前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss