gpt4 book ai didi

flutter - 如何在Flutter中在图像的透明部分上显示其背后的图像?

转载 作者:行者123 更新时间:2023-12-03 03:57:09 25 4
gpt4 key购买 nike

enter image description here
enter image description here

我从设计师那里得到了一个屏幕草图,其中包括一个带有两个按钮的菜单,这两个按钮基本上是图像,当一个按钮继续切成另一个按钮的三角形时。
我试图创建一个带有透明三角形的图像,然后将其放入“堆栈”小部件中的图像中,但是透明三角形显示为黑色,而不是我期望的红色图像的一部分。
我希望在它后面显示红色图像。有我的代码:

Expanded(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
MenuButton(
buttonText: Constants.X,
destinationScreen: X.id,
backgroundImage: "red_check.jpg",
),
Positioned(
top: 170.0,
child: SizedBox(
width: 320,
height: 170,
child: MenuButton(
buttonText: Constants.Y,
destinationScreen: Y.id,
backgroundImage: "yellow_check.png",
bCover: false,
),
),
),
],
),
),

class MenuButton extends StatelessWidget {
final String buttonText;
final String destinationScreen;
final String backgroundImage;
final bool bCover;

MenuButton(
{this.buttonText,
this.destinationScreen,
this.backgroundImage = '',
this.bCover = true});

@override
Widget build(BuildContext context) {
return GestureDetector(
child: Container(
child: Center(
child: Text(
(Utils.getString(context, buttonText)),
style: TextStyle(color: Colors.white, fontSize: 22.0),
),
),
width: 120,
height: 40,
decoration: BoxDecoration(
color: Colors.black,
image: DecorationImage(
image: AssetImage(Constants.IMAGES_PATH + backgroundImage),
fit: bCover ? BoxFit.cover : BoxFit.fill),
// button text
)),
onTap: () {
Navigator.pushNamed(context, destinationScreen);
});
}
}


任何想法,将不胜感激。

最佳答案

您指定的BoxDecoration具有黑色背景:

@override
Widget build(BuildContext context) {
return GestureDetector(
child: Container(
child: Center(
child: Text(
(Utils.getString(context, buttonText)),
style: TextStyle(color: Colors.white, fontSize: 22.0),
),
),
width: 120,
height: 40,
decoration: BoxDecoration(
color: Colors.black, // 🐛 I'M HERE
image: DecorationImage(
image: AssetImage(Constants.IMAGES_PATH + backgroundImage),
fit: bCover ? BoxFit.cover : BoxFit.fill),
// button text
)),
onTap: () {
Navigator.pushNamed(context, destinationScreen);
});
}

只需将 BoxDecoration颜色设置为 Colors.transparent或根本不指定颜色(默认为 Colors.transparent),如下所示:

@override
Widget build(BuildContext context) {
return GestureDetector(
child: Container(
child: Center(
child: Text(
(Utils.getString(context, buttonText)),
style: TextStyle(color: Colors.white, fontSize: 22.0),
),
),
width: 120,
height: 40,
decoration: BoxDecoration(
color: Colors.transparent, // FIXED
image: DecorationImage(
image: AssetImage(Constants.IMAGES_PATH + backgroundImage),
fit: bCover ? BoxFit.cover : BoxFit.fill),
// button text
)),
onTap: () {
Navigator.pushNamed(context, destinationScreen);
});
}

关于flutter - 如何在Flutter中在图像的透明部分上显示其背后的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60169480/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com