Flutter - контейнер включен?

У меня есть этот контейнер:

  new Container(
    width: 500.0,
    padding: new EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 40.0),
    color: Colors.green,
    child: new Column(
      children: [
        new Text("Ableitungen"),
      ]
    ),
  ),

Когда пользователь нажимает Container, я хочу, чтобы метод onPressed() был запущен (например, это можно сделать с помощью IconButton). Как добиться такого поведения с Container?


person OhMad    schedule 29.04.2017    source источник


Ответы (6)


Думаю, вы можете использовать виджет GestureDetector вот так:

new GestureDetector(
        onTap: (){
          print("Container clicked");
        },
        child: new Container(
          width: 500.0,
          padding: new EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 40.0),
          color: Colors.green,
          child: new Column(
              children: [
                new Text("Ableitungen"),
              ]
          ),
        )
    );
person guest3523    schedule 29.04.2017
comment
Я хочу добавить к контейнеру функцию крана .... попробовал и чернильницу, и детектор жестов, но оба не работают !!! - person Ali Yar Khan; 07.06.2021

Не используйте GestureDetector, это не дает эффекта пульсации. Вместо этого используйте InkWell.

InkWell(
  onTap: () {}, // Handle your callback
  child: Ink(height: 100, width: 100, color: Colors.blue),
)

Выход:

введите описание изображения здесь

person CopsOnRoad    schedule 08.05.2019
comment
К вашему сведению: если вы используете контейнер внутри InkWell, то рябь может не появиться, если у вас также есть decoration. См. stackoverflow.com/questions/51463515/. Как показывает @CopsOnRoad use Ink, он поддерживает почти все функции в качестве контейнера. - person Nikhil Wagh; 02.01.2021
comment
Я хочу добавить к контейнеру функцию крана .... попробовал и чернильницу, и детектор жестов, но оба не работают !!! - person Ali Yar Khan; 07.06.2021

Самое простое решение - заключить Container в GestureRecognizer, но подумайте об использовании InkWell или FlatButton, если вы создаете приложение для дизайна материалов. При прикосновении к этим виджетам будет отображаться всплеск.

person Collin Jackson    schedule 30.04.2017

Если вам нужно событие простого касания, вы можете сделать это GestureDetector

GestureDetector(
    onTap: (){
      print("Container clicked");
    },
    child: new Container(...)          
);

Если вам нужна анимация пульсации при касании, используйте InkWell

InkWell(
    onTap: (){
      print("Container clicked");
    },
    child: new Container(...)          
);
person Kalpesh Kundanani    schedule 18.12.2019
comment
Как получить эффект ряби? - person MD Khali; 21.01.2020

Сам контейнер не имеет события щелчка, поэтому есть два способа сделать это.

  1. Виджет InkWell
  2. ЖестДетектор

Во Flutter InkWell - это материальный виджет, который реагирует на прикосновение.

InkWell(
    child: Container(......),
    onTap: () { 
        print("Click event on Container"); 
    },
);

GestureDetector - это виджет, который обнаруживает жесты.

GestureDetector(
    onTap: () { 
        print("Click event on Container"); 
    },
    child: Container(.......),
)

Разница

InkWell - это материальный виджет, который может показывать эффект пульсации при каждом касании.

GestureDetector более универсален не только для сенсорного ввода, но и для других жестов.

person Jitesh Mohite    schedule 10.06.2020

Просто хотел добавить к ответу The Dumbfounds (принято и выше)

Если вы используете GestureDetector или InkWell для обработки щелчка по группе значков и текста, используйте виджет Icon вместо IconButton для отображения значка, поскольку метод onPressed для IconButton возьмет на себя метод onTap для GestureDetector / InkWell, и в результате onTap будет работать, только если вы щелкнете по тексту.

Пример -

@override
  Widget build(BuildContext context) {
    return Row(mainAxisSize: MainAxisSize.min, children: [
      GestureDetector(
        onTap: () {
          _toggleFavorite();
        },
        child: Row(
          children: [
            Container(
              padding: EdgeInsets.all(0.0),
              child: _isFavorited ? Icon(Icons.star, color: Colors.red[500]) : Icon(Icons.star_border),
            ),
            SizedBox(
              width: 18.0,
              child: Container(
                child: Text('$_favoriteCount'),
              ),
            )
          ],
        ),
      )
    ]);
  }
}
person Annsh Singh    schedule 09.05.2018