本文的文案由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
