flutter 图片放大，图片详情，图片轮播

66 阅读 0 评论 44 点赞

我是靠谱客的博主斯文棉花糖，最近开发中收集的这篇文章主要介绍flutter 图片放大，图片详情，图片轮播，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

先上图（样式自己调整）

image.png

1.新建小部件
根据实际情况修改以下部分内容；

return PhotoViewGalleryPageOptions(
                imageProvider: ImageUtil.getImageProvider(
                      widget.photoList[index].url),
                  minScale: PhotoViewComputedScale.contained * 0.6,
                  maxScale: PhotoViewComputedScale.covered * 1.1,
                  initialScale: PhotoViewComputedScale.contained,
                );

//PhotoPreview 点击小图后的效果
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:midou_ee/utils/image_util.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

class ImageShowServerWidget extends StatefulWidget {
  final int initialIndex;
  final List<dynamic> photoList;
  final PageController pageController;

  ImageShowServerWidget({this.initialIndex, this.photoList})
      : pageController = PageController(initialPage: initialIndex);

  @override
  _ImageShowServerWidgetState createState() => _ImageShowServerWidgetState();
}

class _ImageShowServerWidgetState extends State<ImageShowServerWidget> {
  int currentIndex;

  @override
  void initState() {
    currentIndex = widget.initialIndex;
    super.initState();
  }

  //图片切换
  void onPageChanged(int index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: <Widget>[
          Positioned(
            child: PhotoViewGallery.builder(
              scrollPhysics: const BouncingScrollPhysics(),
              onPageChanged: onPageChanged,
              itemCount: widget.photoList.length,
              pageController: widget.pageController,
              builder: (BuildContext context, int index) {
                return PhotoViewGalleryPageOptions(
                  imageProvider: ImageUtil.getImageProvider(
                      widget.photoList[index].url+'/o.jpg'),
                  minScale: PhotoViewComputedScale.contained * 0.6,
                  maxScale: PhotoViewComputedScale.covered * 1.1,
                  initialScale: PhotoViewComputedScale.contained,
                );
              },
            ),
          ),
          Positioned(
            left: 10,
            top: 60,
            child: GestureDetector(
              child: Row(
                children: <Widget>[
                  Icon(
                    Icons.close,
                    color: Colors.white,
                  ),
                 
                ],
              ),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ),
          Positioned(
              right: 10,
              bottom: 60,
              child: Row(
                children: <Widget>[
                  Text('${currentIndex + 1}',
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 18,
                          decoration: TextDecoration.none,
                          fontWeight: FontWeight.w300)),
                  Text('/',
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 18,
                          decoration: TextDecoration.none,
                          fontWeight: FontWeight.w300)),
                  Text('${widget.photoList.length}',
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 18,
                          decoration: TextDecoration.none,
                          fontWeight: FontWeight.w300))
                ],
              ))
        ],
      ),
    );
  }
}

2.使用(index 为当前点击图片的下标，)

Navigator.of(context)
                                .push(MaterialPageRoute(builder: (context) {
                                return ImageShowServerWidget(
                                  initialIndex: index,
                                  photoList: _list,
                                );
                              }));