如何在图像的透明部分显示 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);
        });
  }

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

How to show on a transparent part of an image the image that lays behind it in Flutter?

dart

flutter

flutter-layout

flutter-animation