photo_view_wiget.dart 6.12 KB

import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:one_key/res/colors.dart';
import 'package:one_key/utils/pick_date_nonli_gongli/pick_calendar_month.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

//PhotoPreview 点击小图后的效果
class PhotoPreview extends StatefulWidget {
  final int initialIndex;
  final List<String?>? photoList;
  final PageController pageController;
  final bool? isShow;
  final List? dashName;
  final bool needMask;
  final bool needTap;
  final CustomCallBack? callback;

  PhotoPreview(
      {required this.initialIndex,
      this.photoList,
      this.isShow,
      this.dashName,
      this.needMask = true,
      this.needTap = true,
      this.callback})
      : pageController = PageController(initialPage: initialIndex);

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

class _PhotoPreviewState extends State<PhotoPreview> {
  int? currentIndex;

  final _controller = new PageController();

  static const _kDuration = const Duration(milliseconds: 300);

  static const _kCurve = Curves.ease;

  final _kArrowColor = Colors.black.withOpacity(0.8);

  List? tempImgList = [];

  @override
  void initState() {
    currentIndex = widget.initialIndex;
    if (widget.needMask) {
      for (var item in widget.photoList!) {
        tempImgList!.add('$item-zdmask');
      }
    } else {
      tempImgList = widget.photoList;
    }

    print(tempImgList);
    // tempImgList = widget.photoList;
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
          decoration: BoxDecoration(
            color: Colors.black,
          ),
          constraints: BoxConstraints.expand(
            height: MediaQuery.of(context).size.height,
          ),
          child: Stack(
            children: <Widget>[
              InkWell(
                  onTap: () {
                    Navigator.of(context).pop();
                    if (!widget.needTap) {
                      if (widget.callback != null) {
                        widget.callback!(currentIndex);
                      }
                    }
                  },
                  child: Container(
                    // width: ScreenUtil().setWidth(375 * 2),
                    // height: ScreenUtil().setHeight(397 * 2),
                    // margin: EdgeInsets.only(
                    // top: ScreenUtil().setWidth(260),
                    // bottom: ScreenUtil().setWidth(280)),
                    child: PhotoViewGallery.builder(
                      scrollPhysics: const BouncingScrollPhysics(),
                      onPageChanged: onPageChanged,
                      itemCount: tempImgList!.length,
                      reverse: false,
                      loadingBuilder: (context, event) {
                        return UnconstrainedBox(
                          child: SizedBox(
                            width: ScreenUtil().setWidth(80),
                            height: ScreenUtil().setWidth(80),
                            child: CircularProgressIndicator(),
                          ),
                        );
                      },
                      pageController: widget.pageController,
                      builder: (BuildContext context, int index) {
                        return PhotoViewGalleryPageOptions(
                          imageProvider: NetworkImage(tempImgList![index]),
                          minScale: PhotoViewComputedScale.contained * 0.6,
                          maxScale: PhotoViewComputedScale.covered * 1.1,
                          initialScale: PhotoViewComputedScale.contained,
                        );
                      },
                    ),
                  )),
              Positioned(
                  top: ScreenUtil().setWidth(70),
                  left: ScreenUtil().setWidth(40),
                  child: InkWell(
                    onTap: () {
                      Navigator.of(context).pop();
                    },
                    child: Icon(Icons.close, color: Colors.white),
                  )),
            ],
          )),
    );
  }
}

/// An indicator showing the currently selected page of a PageController
class DotsIndicator extends AnimatedWidget {
  DotsIndicator({
    required this.controller,
    this.itemCount,
    this.onPageSelected,
    this.color= Colors.white,
  }) : super(listenable: controller);

  /// The PageController that this DotsIndicator is representing.
  final PageController controller;

  /// The number of items managed by the PageController
  final int? itemCount;

  /// Called when a dot is tapped
  final ValueChanged<int>? onPageSelected;

  /// The color of the dots.
  ///
  /// Defaults to `Colors.white`.
  final Color color;

  // The base size of the dots
  static const double _kDotSize = 4.0;

  // The increase in the size of the selected dot
  static const double _kMaxZoom = 2.0;

  // The distance between the center of each dot
  static const double _kDotSpacing = 18.0;

  Widget _buildDot(int index) {
    double selectedness = Curves.easeOut.transform(
      max(
        0.0,
        1.0 - ((controller.page ?? controller.initialPage) - index).abs(),
      ),
    );
    double zoom = 1.0 + (_kMaxZoom - 1.0) * selectedness;

    return new Container(
      width: _kDotSpacing,
      child: new Center(
        child: new Material(
          color: color,
          type: MaterialType.circle,
          child: new Container(
            width: _kDotSize * zoom,
            height: _kDotSize * zoom,
            child: new InkWell(
              onTap: () => onPageSelected!(index),
            ),
          ),
        ),
      ),
    );
  }

  Widget build(BuildContext context) {
    return new Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: new List<Widget>.generate(itemCount!, _buildDot),
    );
  }
}