Flutter：如何在Flutter中使图像的某些区域透明？

Question

我希望 Doctor 图像的下部路径变得透明，以便我可以看到其下方的瓷砖。我怎样才能做到这一点？我尝试了不透明度，但它使整个图像褪色。

只记住下半部分而不是整个图像

Answer 1

对于同一图像中的不同不透明度，您可以使用 ShaderMask，如下所示：

ShaderMask(
        shaderCallback: (rect) {
          return LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: <Color>[
                    Colors.black.withOpacity(1.0),
                    Colors.black.withOpacity(1.0), 
                    Colors.black.withOpacity(0.3), 
                    Colors.black.withOpacity(0.3),// <-- change this opacity
          // Colors.transparent // <-- you might need this if you want full transparency at the edge
        ],
        stops: [0.0, 0.5,0.55, 1.0], //<-- the gradient is interpolated, and these are where the colors above go into effect (that's why there are two colors repeated)
          ).createShader(Rect.fromLTRB(0, 0, rect.width, rect.height));
        },
        blendMode: BlendMode.dstIn,
        child: FlutterLogo(size: 80, colors: Colors.red),
      ),

您必须尝试使用​​ LinearGradient 停止点才能获得您想要的效果。为了完整起见，让我解释一下我选择的颜色和停靠点。由于渐变是插值的，因此您需要从一种颜色到另一种颜色的非常有力的步骤。因此，查看停止点和颜色，其内容如下：从向下的 0% 处开始第一种颜色（不透明度 = 1.0），直到达到向下的 50%，然后从 50% 插值到 55 % 从不透明度 1.0 到不透明度 0.3（这就是为什么这些数字需要靠近）最后，以图像 100% 处的不透明度 0.3 结束。我解释了该部分，因为您必须调整 0.5 和 0.55 部分才能使其看起来像您想要的那样。