我创建了一个可以轻按的图像列表,从而可以将轻按的图像放大,并允许在图像之间左右滚动。在以下gif中看到:
如上所示,我在图库中遇到的问题是,一旦捏住图像后,就不会再关注图片了,而是要滚动到下一张图片,而不是能够浏览图片。
是否有一种方法可以在缩放图像时优先于滚动来导航图像?
我正在使用以下软件包: https://pub.dev/packages/carousel_pro和https://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);
},
),
);
}