颤振:用图库捏缩放

时间:2020-05-22 09:46:16

标签: flutter dart

我创建了一个可以轻按的图像列表,从而可以将轻按的图像放大,并允许在图像之间左右滚动。在以下gif中看到:

enter image description here

如上所示,我在图库中遇到的问题是,一旦捏住图像后,就不会再关注图片了,而是要滚动到下一张图片,而不是能够浏览图片。

是否有一种方法可以在缩放图像时优先于滚动来导航图像?

我正在使用以下软件包: https://pub.dev/packages/carousel_prohttps://pub.dev/packages/photo_view

下面是我目前的代码:

创建首页列表:

Container(
 width: MediaQuery.of(context).size.width - 50,
 child: GridView.builder(
 //This prevents the gridview creating its own scroller
 primary: false,
 //scrollDirection: Axis.vertical,
 shrinkWrap: true,
 itemCount: menuPictures.length,
 gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
   crossAxisCount: 4,
   crossAxisSpacing: 5.0,
   mainAxisSpacing: 5.0,
   //childAspectRatio keeps the items closer together
   childAspectRatio: 3 / 5,
   ),
   itemBuilder: (BuildContext context, int index) {
      return GestureDetector(
         child: PhotoView(
           imageProvider: NetworkImage(menuPictures[index]),
         ),
         onTap: () {
            Navigator.pushNamed(
              context,
              MenuGalleryRoute,
              arguments: {
                 'pictures': menuPictures,
                 'defaultImage': menuPictures[index],
                 'index': index
              },
);},);},),),

创建滚动和缩放:

return Scaffold(
      body: GestureDetector(
        child: Container(
          child: Carousel(
            //initialIndex is NOT part of the original documentation
            //created using this pull request and adding it to the carousel_pro.dart documentation
            //https://github.com/jlouage/flutter-carousel-pro/pull/39/commits/5af85ef50f30d9a9afc40bd66c90b42e30d31f30
            initialIndex: index,
            autoplay: false,
            showIndicator: true,
            indicatorBgPadding: 5.0,
            images: menuPictures
                .map(
                  (item) => Container(
                    child: Center(
                      //PhotoView allows for pinch zoom
                      child: PhotoView(
                        imageProvider: NetworkImage(
                          item,
                        ),
                      ),
                    ),
                  ),
                ).toList(),
          ),
        ),
        onTap: () {
          //If image tapped again, go back to previous page
          //i.e. the page where the image was originally tapped
          Navigator.pop(context);
        },
      ),
    );
  }

0 个答案:

没有答案