Flutter gesturedetector onTap 仅在文本子项上触发

Question

我正在制作一个以手势检测器为根的小部件，它的子项是一个列，然后有多个不同的子视图，其中一些是文本字段，但手势检测器只有在我按下文本时才会触发尽管 flutter inspector 中的视图占据了全屏，但字段是我的构建方法

      @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(),
              )
            ],
          ),
        );
      }

附件是显示手势检测器占据整个视图的屏幕截图，虽然经过了一些编辑但显示了问题，所以我希望能够按下此项目的任意位置并获取 onPress 方法以开火，但目前如前所述，只有当我按下任何一个看起来很奇怪的文本视图时它才会开火，有什么想法吗？

Answer 1

使用此代码 GestureDetector.onTap 在红色区域的任何地方都有效，除了 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(),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

您的代码调用了问题中未包含的函数，因此很难判断实际发生了什么。

Answer 2

使用 InkWell 而不是 GestureDetector 可以解决问题。 onTap 在列表项的任何位置触发。它还提供点击操作的反馈。

Answer 3

将行为属性添加到 GestureDetector。它将使整个容器可点击。

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

Answer 4

只需将 颜色：Colors.transparent 添加到容器小部件

Flutter gesturedetector onTap 仅在文本子项上触发

Flutters gesture detector onTap only fires on text child

gesturedetector

flutter