由于彼此靠近，按钮现在重叠了我无法在 Flutter 中点击下方的按钮

如何解决由于彼此靠近，按钮现在重叠了我无法在 Flutter 中点击下方的按钮

我无法让按钮不重叠，所以我可以像下面一样分别点击它们

如您所见，我无法点击位于其他 3 个按钮下方的按钮。

这是屏幕的正常图片，其中云似乎可以点击但不容易到达。

这是我的云按钮代码

class Cloud extends StatelessWidget {
  Cloud({this.width,this.height,this.bottom,this.left,this.lineUpLink,this.right,this.top,this.videoLink});
  final String videoLink;
  final String lineUpLink;
  final double bottom;
  final double left;
  final double right;
  final double top;
  final double height;
  final double width;
  @override
  Widget build(BuildContext context) {

    return Positioned(
      bottom: bottom,left: left,width: width,height: height,top: top,right: right,child: IconButton(
        icon: Image.asset('images/cloud30.png'),onPressed: () {
          final getLink = GetLink(
            link: videoLink,lineLink: lineUpLink,);

          Navigator.push(
            context,MaterialPageRoute(
                builder: (context) => VideoApp(link: getLink.link,lineupLink: getLink.lineLink,)),);
        },),);
  }
}

这是我在主屏幕中的堆栈代码。

      fit: StackFit.expand,children: [
        //T Smokes
        Center(child: Image.asset('images/nuke.png')),Cloud(top: 310/782 * height,left: 185/392 * width,videoLink: 'https://giant.gfycat.com/NarrowImpassionedCero.webm',lineUpLink: 'https://firebasestorage.googleapis.com/v0/b/flash-chats-2f263.appspot.com/o/Nuke%2F1.png?alt=media&token=1116e338-07b3-4780-b919-4ce3fa1b68a6',//Ramp
        Cloud(top: 350/782 * height,right: 125/392 * width,videoLink: 'https://giant.gfycat.com/ThreadbareSecondBat.webm',lineUpLink: 'https://firebasestorage.googleapis.com/v0/b/flash-chats-2f263.appspot.com/o/Nuke%2F2.png?alt=media&token=884fed00-8d42-41be-87f5-65cc81c2a684',//Heaven
        Cloud(top: 355/782 * height,right: 95/392 * width,videoLink: 'https://giant.gfycat.com/InformalHeartfeltAfricanclawedfrog.webm',lineUpLink: 'https://firebasestorage.googleapis.com/v0/b/flash-chats-2f263.appspot.com/o/Nuke%2F3.png?alt=media&token=f0d61fd2-8527-48cf-8062-5187f6be7cf1',//Outside Heaven
        Cloud(bottom: 290/782 * height,left: 180/392 * width,videoLink: 'https://giant.gfycat.com/AdolescentThisCornsnake.webm',lineUpLink: 'https://firebasestorage.googleapis.com/v0/b/flash-chats-2f263.appspot.com/o/Nuke%2F4.png?alt=media&token=ce9e6dca-4dbc-42b1-8de3-c5f68576ca47',//T Red
        Cloud(bottom: 325/782 * height,left: 205/392 * width,videoLink: 'https://giant.gfycat.com/JovialQuaintHackee.webm',lineUpLink: 'https://firebasestorage.googleapis.com/v0/b/flash-chats-2f263.appspot.com/o/Nuke%2F6.png?alt=media&token=37d4ca8e-e39b-479c-a7cc-c8dac7c37ec0',//Mini Inside
        Cloud(bottom: 275/782 * height,right: 130/392 * width,videoLink: 'https://giant.gfycat.com/HomelyGiganticGallinule.webm',lineUpLink: 'https://firebasestorage.googleapis.com/v0/b/flash-chats-2f263.appspot.com/o/Nuke%2F7.png?alt=media&token=73d4f4bd-9f78-42da-8102-cdb341c8ebef',//Outside passing red
        Cloud(bottom: 300/782 * height,right: 100/392 * width,videoLink: 'https://giant.gfycat.com/WarpedGrandioseHerald.webm',lineUpLink: 'https://media.discordapp.net/attachments/688396703685935154/826611169145126932/unknown.png',//Garage
        Cloud(bottom: 335/782 * height,videoLink: 'https://giant.gfycat.com/DazzlingUnsightlyHairstreakbutterfly.webm',lineUpLink: 'https://media.discordapp.net/attachments/763777060636065812/826612884212678656/unknown.png',// Vent
        Cloud(bottom: 300/782 * height,videoLink: 'https://giant.gfycat.com/ForcefulExaltedErne.webm',lineUpLink: 'https://firebasestorage.googleapis.com/v0/b/flash-chats-2f263.appspot.com/o/Nuke%2F5.png?alt=media&token=189d94eb-cde6-452d-a0a3-56ec7c544c11',//T red T side left
        Cloud(bottom: 330/782 * height,right: 112/392 * width,videoLink: 'https://giant.gfycat.com/FeistyReasonableEkaltadeta.webm',lineUpLink: 'https://media.discordapp.net/attachments/763777060636065812/826614730097426522/unknown.png',//CT Red
        ],

请问有人可以帮我找到这个问题的解决方案吗？

谢谢。

解决方法

请发布您处理点击手势的逻辑。根据您发布的图片，您似乎正在使用内部带有“云”的成堆容器，并且您的手势检测器正在包裹父容器。

我建议您使用两个堆栈。

第一个堆栈与您现在拥有的堆栈完全相同，但无需在容器周围包裹手势检测器，只需将它们保留为容器 + 云。

使用第二个堆栈，它位于您当前堆栈的前面，仅包含包裹空容器的手势检测器，但宽度和高度等于云的内径。将此堆栈放置在云堆栈的前面，同时将这些空容器的中心与云的中心对齐。并在此处的手势检测器中使用 behavior: HitTestBehavior.translucent 的属性。

假设您的云的宽度和高度为 30 像素[请注意，云的尺寸，而不是它们的父容器），请使用：

GestureDetector(
  behavior: HitTestBehavior.translucent,child: Container (height: 30,width:30),onTap: (){//your logic here})