flutter - 了解 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'),
        ),
      ),
    );
  }