增加小部件的点击检测区域？

Question

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

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

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

Answer 1

我有点晚了，但是你有两个选择。

我面前的答案非常基本，只使用基本的容器，不会帮助你。

1)behavior: HitTestBehavior.translucent在您的手势检测器上使用，这将允许点击不可见的东西。但是，您想要的不仅仅是您设置为可点击的区域，因此请转到选项 2。

2) 使用一个不可见的堆栈。在按钮上方堆叠一个容器，使其不可见，在其上添加手势检测，使用正确的 HitTestBehaviour，这应该可以正常工作。如果你的按钮是 50x50，把容器做成 55x55 并将它们堆叠在一起，问题就解决了。

Answer 2

对我来说，我有一个非常小的小部件，我想在 UI 方面保持较小的尺寸，但在 UX 方面，我希望有一个像样的触摸区域，以免让用户感到沮丧。为此我找到了一个简单的包

https://pub.dev/packages/expand_tap_area/install

将其添加到您的 pubspec.yaml 中

 expand_tap_area: ^1.1.0

导入这个

import 'package:expand_tap_area/expand_tap_area.dart';

只需使用小部件即可。tapPadding 允许您更改触摸区域。除此之外，其工作方式与 Gesture Dector 类似。

ExpandTapWidget(
  onTap: () {},
  tapPadding: EdgeInsets.all(25.0),
  child: smallWidget(),
),

Answer 3

您可以使用behavior: HitTestBehavior.translucenton来完成此操作GestureDetector。

并为您的子小部件使用Padding小部件，然后您可以为额外的点击区域提供填充值。

 GestureDetector(
                  behavior: HitTestBehavior.translucent, // Needed for invisible things to be tapped.
                  onTap: () {
                    Navigator.pop(context);
                  },
                  child: Padding(
                    padding: EdgeInsets.all(9.0), // Configure hit area.
                    child: FaIcon(
                      FontAwesomeIcons.xmark,
                    ),
                  ),
                ),

Answer 4

您可以将您的内容包装RaisedButton到 a 中Container并添加一些填充到Container. 然后您可以将 包装Container到 a 中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');
}

希望这有帮助，杜比