flutter - 按钮由于彼此靠近而重叠现在我无法点击 Flutter 下方的按钮

Question

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

如您所见，我无法点击位于其他 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,left: 180/392 * width,videoLink: 'https://giant.gfycat.com/DazzlingUnsightlyHairstreakbutterfly.webm',lineUpLink: 'https://media.discordapp.net/attachments/763777060636065812/826612884212678656/unknown.png',),// Vent
        Cloud(bottom: 300/782 * height,left: 205/392 * width,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
        ],
      ),

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

谢谢你。

标签： flutterdartlayoutfrontendoverlapping

Answer 1

请发布您处理点击手势的逻辑。根据您发布的图片，您似乎正在使用其中包含“云”的容器堆栈，并且您的手势检测器正在包装父容器。

我建议你使用两个堆栈。

第一个堆栈与您现在拥有的完全一样，但没有在容器周围包裹手势检测器，只需将它们保持在容器+云中即可。

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

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

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