flutter - ShaderMask LinearGradient停止奇怪的行为

Question

我想使内容的两面(边缘)褪色。

我将ShaderMask和LinearGradient一起使用，除了它不了解为什么我的stops不能正确居中的原因之外，它的工作原理非常好，我使用stops: [0.0, 0.05, 0.95, 1.0]以便应在每一侧将其褪色0.05，但得到以下提示(我添加了一个具有相同配置的Container梯度进行比较):



使用调试绘制模式:



我对Container和ShaderMask使用完全相同的停靠点，但得到了不同的结果。

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

有人可以解释吗？

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

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坐标相对于给定的原始。

使用子级的当前大小调用着色器回调，以便可以根据子级的大小和位置定制着色器。

这意味着我们必须根据子窗口小部件的大小(不带偏移)创建带有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!