• 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);
    }
    
  • 相关阅读:
    SAXParseException;前言中不允许有内容的错误
    FATAL Alert:BAD_CERTIFICATE
    DB2的递归
    在Unity中针对屏幕自适应,我们该如何做呢?
    原码与反码的区别?
    在Unity 3D中加入Image图片
    你的外接键盘的小键盘在Num Lock键亮着的,但是数字按了不能用,解决办法在这里
    唯美英文(一)
    如何使用gcc编译器
    C++中const的用法
  • 原文地址:https://www.cnblogs.com/seliote/p/14525914.html
Copyright © 2020-2023  润新知