【问题标题】: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。

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

【问题讨论】:

    标签: flutter dart flutter-layout custom-painting


    【解决方案1】:

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

    【讨论】:

    猜你喜欢
    • 2018-11-21
    • 2021-09-25
    • 2020-06-05
    • 1970-01-01
    • 2020-04-13
    • 2020-11-08
    • 2020-11-15
    • 2021-05-10
    • 1970-01-01
    相关资源
    最近更新 更多