0

我对 BackdropFilter 小部件在 Flutter 中的工作方式感到非常困惑。直觉上，我希望小部件简单地将过滤器应用于其子项的约束，但情况似乎并非如此。

例如：

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

该代码的结果如下所示：

在此处输入图像描述

第一个文本是模糊的，而孩子不受影响。

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

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'),
          ],
        ),
      ),
    ],
  )

结果将是：

在此处输入图像描述

这里的机制到底是什么？过滤器是否仅适用于 BackdropFilter 的祖先以及在它之前声明的兄弟姐妹，而不适用于它的孩子？孩子的目的是什么？

附言

我知道在树中的某处添加 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'),
            ],
          ),
        ),
      ),
    ],
  )

这将导致：

在此处输入图像描述

我的问题仍然存在。

4

1 回答 1

2

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

于 2019-12-30T10:53:17.040 回答