flutter - 为什么背景过滤器无法正常工作
问题描述
我试图在颤振中实现背景过滤器,但它不起作用。
ClipRect(
child:BackdropFilter(filter:ui.ImageFilter.blur(
sigmaX: 5.0,
sigmaY: 5.0,
),
child: Container(
child: (Image.file(
_image,
height: 400,
width: 400,
fit: BoxFit.cover,
)),
),
),
)
解决方案
您必须使用堆栈并将其ImageFilter
放在要模糊的图像顶部,或者您可以使用该colorBlendMode:
属性。
Container(
child: (Image.file(
_file,
height: 400,
colorBlendMode: BlendMode.overlay,
color: Colors.grey.withOpacity(0.5),
width: 400,
fit: BoxFit.cover,
)),
),
),
带堆栈 -
child: ClipRect(
child: Stack(
children: <Widget>[
Card(
margin: EdgeInsets.only(right: 20),
elevation: 16,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: Container(
height: 220 * _zoomAnim.value,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
fit: BoxFit.fitHeight,
image: AssetImage('images/tour$index.jpg'))),
),
),
Container(
height: 220,
width: 150,
child: BackdropFilter(
child: Container(
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.2),
borderRadius: BorderRadius.circular(20)),
),
filter: ImageFilter.blur(sigmaX: 1, sigmaY: 0),
),
),)...]))
推荐阅读
- react-native - 如何在 Jest 中运行 expo-sqlite 测试?
- rust - 保持全局 hashmap 值与 struct hashmap 值同步
- java - 对于流式日志,JNA 回调性能太慢。如何改进?
- python - Python 中的 3d 函数和矩阵——我应该使用 NumPy 吗?
- java - 泰语字符渲染问题
- data-structures - 这个循环如何运行 nlogn 次?(对于 (j = 2; j <= n; j = j * 2) )
- javascript - Angular使用索引名称从json中检索数据
- javascript - 如何摆脱重复的数字
- statistics - 如何检查数据点在其分布中是否重要
- diff - 在希伯来语中使用 diff