Flutter 中 ClipRRect 与 BackdropFilter 实现毛玻璃效果

本文的文案由GPT4生成

在 Flutter 中，我们经常会遇到需要实现毛玻璃效果的场景。这种效果在设计中可以使得 UI 更加美观，提高用户体验。本文将介绍如何使用 ClipRRect 和 BackdropFilter 结合实现毛玻璃效果，并阐述不使用 ClipRRect 会导致整个背景模糊的原因。

使用 ClipRRect 与 BackdropFilter 实现毛玻璃效果

下面是一个简单的例子，我们创建了一个带有毛玻璃效果的 Toast 组件。

import 'dart:ui';
import 'package:flutter/material.dart';

static OverlayEntry toastEntry({required Widget child}) {
    final OverlayEntry overlayEntry = OverlayEntry(
      builder: (BuildContext context) => Positioned(
        bottom: 64,
        child: SafeArea(
          top: false,
          child: Material(
            color: Colors.transparent,
            child: Container(
              alignment: Alignment.center,
              width: MediaQuery.of(context).size.width - 40,
              height: 56.0,
              margin: const EdgeInsets.only(left: 20.0),
              decoration: BoxDecoration(
                color: const Color.fromRGBO(13, 12, 20, 0.6),
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(8.0),
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                  child: child,
                ),
              ),
            ),
          ),
        ),
      ),
    );
    return overlayEntry;
  }

首先，我们需要创建一个 OverlayEntry 对象，这个对象将用于展示我们的 Toast 组件。在 OverlayEntry 的构造函数中，我们使用 Positioned 将其定位到距离底部 64 像素的位置。

然后，我们使用 SafeArea 包裹整个组件，避免 Toast 被全面屏底部非安全区域遮挡。接着用一个 Material 组件设置透明背景，使得其内部的组件可以继承主题样式。

接下来是实现毛玻璃效果的关键部分：

使用 ClipRRect 对子组件进行裁剪，这里的圆角半径为 8.0。
使用 BackdropFilter 对子组件设置背景模糊滤镜，这里使用的是高斯模糊，sigmaX 和 sigmaY 分别设置为 10。sigmaX 和 sigmaY 参数分别控制水平和垂直方向上的模糊程度。较高的值会产生更模糊的效果。

最后将传入的子组件 child 作为 BackdropFilter 的子组件，完成整个实现。

不使用 ClipRRect 会导致整个背景模糊

如果我们去掉 ClipRRect，BackdropFilter 会使得整个背景模糊，而不是仅仅模糊父组件区域。这是因为 BackdropFilter 会应用于其内部所有子组件的绘制区域，并且没有限制。如果不使用 ClipRRect 对子组件进行裁剪，BackdropFilter 会将模糊效果扩散到整个背景。

因此，为了实现仅在父组件区域内的毛玻璃效果，我们需要使用 ClipRRect 对子组件进行裁剪，限制模糊效果的范围。

总结

本文介绍了如何在 Flutter 中使用 ClipRRect 与 BackdropFilter 结合实现毛玻璃效果，以及不使用 ClipRRect 会导致整个背景模糊的原因。希望这篇文章能帮助您更好地理解和使用这两个组件来实现美观的 UI 效果。

参考文献：
https://api.flutter.dev/flutter/widgets/BackdropFilter-class.html

Flutter 中 ClipRRect 与 BackdropFilter 实现毛玻璃效果