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

Question

我在 GestureDetector 小部件中有一个图像。我想在调用 onTapDown 时更改此图像，然后在调用 onTapUp 时再次更改它。有可能这样做吗？在其他应用程序（带有 java 的原生 Android 应用程序）中，我曾经使用按钮并使用选择器 xml 更改其背景，如下所示：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/image1" />
<item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/image2" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/image2"/>
<item android:drawable="@drawable/image1" />

那么，有没有办法在 flutter 中做同样的事情？

---澄清一下---

在同一个小部件中，如果没有按下，我想要一个图像，如果按下，我想要一个不同的图像。

Answer 1

我自己还没有测试过，所以试一试，看看它是否适合你的需要。

对于这样的应用，你可以provider试一试。

例如，

final provider = Provider.of<myProvider>(context);

...
Image(
   image: AssetImage(provider.imageFile),
),     
...
GestureDetector(
  onTapDown: () => provider.imageForTapDown(),
  onTapUp: () => provider.imageForTapUp()
);

然后在 provider,

void imageForTapDown(){
 //Change the image file
 imageFile = changeImageforTapDown;

 notifyListeners();
)

void imageForTapUp(){
 //Change the image file
 imageFile = changeImageforTapUp;

 notifyListeners();
)

您可以阅读有关 provider 的更多信息。

确保应用优化，因为 notifyListeners 将在提供程序中 listen: true 重建（您可以使用提供程序的 selector 定位特定图像）。

希望这对您有所帮助。

Answer 2

Image img;
// example: Image.asset('images/camera.png',)
Image imgUp =  Image.asset('your image directory for when tap up',);
Image imgDown =  Image.asset('your image directory for when tapdown',);

 @override
 void initState() {
 super.initState();
 img = imgUp;
 }


GestureDetector(
      //your image is here
      child: img,
      onTapDown: (tap){
        setState(() {
          // when it is pressed
          img =  imgDown;
        });
      },
      onTapUp: (tap){
        setState(() {
          // when it is released
          img = imgUp;
        });
      },

full code 您可以使用手势检测器在按下和释放图像时更改图像非常简单，您不需要任何额外的库或包，您只需使用 setState() 以便在您按下 released

时更新视图

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

Flutter how to change image after onTap with Gesture Detector

flutter

dart

flutter-image