GestureDetection: есть ли эквивалент CSS наведения для касания? - PullRequest
Новая
       0

GestureDetection: есть ли эквивалент CSS наведения для касания?

0 голосов
/ 08 мая 2020

У меня есть фиксированный экран (без прокрутки), полный виджетов в виде сетки, примерно 20 в ширину на 100 вниз. Я хотел бы

  1. Попросить пользователя прикоснуться к экрану
  2. Провести пальцем по экрану над несколькими фиксированными виджетами
  3. Сделать так, чтобы каждый виджет касался пальца запускать их onTap или какое-то другое событие, которое я могу захватить

Есть ли способ добиться этого с помощью GestureDetector или другого метода?

Ответы [ 2 ]

0 голосов
/ 08 мая 2020

Вы можете использовать виджет Flutter InkWell для достижения эффекта наведения:

Посмотрите код ниже, чтобы увидеть краткий пример того, как это сделать: 

 InkWell(
        // use any color for your hover effect
        hoverColor: Colors.blue,
        // any child widget here
        child: Container(
          color: Colors.red,
        ),
      ),

Надеюсь, это отвечает на ваш вопрос.

0 голосов
/ 08 мая 2020

Вы можете сделать это, используя GestureDetector, но вы должны реализовать это самостоятельно, например: 

return GridTile(
  child: Material(
    child: GestureDetector(
      child: Stack(children: <Widget>[
        this.images == listOfImage[index].assetName ||
                listOfStr.contains(listOfImage[index].assetName)
            ? Positioned.fill(
                child: Opacity(
                opacity: 0.7,
                child: Image.asset(
                  listOfImage[index].assetName,
                  fit: BoxFit.fill,
                ),
              ))
            : Positioned.fill(
                child: Opacity(
                opacity: 1.0,
                child: Image.asset(
                  listOfImage[index].assetName,
                  fit: BoxFit.fill,
                ),
              )),
        this.images == listOfImage[index].assetName ||
                listOfStr.contains(listOfImage[index].assetName)
            ? Positioned(
                left: 0,
                bottom: 0,
                child: Icon(
                  Icons.check_circle,
                  color: Colors.green,
                ))
            : Visibility(
                visible: false,
                child: Icon(
                  Icons.check_circle_outline,
                  color: Colors.black,
                ),
              )
      ]),
      onTap: () {
        setState(() {
          if (listOfStr
              .contains(listOfImage[index].assetName)) {
            this.clicked = false;
            listOfStr.remove(listOfImage[index].assetName);
            this.images = null;
          } else {
            this.images = listOfImage[index].assetName;
            listOfStr.add(this.images);
            this.clicked = true;
          }
        });
      },
    ),
  ),
);

Здесь GestureDetector принимает Stack как дочерний элемент. listOfImages содержит список AssetImages, которые используются в GridView: 

   GridView.builder(
      shrinkWrap: true,
      padding: const EdgeInsets.all(0),
      itemCount: listOfImage.length,

listOfStr содержит имя AssetImage, listOfImage[index].assetName. Итак, здесь onTap сначала проверяет, находится ли изображение внутри list, если оно внутри, то это означает, что изображение щелкнуто, и на нем есть галочка, а opacity равно 0,8, поэтому, если вы tap изображение снова будет отменено

...