Question

是否有一种方法可以使图像逐渐淡出底部？因此，图像的底部透明度为0。

我需要图像是透明的，我不能使用堆栈在图像的底部覆盖颜色，因为我不知道图像的底下是什么。

这是我的图片

            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  fit: BoxFit.cover,
                  colorFilter: new ColorFilter.mode(Colors.black.withOpacity(1), BlendMode.dstATop),
                  image: NetworkImage(
                    routine.thumbnail
                  )
                )
              ),
            )

我不能这样做：

        background: Stack(
          alignment: AlignmentDirectional.bottomCenter,                        
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: NetworkImage(
                    routine.thumbnail,
                  )
                )
              ),
            ),
            Container(
              width: 1000,
              height: 100,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: FractionalOffset.topCenter,
                  end: FractionalOffset.bottomCenter,
                  colors: [
                    Colors.transparent,
                    someColor // I don't know what Color this will be, so I can't use this
                  ]
                )
              ),
            ),
          ]
        ),

Answer 1

您需要一个ShaderMask，如下所示：

ShaderMask(
  shaderCallback: (rect) {
    return LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Colors.black, Colors.transparent],
    ).createShader(Rect.fromLTRB(0, 0, rect.width, rect.height));
  },
  blendMode: BlendMode.dstIn,
  child: Image.asset(
    'assets/chrome.png',
    height: 400,
    fit: BoxFit.contain,
  ),
),

此处shaderCallback用于返回用作遮罩的线性渐变，并在BlendMode.dstIn混合模式下从顶部到底部淡出您的图像

颤动的图像在底部淡出（渐变）

1 个答案: