美文网首页
flutter 图片放大,图片详情,图片轮播

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

作者: 曾经也是个少年 | 来源:发表于2020-04-03 13:55 被阅读0次

先上图(样式自己调整)


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,
                                );
                              }));

相关文章

网友评论

      本文标题:flutter 图片放大,图片详情,图片轮播

      本文链接:https://www.haomeiwen.com/subject/evyhphtx.html