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"。

预期输出："tapped" 当我点击屏幕中间有文本的任意位置时打印。

我该怎么做？

Answer 1

请使用以下代码--

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 2

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

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

希望这能回答您的问题。

Answer 3

您可以使用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 4

正如 Darshan 所说，您可以通过将 body 包裹在像这样的手势检测器中来触发点击...

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

此外，在某些情况下，您可能需要避免在点击 body 中的任意位置时触发对其他小部件的点击。这可以通过使用 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: [
                   ...

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

Flutter - Detect Tap on the Screen that is filled with other Widgets

dart

widget

gesture