示例
毛玻璃组件为 BackdropFilter
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),//控制毛玻璃效果
// 为子组件添加毛玻璃效果
child: Container(
width: double.infinity,
height: 44,
alignment: Alignment.center,
color: Colors.white.withOpacity(0.4),
),
);
但是当 BackdropFilter 与 Stack 一起使用时却有点问题，Stack 整个都被毛玻璃覆盖了。
解决关键是使用 ClipRect 包裹 BackdropFilter
Stack(
alignment: Alignment.bottomCenter,
children: [
Container(
width: 300,
height: 300,
alignment: Alignment.center,
color: Colors.red,
),
// 这里是关键！
ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
child: Container(
width: double.infinity,
height: 44,
alignment: Alignment.center,
color: Colors.white.withOpacity(0.4),
),
),
)
],
);
