Question

我尝试创建一个应用程序，当用户点击屏幕上的任何位置时，该应用程序将背景颜色更改为随机颜色，但是只有当我点击文本时，OnTap功能才起作用。请帮我如何解决它。

这是我的代码：

import 'package:flutter/material.dart';
import 'dart:math';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MainVidget();
  }
}

class MainVidget extends StatefulWidget {
  @override
  MainVidgetState createState() => MainVidgetState();
}

class MainVidgetState extends State<MainVidget> {
  Color mainColor = Colors.white;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Welcome to Flutter',
        home: Scaffold(
          backgroundColor: mainColor,
          appBar: AppBar(
            title: Text('Tap anywhere'),
          ),
          body: GestureDetector(
            onTap: () {
              setState(() {
                mainColor = Color.fromRGBO(Random().nextInt(254) + 1,
                    Random().nextInt(254) + 1, Random().nextInt(254) + 1, 1);
              });
            },
            child: Center(
              child: Text('Hey there', style: TextStyle(fontSize: 32.0)),
            ),
          ),
        ));
  }
}

Answer 1

在behavior: HitTestBehavior.translucent中设置GestureDetector。

GestureDetector(
  behavior: HitTestBehavior.translucent, //or HitTestBehavior.opaque
  onTap: () {
    setState(() {
      mainColor = Color.fromRGBO(Random().nextInt(254) + 1,
          Random().nextInt(254) + 1, Random().nextInt(254) + 1, 1);
    });
  },
  child: Center(
    child: Text('Hey there', style: TextStyle(fontSize: 32.0)),
  ),
),

Answer 2

另一种实现此目的的方法是使用Stack，其中顶层页面是具有行为属性Listener的{{1}}。

HittestBehavior.translucent

现在介绍为什么这种方法稍微安全一些：

这不会阻塞具有相同回调的任何其他body: Stack( children: <Widget>[ Center( child: Text('Hey there', style: TextStyle(fontSize: 32.0)), ), Listener( behavior: HitTestBehavior.translucent, onPointerDown: (e) { setState(() { mainColor = Color.fromRGBO(Random().nextInt(254) + 1, Random().nextInt(254) + 1, Random().nextInt(254) + 1, 1); }); }, ), ], ),。

但是，如果您使用GestureDetector代替GestureDetector例如如果您最终使用Listener或Stack作为GestureDetector中的孩子，并且使用了类似GestureDetector和onTap或onTap之类的回调和onLongPress等。那么只有onLongPress个会触发。

成为GestureDetector的原因将参加手势竞技场并争夺手势，然后最终只有其中一个会获胜。

但是GestureDetector不会参与手势竞技场，因此无论如何它都会收到事件。

与Listener不同的是，Listener可以接收原始指针事件。

可以找到更详细的解释here

Flutter GectureDetector onTap仅适用于文本子级

2 个答案: