Flutter 如何在使用手势检测器 onTap 后更改 SVG

Question

想要实现与此处使用图像相同的功能：

我正在使用这个包： 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，它无法进入，因为图像和手势检测器不接受图标，或者我没有做对。

感谢

Answer 1

如果你想在 iconButton 的 onTap 方法上更改图像，那么你应该必须更改 [=14] 的 path =] 在 onTap 方法中使用 setState

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 包裹在其中）

替换 the iconbutton with the GestureDetector 并添加其 onTap 和 onTapUp 方法。

  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,
    ),
  ),

Flutter 如何在使用手势检测器 onTap 后更改 SVG

Flutter how to change SVG after onTap with Gesture Detector

svg

gesturedetector

dart

flutter