如何防止点击 GestureDetector 子 Flutter

How to prevent clicking on GestureDetector child Flutter

我在 GestureDetector 中有一个按钮。 GestureDetectorIconButton 都有自己的功能。但是,我只想在点击图标时执行 GestureDetector 而不是 ```IconButton`` 的功能。我知道这个问题的一些解决方案,但我仍然想知道在上面的情况下,是否有任何解决方案可以防止 flutter 执行 IconButton 的功能?

谢谢

解决方案 1:您可以只向 IconButton onPressed method.

提供一个空函数

解决方案 2:编写一个单独的函数并根据您的要求传递一个参数来触发该函数。

点击优先级 child> GesuterDetector。如果您在 GestureDetector 上有一个 child 作为 IconButton,则只有 IconButton 可以。

假设您有一个专栏。

  • 您可以根据条件在 IconButtononPressed 上传递 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);}