Flutter 高斯模糊 毛玻璃

示例

毛玻璃组件为 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),
        ),
      ),
    )
  ],
);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容