android - 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 件才能使其看起来像您想要的样子。