了解Flutter的ShaderMask

Question

我试图了解ShaderMask的工作方式。如果我按照ShaderMask文档here上的示例进行操作：

ShaderMask(
  shaderCallback: (Rect bounds) {
    return RadialGradient(
      center: Alignment.topLeft,
      radius: 1.0,
      colors: <Color>[Colors.yellow, Colors.deepOrange.shade900],
      tileMode: TileMode.mirror,
    ).createShader(bounds);
  },
  child: const Text('I’m burning the memories'),
)

我明白了：

（Text下面的双线显然表明缺少Theme）

然后，如果我将同一ShaderMask包围在Scaffold中，我会得到：

Scaffold(
      body: Center(
        child: ShaderMask(
          shaderCallback: (Rect bounds) {
            return RadialGradient(
              center: Alignment.topLeft,
              radius: 1.0,
              colors: <Color>[Colors.yellow, Colors.deepOrange.shade900],
              tileMode: TileMode.mirror,
            ).createShader(bounds);
          },
          child: const Text('I’m burning the memories'),
        ),
      ),
    );

一切都消失了！ ShaderMask似乎已被忽略，并且文档中也没有提及此行为，为什么Scaffold““禁用”“ ShaderMask ？

Answer 1

您丢失了-blendMode属性

有关更多信息-blendMode property

工作代码：

    Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ShaderMask(
          blendMode: BlendMode.srcATop,  // Add this
          shaderCallback: (Rect bounds) {
            return RadialGradient(
              center: Alignment.topLeft,
              radius: 1.0,
              colors: <Color>[Colors.yellow, Colors.deepOrange.shade900],
              tileMode: TileMode.mirror,
            ).createShader(bounds);
          },
          child: const Text('I’m burning the memories'),
        ),
      ),
    );
  }