BackdropFilter如何应用它的过滤器?

时间:2019-12-30 10:37:33

标签: flutter flutter-widget

对于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可以应用于多个或部分小部件。