有没有一种方法可以使图像逐渐淡出底部?因此,图像底部的透明度为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 ] ) ), ), ] ),
您需要一个ShaderMask,例如:
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混合模式下从顶部到底部淡出图像
shaderCallback
BlendMode.dstIn