[英]How can I make these image half normal and half transparent in flutter?
I want the top of the image to look perfect (opaque) and the bottom of the image will transparent .我希望图像的顶部看起来完美(不透明)并且图像的底部是透明的。 how can I do it?我该怎么做?
SizedBox(
width: double.infinity,
height: 400,
child: Stack(
children: [
Positioned(
left: 0,
height: 450,
child: Image.asset(
'assets/images/face_woman.png',
),
),
Positioned(
right: -40,
top: 0,
height: 450,
child: Image.asset(
'assets/images/face_man.png',
),
)
],
),
)
Alternative approach:替代方法:
AssetImage img = const AssetImage('...');
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image(
alignment: Alignment.topCenter,
image: img,
width: {width of the image},
height: {height of the image/2},
fit: BoxFit.fitWidth,
),
Opacity(
opacity: 0.3,
child: Image(
alignment: Alignment.bottomCenter,
image: img,
width: {width of the image},
height: {height of the image/2},
fit: BoxFit.fitWidth,
),
),
],
),
),
);
Wrap your images with Opacity
widget:使用Opacity
小部件包装您的图像:
SizedBox(
width: double.infinity,
height: 400,
child: Stack(
children: [
Positioned(
left: 0,
height: 450,
child: Opacity(
opacity: 0.5,
child: Image.asset(
'assets/images/face_woman.png',
),
),
),
Positioned(
right: -40,
top: 0,
height: 450,
child: Opacity(
opacity: 0.5,
child: Image.asset(
'assets/images/face_man.png',
),
),
)
],
),
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.