flutter中如何监听整个页面的点击事件

Question

我想在我点击整个页面的任何地方收听一个事件

Answer 1

你应该用 GestureDetector 小部件包装你的 MaterialApp 小部件，你可以听到所有类型的点击。 示例代码如下。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onDoubleTap: () {
        print('DobleTap');
      },
      onTap: () {
        print('ontap');
      },
      child: MaterialApp(
        home: HomePage(),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[Text('Test')],
        ),
      ),
    );
  }
}

Answer 2

首先，您需要使用 AbsorbPointer 小部件包裹屏幕。

正如文档所说的 AbsordPointer，它是一个禁用屏幕上所有侦听器的小部件，因此如果您有 listView 或其他我们可以单击的小部件，它将被禁用。

之后用 GestureDetector 包裹 AbsorbPointer 并使用 on Tap 方法。

这是一个例子：

    import 'dart:typed_data';
    import 'dart:ui';

    import 'package:flutter/material.dart';

    void main() {
        runApp(MyApp());
    }

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
             home: HomePage(),
         );
      }
    }

    class HomePage extends StatefulWidget {
      @override
        _HomePageState createState() => _HomePageState();
    }

    class _HomePageState extends State<HomePage> {
       bool clicked = false;
       @override
       Widget build(BuildContext context) {
          final screenWidth = MediaQuery.of(context).size.width;
    final screenHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          print('object');
        },
        child: AbsorbPointer(
          child: Container(
            height: 500,
            child: ListView.builder(
              itemCount: 10,
              itemBuilder: (_, index) => GestureDetector(
                onTap: () {
                  print('$index');
                },
                child: Container(
                  height: 100,
                  margin: EdgeInsets.only(top: 10.0),
                  color: index.isEven ? Colors.red : Colors.green,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 3

只需将其添加到脚手架：

body: GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: () {
      // your code
    }