如何在图像的透明部分显示在 Flutter 中位于其后面的图像？

Question

enter image description here enter image description here

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

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);
        });
  }
}

任何想法都将不胜感激。

Answer 1

您指定的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);
        });
  }