Flutter Stack组件实现上层Widget穿透显示底层对应渐变方案咨询

核心逻辑 #

要实现这个效果，本质是让中间层的ContainerB在ContainerC的位置“挖空”，露出底层ContainerA的渐变；同时让ContainerC的背景与露出的A渐变完全匹配，形成“穿透”的视觉效果，而非毛玻璃模糊。

具体实现步骤 #

• 提取ContainerA的渐变配置
  把ContainerA使用的渐变（如LinearGradient/RadialGradient）单独抽成全局变量，方便后续在ContainerC和裁剪逻辑中复用：

  final Gradient containerAGradient = LinearGradient(
    colors: [Colors.cyan, Colors.indigo],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  );
  

• 给ContainerB添加区域裁剪
  通过自定义裁剪路径，让ContainerB在ContainerC的位置留下空洞，露出下方的ContainerA：

  1. 用GlobalKey标记ContainerC，用来获取它的位置和尺寸：

     final GlobalKey containerCKey = GlobalKey();
     

  2. 自定义CustomClipper，在ContainerB的路径中减去ContainerC的区域（使用PathFillType.evenOdd实现挖空）：

     class BClipper extends CustomClipper<Path> {
       final Rect cRect;
       final Size bSize;
     
       BClipper(this.cRect, this.bSize);
     
       @override
       Path getClip(Size size) {
         return Path()
           ..addRect(Rect.fromLTWH(0, 0, bSize.width, bSize.height))
           ..addRect(cRect)
           ..fillType = PathFillType.evenOdd;
       }
     
       @override
       bool shouldReclip(BClipper oldClipper) => 
           oldClipper.cRect != cRect || oldClipper.bSize != bSize;
     }
     

  3. 在布局完成后，通过GlobalKey获取ContainerC相对于ContainerB的本地坐标，再用ClipPath包裹ContainerB：

     Widget build(BuildContext context) {
       WidgetsBinding.instance.addPostFrameCallback((_) {
         final RenderBox? cRender = containerCKey.currentContext?.findRenderObject() as RenderBox?;
         final RenderBox? bRender = context.findRenderObject() as RenderBox?;
         if (cRender != null && bRender != null) {
           final Offset cLocalOffset = cRender.localToGlobal(Offset.zero, ancestor: bRender);
           setState(() {
             _cRect = Rect.fromLTWH(
               cLocalOffset.dx,
               cLocalOffset.dy,
               cRender.size.width,
               cRender.size.height,
             );
             _bSize = bRender.size;
           });
         }
       });
     
       return Stack(
         alignment: Alignment.center,
         children: [
           ContainerA(gradient: containerAGradient),
           ClipPath(
             clipper: BClipper(_cRect, _bSize),
             child: ContainerB(),
           ),
           ContainerC(key: containerCKey, gradient: containerAGradient),
         ],
       );
     }
     

• 让ContainerC匹配A的渐变
  直接复用之前提取的containerAGradient作为ContainerC的背景，这样C的背景与下方露出的A渐变完全一致，视觉上就像穿透了B：

  class ContainerC extends StatelessWidget {
    final GlobalKey key;
    final Gradient gradient;
  
    const ContainerC({required this.key, required this.gradient, super.key});
  
    @override
    Widget build(BuildContext context) {
      return Container(
        key: key,
        decoration: BoxDecoration(gradient: gradient),
        child: // 你的ContainerC内容
      );
    }
  }
  

• 处理动态布局变化
  如果ContainerC的位置或尺寸会动态改变，需要在布局更新时重新计算裁剪路径，可通过LayoutBuilder或监听WidgetsBinding的布局回调实现。

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