我有以下代码
class MediaOpned extends ConsumerStatefulWidget {
const MediaOpned({
Key? key,
}) : super(key: key);
@override
ConsumerState<MediaOpned> createState() => _MediaOpnedState();
}
class _MediaOpnedState extends ConsumerState<MediaOpned> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: ListView.builder(
itemCount: 5,
itemBuilder: (BuildContext context, int index) {
return
Stack(
children: [
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: Container(
color: Colors.grey,
width: double.infinity,
height: imageHieght,
),
),
CachedNetworkImage(
imageUrl: 'https://evrak.co/uploads/images/2022/10/UvpXJ.webp',
fit: BoxFit.cover ,
),
],
);
},
)
);
}
}我正试图在我的列表中的蓝色图像，你可以说像自定义加载时间。但问题是当图像成功加载时，蓝色仍然可见。
注意，如果项目计数大于1个项目，则会发生这种情况。如果它1个项目，所以蓝色消失时，图像加载，它完全覆盖了它想要的。但当我增加项目计数超过1，所以结果变得奇怪和模糊总是可见
2条答案
按热度按时间ghhkc1vu1#
如果未剪裁BackdropFilter小部件，则它可能会溢出到小部件树的上方。这是因为BackdropFilter小部件将过滤器应用于其子级，并且过滤器可以扩展到子级的边界之外。要防止这种情况，可以使用ClipRect小部件将BackdropFilter小部件裁剪到其子小部件的边界，或者可以尝试使用clipBehavior：Clip.hardEdge
或者
x3naxklr2#
在这种情况下，您应该尝试ImageFiltered。BackdropFilter允许您将过滤器应用于绘制在小部件下方的所有内容，而不是将过滤器应用于小部件本身。它的性能也较差。
正确使用Backdropfilter的方法是这样的（在模糊区域上方清楚地显示一些东西）