我想知道是否有可能增加一个特定小工具的“点击区域”?举个小例子,一个50 x 50的按钮,如果用户点击50 x 50像素上的任何地方,按钮的onPressed都会被执行,但是我能不能让它在用户点击按钮上方的5个像素时,它的onPressed仍然会被执行?我只是想增加这个区域来提供更好的用户体验,而不必增加按钮的实际大小,这会使UI变得更糟。
onPressed
ki0zmccv1#
我有点晚了,不过你有两个选择。我面前的答案是非常基本的,只使用基本的容器,这对你没有帮助。1)在你的gestureDetector上使用behavior: HitTestBehavior.translucent,这将允许不可见的东西被点击。但是你想要比你设置的更多的区域可以点击,所以去选项2。2)使用一个不可见的堆栈。在你的按钮上方堆叠一个容器,使其不可见,在其上添加手势检测,使用正确的HitTestBehaviour,这应该可以正常工作。如果你的按钮是50x50,使容器55x55,并将它们堆叠在一起,问题就解决了。
behavior: HitTestBehavior.translucent
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(), ),
doinxwow3#
您可以将RaisedButton Package 成Container,并在Container中添加一些填充,然后将Container Package 成GestureDetector,这样就可以启用小部件的多次点击事件。GestureDetector还有一个onTap回调函数,您可以使用它来执行与单击真实的RaisedButton时相同的代码。下面是一个简单的代码示例:
RaisedButton
Container
GestureDetector
onTap
@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代码提取到一个专用函数中,您可以将该函数分配给RaisedButtononPressed和GestureDetectoronTap回调:
void _fireButtonClick() { print('button clicked'); }
希望这能帮上忙,杜比
gudnpqoy4#
如果您将按钮 Package 在Container中,使Container透明并设置为GestureDetection小部件,然后将onPressed中按钮的代码写入GestureDetector小部件的OnTap中,会怎样?https://api.flutter.dev/flutter/widgets/GestureDetector-class.html
GestureDetection
OnTap
ubof19bj5#
您可以通过在GestureDetector上使用behavior: HitTestBehavior.translucent来完成此操作。并且使用Padding小部件作为子小部件,那么您只需使用填充值给予额外的命中区域。
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, ), ), ),
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(() { ... }); }), ]),
6条答案
按热度按时间ki0zmccv1#
我有点晚了,不过你有两个选择。
我面前的答案是非常基本的,只使用基本的容器,这对你没有帮助。
1)在你的gestureDetector上使用
behavior: HitTestBehavior.translucent
,这将允许不可见的东西被点击。但是你想要比你设置的更多的区域可以点击,所以去选项2。2)使用一个不可见的堆栈。在你的按钮上方堆叠一个容器,使其不可见,在其上添加手势检测,使用正确的HitTestBehaviour,这应该可以正常工作。如果你的按钮是50x50,使容器55x55,并将它们堆叠在一起,问题就解决了。
tzdcorbm2#
对我来说,我有一个非常小的小部件,我想保持小的UI,但对于UX,我想有一个体面的触摸区,而不是挫败用户。
https://pub.dev/packages/expand_tap_area/install
将此添加到您的pubspec.yahml
导入此
简单地使用这个小部件。Tappadding允许你改变触摸区域。除此之外,它的工作原理就像手势检测器一样。
doinxwow3#
您可以将
RaisedButton
Package 成Container
,并在Container
中添加一些填充,然后将Container
Package 成GestureDetector
,这样就可以启用小部件的多次点击事件。GestureDetector
还有一个onTap
回调函数,您可以使用它来执行与单击真实的RaisedButton
时相同的代码。下面是一个简单的代码示例:
现在将
RaisedButton
onPressed
代码提取到一个专用函数中,您可以将该函数分配给RaisedButton
onPressed
和GestureDetector
onTap
回调:希望这能帮上忙,杜比
gudnpqoy4#
如果您将按钮 Package 在
Container
中,使Container
透明并设置为GestureDetection
小部件,然后将onPressed
中按钮的代码写入GestureDetector
小部件的OnTap
中,会怎样?https://api.flutter.dev/flutter/widgets/GestureDetector-class.html
ubof19bj5#
您可以通过在
GestureDetector
上使用behavior: HitTestBehavior.translucent
来完成此操作。并且使用
Padding
小部件作为子小部件,那么您只需使用填充值给予额外的命中区域。nkcskrwz6#
这是对Ulysses Alves关于一个看不见的堆栈的例子的问题的回答: