ShaderMask LinearGradient阻止了奇怪的行为

Question

我想使内容的两面（边缘）褪色。

[我同时使用ShaderMask和LinearGradient，但效果很好，除了我不理解为什么我的stops不能正确居中，我使用stops: [0.0, 0.05, 0.95, 1.0]以便将0.05淡化每一面，但得到以下结果（我添加了Container渐变并使用相同的配置进行比较）：

使用调试绘画模式：

我为Container和ShaderMask使用完全相同的光阑，但得到不同的结果。

当然，我可以为stops渐变尝试不同的ShaderMask值，直到我将其居中，但这似乎是hack。

有人可以解释吗？

这是代码，如果有人想尝试一下：

return Container(
  height: 200,
  child: Column(
    children: <Widget>[
      Expanded(
        child: ShaderMask(
          blendMode: BlendMode.modulate,
          shaderCallback: (Rect bounds) {
            return LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              colors: <Color>[Colors.transparent, Colors.white, Colors.white, Colors.transparent],
              stops: [0.0, 0.05, 0.95, 1.0],
              tileMode: TileMode.clamp,
            ).createShader(bounds);
          },
          child: Container(
            color: Colors.blue,
            child: ListView(
              children: <Widget>[
                Text(
                  "I'm a ShaderMask and I don't understand why my gradient don't behave like container's gradient. I'm a ShaderMask and I don't understand why my gradient don't behave like container's gradient.",
                  textAlign: TextAlign.justify,
                )
              ],
            ),
          ),
        ),
      ),
      Expanded(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              colors: [Colors.transparent, Colors.blue, Colors.blue, Colors.transparent],
              stops: [0.0, 0.05, 0.95, 1.0],
              tileMode: TileMode.clamp,
            ),
          ),
          child: ListView(
            children: <Widget>[
              Text(
                "I'm a Container and I don't understand why ShaderMask's gradient don't behave like mine. I'm a Container and I don't understand why ShaderMask's gradient don't behave like mine.",
                textAlign: TextAlign.justify,
              )
            ],
          ),
        ),
      )
    ],
  ),
);

我使用FractionalOffset而不是Alignment.centerRight和Alignment.centerRight获得了相同的结果。

Answer 1

shaderCallback为给定的Shader创建一个Rect，并且Rect坐标相对于给定的[[origin。]

使用子级的当前大小调用着色器回调，以便它可以根据子级的大小和

location

自定义着色器。这意味着我们必须基于不带偏移的子窗口小部件的大小来创建带有Rect的着色器（基本上，传递给shaderCallback的边界是全局坐标，而createShader正在等待局部Rect ]）。

所以一个简单的解决方案是使用正确的原点（偏移）创建一个新的Rect：createShader(Rect.fromLTRB(0, 0, bounds.width, bounds.height))。

或更漂亮的速记：createShader(Offset.zero & bounds.size)：

shaderCallback: (Rect bounds) {
  return LinearGradient(
    begin: Alignment.centerLeft,
    end: Alignment.centerRight,
    colors: <Color>[Colors.transparent, Colors.blue, Colors.blue, Colors.transparent],
    stops: [0.0, 0.04, 0.96, 1.0],
    tileMode: TileMode.clamp,
  ).createShader(Offset.zero & bounds.size);
},

pskink的积分！