我如何创建一个半透明的背景,里面有透明的孔?我尝试将装饰和前景装饰与不同的混合模式,堆栈,ClipRect,滤色器一起使用,但没有任何效果。我将 不胜感激。谢谢!
在“最简单”的方法我发现这样做是使用ColorFiltered的Widget与一个堆栈。
以下代码将完全创建您所需的代码:
@override Widget build(BuildContext context) { return Material( child: Stack( fit: StackFit.expand, children: [ Image.network( 'https://wallpaperplay.com/walls/full/e/5/3/13586.jpg', fit: BoxFit.cover, ), ColorFiltered( colorFilter: ColorFilter.mode( Colors.black.withOpacity(0.8), BlendMode.srcOut), // This one will create the magic child: Stack( fit: StackFit.expand, children: [ Container( decoration: BoxDecoration( color: Colors.black, backgroundBlendMode: BlendMode.dstOut), // This one will handle background + difference out ), Align( alignment: Alignment.topCenter, child: Container( margin: const EdgeInsets.only(top: 80), height: 200, width: 200, decoration: BoxDecoration( color: Colors.red, borderRadius: BorderRadius.circular(100), ), ), ), Center( child: Text( 'Hello World', style: TextStyle(fontSize: 70, fontWeight: FontWeight.w600), ), ) ], ), ), ], ), ); }
您不仅可以在视图上创建“孔”,还可以使用任何东西!包括文字等