Question

我有一个 GuestureDetector，其子代为 Carousel Image，其中图像路径存储在列表中。 onTap 的 GuestureDetector 导航到另一个小部件 FullScreenView 以放大当前的 Carousel Image。 FullScreenView 需要图像 url 作为参数。如何将屏幕中当前图像的网址传递给 FullScreenView。

这是我的GuestureDetector :

GestureDetector(
        child: picturesUI(),
        onTap: () {
          Navigator.push(context, MaterialPageRoute(
            builder: (_) {
              return FullPhotoScreen(url: widget.imagesListUrl[i]);
            },
          ));
        },
      ),

picturesUI 是一个 Carousel Image：

Widget picturesUI() {
    return Carousel(
      dotSize: 5,
      dotBgColor: Colors.transparent,
      autoplay: false,
      images: [
        AssetImage(
          widget.imagesListUrl[0],
        ),
        AssetImage(
          widget.imagesListUrl[1],
        ),
        AssetImage(
          widget.imagesListUrl[2],
        ),
        AssetImage(
          widget.imagesListUrl[3],
        ),
        AssetImage(
          widget.imagesListUrl[4],
        ),
        AssetImage(
          widget.imagesListUrl[5],
        ),
      ],
    );
  }
```

Answer 1

不是将 GestureDetector 包裹在picturesUI 周围，而是包裹在每个Carousel AssetImage 周围。实施起来可能更容易。像这样：

Widget picturesUI() {
return Carousel(
  dotSize: 5,
  dotBgColor: Colors.transparent,
  autoplay: false,
  images: [
    GestureDetector( 
      onTap: () {
        Navigator.push(context, MaterialPageRoute(
          builder: (_) {
            return FullPhotoScreen(url: widget.imagesListUrl[0]);
          },
        ));
      },
      child: AssetImage(
        widget.imagesListUrl[0],
      )
    ),
    GestureDetector( 
      onTap: () {
        Navigator.push(context, MaterialPageRoute(
          builder: (_) {
            return FullPhotoScreen(url: widget.imagesListUrl[1]);
          },
        ));
      },
      child: AssetImage(
        widget.imagesListUrl[1],
      )
    ),
    GestureDetector( 
      onTap: () {
        Navigator.push(context, MaterialPageRoute(
          builder: (_) {
            return FullPhotoScreen(url: widget.imagesListUrl[2]);
          },
        ));
      },
      child: AssetImage(
        widget.imagesListUrl[2],
      )
    ),
    //and so on...
  ],
 );
}

Flutter 中的缩放图像轮播

1 个答案: