Flutter 如何在 onTap 后使用 Gesture Detector 更改 SVG

Question

想要实现与图像相同的功能：

Flutter how to change image after onTap with Gesture Detector

我正在使用这个包： https://pub.dev/packages/flutter_svg/example

尽管我能够在 IconButton 中执行此操作，但我需要在 GestureDetector 中执行此操作，而不是在 IconButton 中，所以为了清楚起见，需要帮助如何将 SVG 实现到 GestureDetector 而不是 IconButton！

我能够在屏幕上渲染 SVG，但不知道如何在 GestureDetector 中实现它，在屏幕上渲染 SVG，我这样做是这样的：

Expanded svgTest({double blackKeyWidth}) {
    return Expanded(
      child: Container(
        child: IconButton(
            icon: SvgPicture.asset(
              'assets/images/1.svg',
              fit: BoxFit.fill,
              allowDrawingOutsideViewBox: true,
              width: 500,
            ),
            onPressed: null //do something,
            ),
      ),
    );
  }

不知道如何在 GestureDetector 中实现 SVG，它无法进入，因为 Image 和 Gesture Detector 不接受图标，或者我做得不对。

谢谢

Answer 1

如果您想更改iconButton 的onTap 方法上的图像，那么您应该使用setState 在onTap 方法中更改image 的路径

String imagePath = "assets/images/1.svg";

Expanded svgTest({double blackKeyWidth}) {
    return Expanded(
      child: Container(
        child: IconButton(
            icon: SvgPicture.asset(
              '${imagePath}',
              fit: BoxFit.fill,
              allowDrawingOutsideViewBox: true,
              width: 500,
            ),
            onPressed: (){
               setState(() {
                  imagePath = "assets/images/2.svg";
                });
},
            ),
      ),
    );
  }

已编辑：（对于手势检测器，您可以简单地将 SVG 包裹在其中）

替换 iconbutton with GestureDetector 并添加其onTap 和@987654331 @ 方法也是。

  GestureDetector(
    onTap: () {
      setState(() {
        imagePath = "assets/images/2.svg";
      });
    },
    onTapUp: (TapUpDetails tapUpDetails) {
      setState(() {
        imagePath = "assets/images/1.svg";
      });
    },
    child: SvgPicture.asset(
      '${imagePath}',
      //fit: BoxFit.fill,
      //allowDrawingOutsideViewBox: true,
      //width: 500,
    ),
  ),

For More About GestureDetector and Flutter SVG Click Here