颤振混合/屏蔽堆栈中另一个小部件下的多个小部件

Posted 2023-02-23

【中文标题】颤振混合/屏蔽堆栈中另一个小部件下的多个小部件

【英文标题】：Flutter blend/mask multiple widgets under another widget in a stack

【发布时间】：2021-02-19 12:32:48

【问题描述】：

我正在尝试在堆栈中的特定小部件下混合多个小部件。例如，在这个 Stack...

        Stack(
            children: [
              Container(
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage('images/desert.jpg'))),
              ),
              Center(
                  child: Text('Hello, World',
                      style: TextStyle(fontSize: 40, color: Colors.white)))
            ],
          ),

...颜色过滤器将以文本的形状应用于容器。

上面的代码产生了这个：

我正在尝试实现类似的目标：

在这种情况下，文本会根据特定的 BlendMode（例如差异、排除、乘法、除法）更改下面小部件的颜色。

堆栈溢出的另一个用户问了一个question（未回答），这类似于我正在寻找的两个小部件相互混合的地方。

是否可以使用 Flutter 实现类似的效果（使用 CustomPainter 或其他方式）？大多数改变小部件颜色和属性的小部件只影响其子级（ColorFiltered、ShaderMask），而我能想到的唯一影响堆栈中它下面的小部件的小部件是 BackdropFilter。

它可以在任何小部件之间工作吗？

【参考方案1】：

我们必须实现类似的东西。带有ColorBurn 渐变蒙版的图像。无论我们在网上尝试了多少建议的解决方案，都无法获得与 Adob​​eXD 相同的结果。所以，最后我们不得不使用adobe_xd 插件，看看它是如何将设计转化为 Flutter 的。原来它使用了 BlendMask，它不在 Flutter 中，但我们可以找到它 here，并得到了我们想要的结果。

【讨论】：

在这里查看我对一个非常相似的问题的回答：***.com/questions/62620579/…。我获得的结果非常酷，它适用于所有小部件。