Флаттер, как изменить изображение после OnTap с Gesture Detector - PullRequest
Новая
       41

Флаттер, как изменить изображение после OnTap с Gesture Detector

0 голосов
/ 17 января 2020

У меня есть изображение внутри виджета GestureDetector. Я хочу изменить это изображение при вызове onTapDown , а затем снова изменить его при вызове onTapUp . Есть ли возможность сделать это? В другом приложении (Native Android app с java) я делал это с помощью кнопки и изменял фон с помощью селектора 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" />

Итак, есть ли способ сделать то же самое во флаттере?

--- ПРОСТО БЫТЬ ОЧИЩЕННЫМ ---

В том же виджете я хочу изображение, если оно не нажата и другое изображение, если она нажата.

Ответы [ 2 ]

1 голос
/ 18 января 2020 
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;
        });
      },

полный код Вы можете изменить изображение при его нажатии и отпускании с помощью детектора жестов. Это очень просто - вам не нужны никакие дополнительные библиотеки или пакеты, вы просто должны использовать setState () для того, чтобы обновить вид при нажатии выпущенного

0 голосов
/ 17 января 2020

Я сам не проверял это, поэтому попробуйте и посмотрите, подходит ли оно вам.

Для такого применения вы можете попробовать 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();
)

Подробнее о провайдере .

Убедитесь, что вы применили оптимизацию, так как notifyListeners будет перестраиваться всякий раз, когда listen: true в провайдере (вы можете указать целевой c образ, используя selector провайдера).

Надеюсь, это поможет.

...