写在前面
Flutter中的高斯模糊（毛玻璃）大家应该都不陌生，我们可以用它实现画中画，阅后即焚，付费看高清等功能，是常用的UI组件。目前我正在做的项目中使用的点是 阅后即焚 IM中发送图片的功能
先放一张图
实现页面
通常处理
Stack(
children: [
CachedNetworkImage(imageUrl: path, fit: BoxFit.cover, width: width, height: height),
Container(
alignment: Alignment.center,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(10.fit)),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(color: Colors.white.withAlpha(0)),
),
),
],
)
很简单 就实现了我们想要的效果，到这里就完了吗，也不是 我们滑动页面debug模式先会明显看到页面的卡顿，这是我们所不允许的，使用DevTools看滑动过程中的看绘制情况
2个图片的绘制情况
系统filter绘制情况
优化
上图我们发现滑动过程中绘制情况不容乐观 这也是出现卡顿的原因
那有没有别的方法呢，当然有,看具体代码
Widget _blur(double width, double height) {
loadNetImage(msg.image?.remotePath ?? '');
return Obx(
() => image.value != null
? CustomPaint(
size: Size(width, height), painter: GlassPainter(image.value!, Size(image.value!.width.toDouble(), image.value!.height.toDouble())))
: Container(),
);
return Container(
alignment: Alignment.center,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(10.fit)),
child: BackdropFilter(
filter: ui.ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(color: Colors.white.withAlpha(0)),
),
);
}
// 这里是加载的网络图片 同样可以换为本地图片或是加载file文件
Future loadNetImage(String path) async {
final data = await NetworkAssetBundle(Uri.parse(path)).load(path);
final bytes = data.buffer.asUint8List();
final imageD = await decodeImageFromList(bytes);
image.value = imageD;
}
class GlassPainter extends CustomPainter {
final ui.Image image;
final Size imageSize;
final Paint _paint = Paint()
..color = Colors.white.withOpacity(0.8)
..style = PaintingStyle.fill
..imageFilter = ui.ImageFilter.blur(sigmaX: 10, sigmaY: 10, tileMode: TileMode.decal);
GlassPainter(this.image, this.imageSize);
@override
void paint(Canvas canvas, Size size) {
final Rect rect = Offset.zero & size;
canvas.drawImageRect(image, Rect.fromLTWH(0, 0, imageSize.width, imageSize.height), rect, _paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
加载本地、file、相册图片
// 本地资源图片
Future loadIamge(String path) async {
// 加载资源文件
final data = await rootBundle.load(path);
// 把资源文件转换成Uint8List类型
final bytes = data.buffer.asUint8List();
// 解析Uint8List类型的数据图片
final image = await decodeImageFromList(bytes);
this.image = image;
setState(() {});
}
// 可绘制对象
Future loadLocalImage(String path) async {
// 通过字节的方式读取本地文件
final bytes = await File(path).readAsBytes();
// 解析图片资源
final image = await decodeImageFromList(bytes);
this.image = image;
setState(() {});
}
看代码 我们发现 我们不使用系统提供给我们的封装好的组件 我们选择了 自己去绘制图片同时设置画笔的高斯模糊效果，同样是两个图片 看滑动的性能
优化后
优化后 滑动明显好了很多，这只是两个图片 若是列表存在更多图片的话 这种优化会更明显
写在最后
性能有一个不小的提升 但是有个小问题 图片没有做缓存 这里还需要自己对图片进行缓存处理 防止多次下载同一张图片
据说Flutter版本3.22 对 ImageFillter性能做了优化，目前我还没有测试
有测试过的小伙伴 或是有更优化方法 欢迎交流
