2025年2月12日:3.29.0发布 。
在Flutter 3.29.0 版本中,ImageFilter.blur的默认平铺模式现在由后端自动选择。以前使用TileMode.clamp,除非指定了不同的图块模式。现在,默认值为null,并指定自动选择,除非指定了特定的磁贴模式。
Flutter 提供了以下四种 TileMode 模式:
SizedBox(
width: 300,
height: 200,
child: Stack(
children: [
Positioned.fill(
child: Image.asset('assets/images/tian.png', fit: BoxFit.fill),
),
ImageFiltered(
imageFilter: ImageFilter.blur(
sigmaX: 5,
sigmaY: 5,
tileMode: TileMode.decal,
),
child: Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.5),
),
child: Image.asset('assets/images/test.png'),
),
),
],
),
),
TileMode.clamp
边缘颜色延伸:将渐变边缘的颜色无限延伸到剩余区域。
例如:如果渐变的最后一个颜色是红色,超出渐变范围的区域会全部填充红色。
效果类似 CSS 的 clamp 模式。
TileMode.repeated
重复平铺:将渐变或图像从头到尾无限重复,不进行任何镜像处理。
例如:渐变会像贴瓷砖一样重复排列。
适合创建无缝重复的图案。
TileMode.mirror
镜像重复:每次重复时,渐变或图像会反向排列,形成镜像效果。
例如:A-B-C 会变成 A-B-C-B-A-B-C…,避免重复时的生硬接缝。
适合需要平滑过渡的场景。
TileMode.decal (仅在 Flutter 3.0+ 中支持)
仅填充原始区域:超出原始范围的部分会被透明填充(如果图像有透明度),否则显示未定义行为。
适用于需要严格限制绘制范围的情况。
BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10,
sigmaY: 10,
tileMode: TileMode.decal, // 边缘透明,避免颜色延伸
),
child: Container(color: Colors.black.withOpacity(0.3)),
)
通常需要将 BackdropFilter 包裹在 ClipRect 中,限制模糊范围,避免全屏模糊:
ClipRect(
child: BackdropFilter(...),
)