web-dev-qa-db-fra.com

Flutter - Container onPressed?

J'ai ce conteneur:

          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"),
              ]
            ),
          ),

Lorsque l'utilisateur clique sur Container, je souhaite qu'une méthode onPressed() soit déclenchée (comme cela peut être fait avec IconButton par exemple). Comment puis-je obtenir ce comportement avec Container?

dartflutter
22
OhMad

Je suppose que vous pouvez utiliser le widget GestureDetector comme ceci:

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"),
              ]
          ),
        )
    );
65
guest3523

La solution la plus simple consiste à envelopper Container dans un GestureRecognizer, tout en envisageant d'utiliser InkWell ou FlatButton si vous créez une application de conception de matériau. Ces widgets afficheront une réponse visuelle lorsque vous les toucherez.

9
Collin Jackson

Vous ne devriez pas utiliser GestureDetector car il ne vous montrera aucun effet d'entraînement (qui fait partie intégrante d'une application de conception Material). Vous pouvez donc utiliser InkWell. Voici l'exemple de base.

Widget _buildContainer() {
  return Material(
    color: Colors.blue,
    child: InkWell(
      onTap: () => print("Container pressed"), // handle your onTap here
      child: Container(height: 200, width: 200),
    ),
  );
}

Sortie:

enter image description here

7
CopsOnRoad

Je voulais juste ajouter à The Dumbfounds answer (accepté et ci-dessus)

Si vous utilisez GestureDetector ou InkWell pour gérer le clic d'un groupe d’icône et de texte, puis utilisez Icon widget au lieu de IconButton pour afficher l’icône car la méthode onPressed d’IconButton reprend la méthode onTap de GestureDetector/InkWell et par conséquent, onTap ne fonctionnera alors que si vous cliquez sur le texte.

Exemple -

@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'),
              ),
            )
          ],
        ),
      )
    ]);
  }
}
2
Annsh Singh