Flutter Web中Stack设置clipBehavior仍无法裁剪溢出子组件如何解决

问题根因 #

Flutter 2.5.x版本Web端环境下，网格布局嵌套的Stack组件单独设置clipBehavior属性无法触发自动裁剪，属于该版本的已知特性差异，需要通过额外的裁剪组件强制约束内容边界。

解决方法 #

在原有Stack组件外层包裹ClipRect组件即可实现超出边界内容自动隐藏，原有AnimatedAlign的动画效果不受任何影响。

修改后的核心代码 #

仅需要调整_AppXState类的build方法中Stack相关的嵌套逻辑即可：

@override
Widget build(BuildContext context) {
  print("ItemWidth : ${widget.maxWidth}");
  return SizedBox(
    width: widget.maxWidth,
    height: widget.maxWidth,
    child: InkWell(
      onTap: () {},
      hoverColor: Colors.black,
      onHover: (value) {
        setState(() {
          _isHovered = value;
        });
      },
      // 新增ClipRect包裹Stack，强制裁剪超出边界的内容
      child: ClipRect(
        child: Stack(
          clipBehavior: Clip.antiAliasWithSaveLayer,
          children: [
            Container(
              color: Colors.deepOrange.withOpacity(.2),
            ),
            AnimatedAlign(
              alignment: Alignment(0, _isHovered ? .7 : 2),
              child: Container(
                padding: const EdgeInsets.all(22),
                color: Colors.greenAccent,
                child: const Text(
                  "Pop POp",
                ),
              ),
              duration: const Duration(
                milliseconds: 200,
              ),
            )
          ],
        ),
      ),
    ),
  );
}

效果验证 #

修改后悬停触发弹出动画时，Pop POp组件不会再超出GridItem的边界显示，收起动画也能正常运行，完全符合需求。

内容的提问来源于stack exchange，提问作者Md. Yeasin Sheikh