Question

我想知道是否可以增加特定窗口小部件的“点击区域”？

一个小例子是50 x 50按钮。如果用户在这50 x 50像素上的任意位置点击，则按钮的onPressed将被执行。但是，我可以这样做吗，如果用户单击按钮上方5个像素，它的onPressed仍将执行？

我只是想增加此区域以提供更好的用户体验，而不必增加按钮的实际大小，这会使UI变差。

Answer 1

我有点迟了，但是您有2个选择。

我面前的答案是非常基本的，仅使用对您无济于事的基本容器。

1）在您的gestureDetector上使用behavior: HitTestBehavior.translucent，这将允许点击不可见的内容。但是，您想要的不仅仅是设置为可点击的区域，因此请转到选项2。

2）使用不可见的堆栈。在按钮上方堆叠一个容器，使其不可见，并使用正确的HitTestBehaviour在其上添加手势检测，这应该可以正常工作。如果您的按钮是50x50，则将容器设置为55x55，然后将其堆叠在彼此的顶部，然后问题解决。

Answer 2

您可以将RaisedButton包装到Container中，并在Container上添加一些填充。然后，您可以将Container包装到GestureDetector中，这将使小部件实现多次单击事件。

GestureDetector还有一个onTap回调，可用来执行与单击真实RaisedButton时相同的代码。

这是一个简单的代码示例：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Stackoverflow example'),
      ),

      body: Center(
        child: GestureDetector(
          child: Container(
            width: 120,
            height: 80,            

            padding: EdgeInsets.all(10),

            color: Colors.blueAccent,

            child: Center(
              child: RaisedButton(                
                child: Text('Click me'),
                onPressed: _fireButtonClick,
              ),
            )         
          ),
          onTap: _fireButtonClick
        ),
      ),
    );
  }

现在将RaisedButton onPressed代码提取到专用函数中，您可以将其分配给RaisedButton onPressed和GestureDetector onTap回调：

void _fireButtonClick() {
  print('button clicked');
}

希望这对您有帮助，Doobie

Answer 3

如果将按钮包装在Container中，将Container透明化，并放置一个GestureDetection小部件，然后在按钮onPressed中编写代码，该怎么办？进入OnTap小部件的GestureDetector：

https://api.flutter.dev/flutter/widgets/GestureDetector-class.html

增加窗口小部件的点击检测面积？

3 个答案: