flutter 增加小工具的点击检测区域?

gfttwv5a  于 2023-01-14  发布在  Flutter
关注(0)|答案(6)|浏览(290)

我想知道是否有可能增加一个特定小工具的“点击区域”?
举个小例子,一个50 x 50的按钮,如果用户点击50 x 50像素上的任何地方,按钮的onPressed都会被执行,但是我能不能让它在用户点击按钮上方的5个像素时,它的onPressed仍然会被执行?
我只是想增加这个区域来提供更好的用户体验,而不必增加按钮的实际大小,这会使UI变得更糟。

ki0zmccv

ki0zmccv1#

我有点晚了,不过你有两个选择。
我面前的答案是非常基本的,只使用基本的容器,这对你没有帮助。
1)在你的gestureDetector上使用behavior: HitTestBehavior.translucent,这将允许不可见的东西被点击。但是你想要比你设置的更多的区域可以点击,所以去选项2。
2)使用一个不可见的堆栈。在你的按钮上方堆叠一个容器,使其不可见,在其上添加手势检测,使用正确的HitTestBehaviour,这应该可以正常工作。如果你的按钮是50x50,使容器55x55,并将它们堆叠在一起,问题就解决了。

tzdcorbm

tzdcorbm2#

对我来说,我有一个非常小的小部件,我想保持小的UI,但对于UX,我想有一个体面的触摸区,而不是挫败用户。
https://pub.dev/packages/expand_tap_area/install
将此添加到您的pubspec.yahml

expand_tap_area: ^1.1.0

导入此

import 'package:expand_tap_area/expand_tap_area.dart';

简单地使用这个小部件。Tappadding允许你改变触摸区域。除此之外,它的工作原理就像手势检测器一样。

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

doinxwow3#

您可以将RaisedButton Package 成Container,并在Container中添加一些填充,然后将Container Package 成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
        ),
      ),
    );
  }

现在将RaisedButtononPressed代码提取到一个专用函数中,您可以将该函数分配给RaisedButtononPressedGestureDetectoronTap回调:

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

希望这能帮上忙,杜比

gudnpqoy

gudnpqoy4#

如果您将按钮 Package 在Container中,使Container透明并设置为GestureDetection小部件,然后将onPressed中按钮的代码写入GestureDetector小部件的OnTap中,会怎样?
https://api.flutter.dev/flutter/widgets/GestureDetector-class.html

ubof19bj

ubof19bj5#

您可以通过在GestureDetector上使用behavior: HitTestBehavior.translucent来完成此操作。
并且使用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,
                    ),
                  ),
                ),
nkcskrwz

nkcskrwz6#

这是对Ulysses Alves关于一个看不见的堆栈的例子的问题的回答:

Stack(children: [
                  GestureDetector(
                      behavior: HitTestBehavior.translucent,
                      child: Container(
                        width: 150,
                        height: 40,
                        alignment: Alignment.centerLeft,
                        child: const Text('Your text here')),
                      onTap: () {
                        setState(() {
                          ...
                        });
                      }),
                ]),

相关问题