4
votes

Détecteur de gestes Flutters onTap se déclenche uniquement sur l'enfant texte

Je crée un widget qui a un détecteur de gestes comme racine, son enfant est une colonne qui a ensuite plusieurs vues enfants différentes dont certaines sont des champs de texte, mais le détecteur de gestes ne se déclenche que si j'appuie sur les champs de texte malgré la prise de vues en plein écran dans l'inspecteur de scintillement voici ma méthode de construction

      @override
      Widget build(BuildContext context) {
        return GestureDetector(
          onTap: (){
            print("tap");
            function(context);
          },
          child: Column(
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: buildTopDivider(),
              ),
              Container(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.only(right: 8.0),
                          child: Column(
                            children: buildTextFields(),
                          ),
                        ),
                      ),
                      Column(
                        children: buildIconContainer(),
                      ),
                    ],
                  ),
                ),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: buildBottomDivider(),
              )
            ],
          ),
        );
      }

et ci-joint une capture d'écran montrant le détecteur de gestes occupant toute la vue, qui est un peu expurgée mais montre le problème, je veux donc pouvoir appuyer n'importe où sur cet élément et obtenir la méthode onPress pour déclencher mais actuellement comme indiqué il se déclenche uniquement si j'appuie sur l'une des vues de texte, ce qui semble étrange, des idées?

flutter gesturedetector

0 commentaires

3 Réponses :

4
votes

Avec ce code, GestureDetector.onTap fonctionne partout dans la zone rouge sauf dans TextField :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'foo text',
            ),
            GestureDetector(
//              behavior: HitTestBehavior.translucent,
              onTap: () {
                print("tap");
//                  function(context);
              },
              child: Column(
                children: <Widget>[
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
//                      children: buildTopDivider(),
                  ),
                  Container(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Row(
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              color: Colors.red,
                              padding: const EdgeInsets.only(right: 8.0),
                              child: Column(
//                                  children: buildTextFields(),
                                children: [
                                  Text('foo bar baz'),
                                  TextField(onTap: () => print('TextField tapped'),),
                                  Text('foo bar baz'),
                                ],
                              ),
                            ),
                          ),
                          Column(
//                              children: buildIconContainer(),
                              ),
                        ],
                      ),
                    ),
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
//                      children: buildBottomDivider(),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

Votre code appelle des fonctions qui ne sont pas incluses dans votre question, il est donc difficile de dire ce qui se passe réellement.

2 commentaires

c'est intéressant j'ai essayé la même chose et cela ne fonctionne pas, les fonctions ne renvoient que des widgets, mais dès que j'ajoute une couleur d'arrière-plan, cela fonctionne

Si vous commentez dans le behavior: HitTestBehavior.translucent, cela devrait fonctionner sans la couleur du conteneur ou vous pouvez utiliser Colors.transparent

1
votes

L'utilisation d' InkWell au lieu de GestureDetector résout le problème. onTap se déclenche partout dans l'élément de liste. Il donne également un retour sur l'action du robinet.

0 commentaires

1
votes

Ajoutez une propriété de comportement à GestureDetector . Cela rendra l'ensemble du conteneur cliquable.

GestureDetector(
        behavior: HitTestBehavior.opaque,
        child:...
)

0 commentaires