如何防止点击 GestureDetector 子 Flutter
How to prevent clicking on GestureDetector child Flutter
我在 GestureDetector
中有一个按钮。 GestureDetector
和 IconButton
都有自己的功能。但是,我只想在点击图标时执行 GestureDetector
而不是 ```IconButton`` 的功能。我知道这个问题的一些解决方案,但我仍然想知道在上面的情况下,是否有任何解决方案可以防止 flutter 执行 IconButton 的功能?
谢谢
解决方案 1:您可以只向 IconButton onPressed method
.
提供一个空函数
解决方案 2:编写一个单独的函数并根据您的要求传递一个参数来触发该函数。
点击优先级 child> GesuterDetector。如果您在 GestureDetector
上有一个 child 作为 IconButton
,则只有 IconButton
可以。
假设您有一个专栏。
- 您可以根据条件在
IconButton
的 onPressed
上传递 null。
- 使用
AbsorbPointer
将阻止其 child 的点击事件,并且 GestureDetector
点击事件将在这种情况下起作用。
IgnorePointer
将完全忽略其区域内的任何点击事件。
演示小部件
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget();
// final String title;
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
bool _disableIconButton = false;
@override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.white,
body: Container(
child: Column(
children: [
GestureDetector(
onTap: () {
print("GestureDetector Tapped");
},
child: IconButton(
onPressed: () {
print(" only Icon will be working here");
},
icon: Icon(Icons.ac_unit),
),
),
SizedBox(
height: 100,
),
GestureDetector(
onTap: () {
print("GestureDetector Tapped");
},
child: Column(
children: [
Text("Inside Column"),
Switch(
value: _disableIconButton,
onChanged: (v) {
setState(() {
_disableIconButton = v;
});
},
),
///* Colors will faded on
IconButton(
onPressed: _disableIconButton
? null
: () {
print("Icon null checker tapped");
},
icon: Icon(Icons.ac_unit),
),
///* Colors will faded on like disable and will work on GuesterTap
AbsorbPointer(
absorbing: _disableIconButton,
child: IconButton(
onPressed: _disableIconButton
? null
: () {
print("Icon AbsorbPointer tapped");
},
icon: Icon(Icons.ac_unit),
),
),
///* it will ignore tap event
IgnorePointer(
ignoring: _disableIconButton,
child: IconButton(
onPressed: _disableIconButton
? null
: () {
print("Icon IgnorePointer tapped");
},
icon: Icon(Icons.ac_unit),
),
),
],
),
)
],
),
),
);
}
}
Solution 2: Write a separate function and pass a parameter to trigger that function based on your requirement.
关于这个。我认为他的意思是,如果用户点击 icon/button:
,您现在可以调用 2 个函数
tapIcon() {//do this and that}
tapButton() {//do this and that}
然后创建第三个函数,它有一个参数,您可以根据该参数决定调用哪个函数:
callFunc(bool iconTap) {
iconTap ? tapIcon() : tapButton();
}
然后您在 onTap/onPressed 上使用它:() {callFunc(true/false);}
或者如果你打算拥有更多的功能,你可以使用枚举:
enum FunctionsEnum { BUTTON, ICON }
callFunc(FunctionsEnum functionsEnum) {
if (functionsEnum == FunctionsEnum.BUTTON) tapButton();
if (functionsEnum == FunctionsEnum.ICON) tapIcon();
}
然后传递一个枚举:onTap: () {callFunc(FunctionsEnum.BUTTON);}
我在 GestureDetector
中有一个按钮。 GestureDetector
和 IconButton
都有自己的功能。但是,我只想在点击图标时执行 GestureDetector
而不是 ```IconButton`` 的功能。我知道这个问题的一些解决方案,但我仍然想知道在上面的情况下,是否有任何解决方案可以防止 flutter 执行 IconButton 的功能?
谢谢
解决方案 1:您可以只向 IconButton onPressed method
.
解决方案 2:编写一个单独的函数并根据您的要求传递一个参数来触发该函数。
点击优先级 child> GesuterDetector。如果您在 GestureDetector
上有一个 child 作为 IconButton
,则只有 IconButton
可以。
假设您有一个专栏。
- 您可以根据条件在
IconButton
的onPressed
上传递 null。 - 使用
AbsorbPointer
将阻止其 child 的点击事件,并且GestureDetector
点击事件将在这种情况下起作用。 IgnorePointer
将完全忽略其区域内的任何点击事件。
演示小部件
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget();
// final String title;
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
bool _disableIconButton = false;
@override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.white,
body: Container(
child: Column(
children: [
GestureDetector(
onTap: () {
print("GestureDetector Tapped");
},
child: IconButton(
onPressed: () {
print(" only Icon will be working here");
},
icon: Icon(Icons.ac_unit),
),
),
SizedBox(
height: 100,
),
GestureDetector(
onTap: () {
print("GestureDetector Tapped");
},
child: Column(
children: [
Text("Inside Column"),
Switch(
value: _disableIconButton,
onChanged: (v) {
setState(() {
_disableIconButton = v;
});
},
),
///* Colors will faded on
IconButton(
onPressed: _disableIconButton
? null
: () {
print("Icon null checker tapped");
},
icon: Icon(Icons.ac_unit),
),
///* Colors will faded on like disable and will work on GuesterTap
AbsorbPointer(
absorbing: _disableIconButton,
child: IconButton(
onPressed: _disableIconButton
? null
: () {
print("Icon AbsorbPointer tapped");
},
icon: Icon(Icons.ac_unit),
),
),
///* it will ignore tap event
IgnorePointer(
ignoring: _disableIconButton,
child: IconButton(
onPressed: _disableIconButton
? null
: () {
print("Icon IgnorePointer tapped");
},
icon: Icon(Icons.ac_unit),
),
),
],
),
)
],
),
),
);
}
}
Solution 2: Write a separate function and pass a parameter to trigger that function based on your requirement.
关于这个。我认为他的意思是,如果用户点击 icon/button:
,您现在可以调用 2 个函数tapIcon() {//do this and that}
tapButton() {//do this and that}
然后创建第三个函数,它有一个参数,您可以根据该参数决定调用哪个函数:
callFunc(bool iconTap) {
iconTap ? tapIcon() : tapButton();
}
然后您在 onTap/onPressed 上使用它:() {callFunc(true/false);}
或者如果你打算拥有更多的功能,你可以使用枚举:
enum FunctionsEnum { BUTTON, ICON }
callFunc(FunctionsEnum functionsEnum) {
if (functionsEnum == FunctionsEnum.BUTTON) tapButton();
if (functionsEnum == FunctionsEnum.ICON) tapIcon();
}
然后传递一个枚举:onTap: () {callFunc(FunctionsEnum.BUTTON);}