BackdropFilter如何应用它的过滤器？ Download


对于Flutter中的BackdropFilter小部件的工作方式，我感到非常困惑。 凭直觉，我希望该小部件仅将过滤器应用于其子级的约束，但这似乎并非如此。

例如：

Column(
      children: [
        Text('Hello world 1'),
        BackdropFilter(filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), 
            child: Text('Hello world 2'),
        ),
        Text('Hello world 3'),
      ],
    )

该代码的结果如下：

enter image description here

孩子不受影响时，第一个文本模糊。

另外，如果我要尝试这样的事情：

child: Column(
    children: [
      Text('Hello world 0'),
      Container(
        child: Column(
          children: [
            Text('Hello world 1'),
            BackdropFilter(filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), 
               child: Text('Hello world 2'),
            ),
            Text('Hello world 3'),
          ],
        ),
      ),
    ],
  )

结果将是：

enter image description here

这里的机制到底是什么？筛选器是否仅适用于BackdropFilter的祖先以及在其之前声明的同级兄弟，而不适用于其子级？孩子的目的是什么？

PS

我知道在树中的某个位置添加ClipRect会停止将过滤器应用到其任何祖先或先前声明的同级兄弟中，

Column(
    children: [
      Text('Hello world 0'),
      ClipRect(
        child: Container(
          child: Column(
            children: [
              Text('Hello world 1'),
              BackdropFilter(filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), child: Text('Hello world 2')),
              Text('Hello world 3'),
            ],
          ),
        ),
      ),
    ],
  )

这将导致：

enter image description here

我的问题仍然有效。

1 个答案:

答案 0 :(得分：1)

颤振BackdropFilter应用于它下面的子级（例如，堆栈中的子级），而不是子级。这样BackdropFilter可以应用于多个或部分小部件。



Similar searches