微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

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 不接受图标,或者我做得不对。

谢谢

解决方法

如果要更改 onTapiconButton 方法上的图像,则必须更改 {{} 中 image路径 1}} 方法使用 onTap

setState

已编辑:(对于手势检测器,您可以简单地将 SVG 包裹在其中)

替换 the 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"; }); },); } with the iconbutton 并添加其{{ 1}} 和 GestureDetector 方法也是如此。

onTap

For More About GestureDetector and Flutter SVG Click Here

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。