Photo_view: Set a different initial position different from center.

Created on 3 Jan 2019  ·  13Comments  ·  Source: fireslime/photo_view

List<Map> imageList = [
  {
    'provider': const NetworkImage(
        "https://img.zcool.cn/community/012c1559b2441ea801211d258355d3.jpg@1280w_1l_2o_100sh.jpg"),
    'tag': 'tag1',
    'fillScale': PhotoViewComputedScale.covered
  },
  {
    'provider': const NetworkImage(
        "http://img.pptjia.com/image/20180117/767f4b74a8d7b453b149430ee364c9ce.jpg"),
    'tag': 'tag2',
    'fillScale': PhotoViewComputedScale.contained
  },
  {
    'provider': const NetworkImage(
        "http://www.hiphotos.baidu.com/image/pic/item/8644ebf81a4c510f3666841a6b59252dd42aa514.jpg"),
    'tag': 'tag3',
    'fillScale': PhotoViewComputedScale.contained
  },
  {
    'provider':
        const NetworkImage("http://www.17qq.com/img_qqtouxiang/30526384.jpeg"),
    'tag': 'tag4',
    'fillScale': PhotoViewComputedScale.contained
  }
];

List<PhotoViewGalleryPageOptions> _takePageOptions(
      List<Map> imageProviderList) {
    return imageProviderList.map(
      (map) {
        return PhotoViewGalleryPageOptions(
          imageProvider: map['provider'],
          minScale: map['fillScale'],
          maxScale: PhotoViewComputedScale.covered * 1.1,
          initialScale: map['fillScale'],
          heroTag: map['tag'],
        );
      },
    ).toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          constraints: BoxConstraints.expand(
            height: MediaQuery.of(context).size.height,
          ),
          child: Stack(
            alignment: Alignment.bottomRight,
            children: <Widget>[
              PhotoViewGallery(
                pageOptions: _takePageOptions(widget.imageList),
                // pageOptions: <PhotoViewGalleryPageOptions>[
                //   PhotoViewGalleryPageOptions(
                //     imageProvider: widget.imageProvider,
                //     heroTag: "tag1",
                //   ),
                //   PhotoViewGalleryPageOptions(
                //       imageProvider: widget.imageProvider2,
                //       heroTag: "tag2",
                //       maxScale: PhotoViewComputedScale.contained * 0.3),
                //   PhotoViewGalleryPageOptions(
                //     imageProvider: widget.imageProvider3,
                //     minScale: PhotoViewComputedScale.contained * 0.8,
                //     maxScale: PhotoViewComputedScale.covered * 1.1,
                //     heroTag: "tag3",
                //   ),
                // ],
                loadingChild: widget.loadingChild,
                backgroundDecoration: widget.backgroundDecoration,
                pageController: widget.pageController,
                onPageChanged: onPageChanged,
              ),
              Container(
                padding: const EdgeInsets.all(20.0),
                child: Text(
                  "Image ${currentIndex + 1}",
                  style: const TextStyle(
                      color: Colors.white, fontSize: 17.0, decoration: null),
                ),
              )
            ],
          )),
    );
  }
PhotoView Controller enhancement

Most helpful comment

We have added the option basePosition in #89 .

All 13 comments

And I set zhe code in photo_view_image_wrapper is invalid

Widget _buildChild() {
    return widget.customChild == null
        ? Image(
            image: widget.imageProvider,
            gaplessPlayback: widget.gaplessPlayback,
            fit: BoxFit.contain,
            alignment: Alignment.topCenter,
          )
        : widget.customChild;
  }

I can't quite understand your issue. What is this about? A bug, a request?
Could you explain better your problem?

ok,this is a request. when I set zhe [PhotoViewGallery pageOptions initialScale]`s value is PhotoViewComputedScale.covered, and set image like (https://img.zcool.cn/community/012c1559b2441ea801211d258355d3.jpg@1280w_1l_2o_100sh.jpg) [a very long vertical image],zhe Photo_View show me zhe image center, I want show zhe top at zhe initial state , what should I do?

Currently, Photoview has no support to set the image automatically to a position different from the center. Ideally, this should be available in future releases where we could customize photo view behavior through a controller pattern (just like TextEditorController).

To achieve the desired behavior, I would recommend you to put the image in a CustomScrollView.

There is still a request. When PageView slides to the margin in the zooming state, you can continue to slide to the next image. What should I do?

Having a controller to manage the image position somewhere other than the center would be a great feature.

We have added the option basePosition in #89 .

Cool! Is there any ETA for the release of #89 ?

As soon as I get back home and finish tests. Could you help me with unity tests, @iNima?

Do you mean "unit" tests?
Yes, I'd like to help. I have not found any unit test in the repo.
Do you like me to write some unit tests for the project?

Wow...How to use the controller,now? @renancaraujo @iNima I set the basePostion centerTop. The long vertical image cann't scroll to the image bottom?
I edit the postion in the onScaleUpadate to solve the problem。。Like this

// _position = clampPosition(delta * details.scale);
      final Alignment basePosition = Alignment.topCenter;
      Offset postion = clampPosition(delta * details.scale);
      double dx = postion.dx;
      double dy = postion.dy;
      if (basePosition.y < 0) {
        dy = postion.dy > 0 ? 0 : postion.dy;
        if (basePosition.x < 0) {
          dx = postion.dx > 0 ? 0 : postion.dx;
        }
      } else if (basePosition.y > 0) {
        dy = postion.dy < 0 ? 0 : postion.dy;
        if (basePosition.x > 0) {
          dx = postion.dx < 0 ? 0 : postion.dx;
        }
      }
      _position = Offset(dx, dy);

And add these code in the singlechildLayoutDelegate

@override
  Offset getPositionForChild(Size size, Size childSize) {
    final double offsetX =
        ((size.width - childSize.width) / 2) * (basePosition.x + 1);
    final double offsetY =
        ((size.height - childSize.height) / 2) * (basePosition.y + 1);

    double offsetDy = basePosition.y < 0
        ? (postion.dy < 0 ? postion.dy / scale : -postion.dy / scale)
        : (postion.dy > 0 ? -postion.dy / scale : postion.dy / scale);

    double offsetDx = basePosition.x < 0
        ? (postion.dx < 0 ? postion.dx / scale : -postion.dx / scale)
        : (postion.dx > 0 ? -postion.dx / scale : postion.dx / scale);

    print(
        'dy:$postion.dy*************offsetDy:$offsetDy*************offsetY:$offsetY*************');

    return Offset(offsetX + offsetDx, offsetY + offsetDy);
  }

Ive managed to write unity tests for the controller. Now it is on master.
To use it now, put photo_view as a git dependency pointing to this repo.

Edit: Released on 0.2.0

Was this page helpful?
0 / 5 - 0 ratings