Question

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

      @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 。它将使整个容器可点击。

'\1'

Answer 4

只需将 color: Colors.transparent 添加到容器小部件

颤振手势检测器onTap仅在文本子对象上触发

4 个答案: