如何让Flutter Stack中的两个Widget均具备可点击性？

问题原因 #

你遇到的核心问题是：Stack中上层的BroadcasterPage因为铺满全屏，默认会拦截所有点击事件——哪怕它的大部分区域是空白的，只要根布局是占满全屏的容器（比如SizedBox、Container），就会阻止下层_videoPanel的点击事件传递。

解决方案 #

方法一：修改上层Widget的点击行为（最简便） #

给BroadcasterPage的根布局套一个GestureDetector，并设置behavior: HitTestBehavior.deferToChild。这个配置的作用是：只有点击到上层Widget内部的可点击组件（比如InkWell、按钮）时才拦截事件，空白区域的点击会自动透传到下层。

修改BroadcasterPage示例：

class BroadcasterPage extends StatelessWidget {
  final ViewModel viewModel;
  const BroadcasterPage({super.key, required this.viewModel});

  @override
  Widget build(BuildContext context) {
    // 用GestureDetector包裹根布局，设置deferToChild行为
    return GestureDetector(
      behavior: HitTestBehavior.deferToChild,
      child: SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: Column(
          children: [
            // 你的可点击按钮/组件
            InkWell(
              onTap: () => print("上层按钮触发"),
              child: Container(height: 50, width: 100, color: Colors.blue),
            ),
            // 其他非可点击元素
          ],
        ),
      ),
    );
  }
}

方法二：自定义穿透容器（进阶需求） #

如果需要更精细的控制（比如只允许特定区域穿透），可以自定义一个RenderObjectWidget，重写hitTest方法，只在子Widget命中点击时拦截，否则放行事件到下层：

// 自定义穿透容器
class PassthroughContainer extends SingleChildRenderObjectWidget {
  const PassthroughContainer({super.key, super.child});

  @override
  RenderObject createRenderObject(BuildContext context) {
    return _PassthroughRenderBox();
  }
}

class _PassthroughRenderBox extends RenderProxyBox {
  @override
  bool hitTest(BoxHitTestResult result, {required Offset position}) {
    // 优先让子组件处理点击
    final didHitChild = super.hitTest(result, position: position);
    // 子组件没命中时，返回false，允许事件透传到下层
    return didHitChild;
  }
}

然后把BroadcasterPage的根容器换成这个自定义组件即可。

方法三：动态切换拦截状态（按需使用） #

如果需要在某些场景下让上层完全拦截点击，某些场景下透传，可以结合GestureDetector的behavior属性动态切换：

• 需要透传时：behavior: HitTestBehavior.deferToChild
• 需要完全拦截时：behavior: HitTestBehavior.opaque

验证效果 #

修改完成后，你的原代码无需变动：

SafeArea(
  top: false, 
  child: Scaffold(  
    body: SizedBox(
      height: context.height,
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Opacity(opacity: 0.9, child: Center(child: _videoPanel(viewModel))),
          BroadcasterPage(viewModel: viewModel)
        ],        
      ),        
    )),        
);

此时点击_videoPanel的InkWell和BroadcasterPage中的可点击元素都会正常响应。

内容的提问来源于stack exchange，提问作者cbsezer