zoukankan      html  css  js  c++  java
  • Flutter 图片预览页

    图片预览,显示当前图片索引,单击关闭。

    效果:

    用的 photo_view 库。感觉像个 lib 搬运工。。。

    import 'package:cached_network_image/cached_network_image.dart';
    import 'package:flutter/material.dart';
    import 'package:photo_view/photo_view.dart';
    import 'package:photo_view/photo_view_gallery.dart';
    import '../util/common.dart';
    
    // 页面名称
    const PAGE_VIEWER_NAME = "/page_viewer";
    
    class ImageViewerPage extends StatefulWidget {
      final ImageViewerPageArg _arg;
    
      const ImageViewerPage(this._arg);
      @override
      _ImageViewerPageState createState() => _ImageViewerPageState();
    }
    
    class _ImageViewerPageState extends State<ImageViewerPage> {
      int _currentIndex;
      PageController _pageController;
    
      @override
      void initState() {
        super.initState();
        _currentIndex = widget._arg.initIndex;
        _pageController = PageController(initialPage: widget._arg.initIndex);
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: GestureDetector(
          child: Container(
              child: Stack(
            children: [
              PhotoViewGallery.builder(
                itemCount: widget._arg.images.length,
                builder: (context, index) => PhotoViewGalleryPageOptions(
                    imageProvider: CachedNetworkImageProvider(widget._arg.images[index]),
                    initialScale: PhotoViewComputedScale.contained * 1),
                onPageChanged: (index) {
                  setState(() {
                    _currentIndex = index;
                    debugPrint(_currentIndex.toString());
                  });
                },
                pageController: _pageController,
              ),
              // 底部中间对齐
              Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    margin: EdgeInsets.only(bottom: 16),
                    child: Text(
                      "${_currentIndex + 1}/${widget._arg.images.length}",
                      style: TextStyle(color: Colors.white),
                    ),
                  ))
            ],
          )),
          onTap: () => Navigator.of(context).pop(),
        ));
      }
    }
    
    /// 页面参数,必传
    class ImageViewerPageArg {
      // 初始图片索引
      final int initIndex;
      // 图片地址列表
      final List<String> images;
    
      ImageViewerPageArg(this.initIndex, this.images);
    }
    
  • 相关阅读:
    JDK 9 发布仅数月,为何在生产环境中却频遭嫌弃?
    MyBatis 延迟加载,一级缓存,二级缓存设置
    mysql jdbc url
    idea中模块累积编写
    Idea中通过Git将代码同步到GitHub
    HomeBrew安装及使用
    (二)Java秒杀项目之实现登录功能
    (一)Java秒杀项目之项目环境搭建
    Spring实现构造注入
    Mybatis动态SQL之使用foreach完成复杂查询
  • 原文地址:https://www.cnblogs.com/seliote/p/14525914.html
Copyright © 2011-2022 走看看