Flutter - 在充满其他小部件的屏幕上检测点击

Question

我正在尝试检测屏幕上的点击。 我尝试了多种使用GestureDetector的变体，但这只会导致应用程序检测到子元素而不是屏幕上的点击。

这是代码：

class QQHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.blueGrey,
      ),
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('QuoteQuota'),
        ),
        body: GestureDetector(
          onTap: () => print('Tapped'),
          child: QQBody(),
        ),
      ),
    );
  }
}

class QQBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello, World!'
      ),
    );
  }
}

输出：当我点击“Hello, World!”时打印“tapped”。

预期输出：当我单击屏幕上任意位置且文本居中时打印“轻按”。

我该怎么做呢？

Answer 1

使用GestureDetector's behavior属性并将HitTestBehavior.opaque传递给它，它可以识别整个屏幕并在您点击屏幕上的任意位置时检测到点击。

body: GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () => print('Tapped'),
          child: QQBody(),
        ),

希望这能回答你的问题。

Answer 2

就像 Darshan 说的，您可以通过将身体包裹在这样的手势检测器中来触发 Tap...

body: GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () => print('Tapped'),
          child: QQBody(),
        ),

同样在某些情况下，您可能需要避免在点击正文中的任何位置时触发点击其他小部件。 这可以通过使用IgnorePointer Widget 来解决

body: GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        print('This will click');
      },

      // -------- No Widget below tree will be trigger click.

      child: IgnorePointer(
        ignoring: ClassLibrary.selected != null ? true : false,
        child: TabBarView(
          children: [
                   ...

Answer 3

请使用以下代码——

class QQHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.blueGrey,
      ),
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('QuoteQuota'),
        ),
        body: GestureDetector(
          onTap: () => print('Tapped'),

          child: Container(
          height : MediaQuery.of(context).size.height,
          width : MediaQuery.of(context).size.width,
),
        ),
      ),
    );
  }
}

Answer 4

您可以使用Stack ：将图层彼此叠放。 Stack的好处是您可以根据需要安排堆栈顺序。 如果您想在触摸屏幕时执行某项操作，并在触摸屏幕上的按钮时执行其他操作，您可以通过将按钮放在GestureDetector顶部轻松地使用堆栈来执行此操作。

以下是您的示例：

class QQHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.blueGrey,
      ),
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('QuoteQuota'),
        ),
        body: Stack(
          // Bottom to Top order
          children: <Widget> [
            QQBody(),
            GestureDetector(
              onTap: () => print('Tapped'),
            ),
          ]
        ),
      ),
    );
  }
}

class QQBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello, World!'
      ),
    );
  }
}

Answer 5

@Darshan 是一个正确的答案，但我想添加一些东西。 每当触摸屏幕时我都想要一个触发器，并且 onTap 只对点击做出反应（没有滑动）。 但是，可以通过添加 onTapCancel 来实现该行为

body: GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () => print('Tapped'),
          onTapCancel: () => print('Touched but not tapped'),
          child: QQBody(),
        ),