enter image description hereenter 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);
});
}
只需将其设置为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);
});
}