Flutter Stack组件下层子Widget点击无响应如何解决？

问题根因 #

你当前遇到的点击失效问题本质是两个原因共同导致的：

1. Stack的所有子节点都被Positioned包裹，Stack默认不会根据Positioned子节点的尺寸计算自身宽高，导致Stack自身尺寸为0。即使设置了overflow: Overflow.visible能让子节点显示在Stack外部，这些超出区域也无法参与命中测试，自然响应不了点击。
2. 上层的Positioned没有设置明确的位置约束，命中测试范围远大于可见的黄色按钮区域，额外的透明区域会拦截下层的点击事件。

最优解决方案 #

给Stack明确设置宽高覆盖所有交互区域，同时给上层Positioned设置明确的位置约束，限制它的命中测试范围只有黄色按钮大小。

修改后的完整代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(AllTests());
}

class AllTests extends StatefulWidget {
  const AllTests({Key? key}) : super(key: key);

  @override
  _AllTestsState createState() => _AllTestsState();
}

class _AllTestsState extends State<AllTests> {
  IconData home = Icons.home;
  IconData play = Icons.play_circle_filled;
  onHomePress() {
    if (home == Icons.home) {
      home = Icons.account_balance_wallet_rounded;
    } else {
      home = Icons.home;
    }
  }
  onPlayPress() {
    if (play == Icons.play_circle_filled) {
      play = Icons.pause_circle_filled_rounded;
    } else {
      play = Icons.play_circle_filled;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Stack(
                overflow: Overflow.visible,
                // 新增：明确设置Stack宽高，覆盖所有交互区域
                width: 500,
                height: 350,
                children: [
                  Positioned(
                    top: 50,
                    child: Container(
                      height: 300,
                      width: 500,
                      color: Colors.pink,
                      child:  IconButton(
                        icon: Icon(
                          play,
                          size: 80,
                          color: Colors.black,
                        ),
                        onPressed: () {
                          setState(() {
                            print('hello');
                            onPlayPress();
                          });
                        },
                      ),
                    ),
                  ),
                  Positioned(
                    // 新增：明确设置上层按钮位置，限制命中范围
                    top: 0,
                    left: 40,
                    child: Container(
                      height: 100,
                      width: 100,
                      color: Colors.yellow,
                      child:  IconButton(
                        icon: Icon(
                          home,
                          size: 80,
                          color: Colors.black,
                        ),
                        onPressed: () {
                          setState(() {
                            onHomePress();
                          });
                        },
                      ),
                    ),
                  )
                ]),
          ],
        ),
      ),
    );
  }
}

特殊场景解法 #

如果你确实需要上层组件覆盖整个下层区域，仅允许部分上层区域响应点击、其余区域点击透传到下层，可以给上层组件包裹GestureDetector并设置命中测试行为：

GestureDetector(
  // 仅点击到上层的子控件时才响应，其余区域点击透传给下层
  behavior: HitTestBehavior.deferToChild,
  child: 你的上层组件,
)

如果上层组件完全不需要响应点击，直接用IgnorePointer包裹上层组件即可，所有点击都会透传到下层。

内容的提问来源于stack exchange，提问作者Samuella M. Aglago