Question

我正在尝试为我的应用创建一个“自定义按钮”。我有一个带有透明背景图像的鸡蛋图像，我需要将此图像作为一个忽略在透明部分上轻击的按钮。

现在，我使用gesturedetetetor，也尝试了inkwell，它们都可以检测出敲击整个图像，包括透明的背面。

Align(
    alignment: Alignment(0, 0.75),
    child: Container(
        width: swidth * 0.75,
        height: sheight * 0.6,
        child: GestureDetector(
            onTap: () {
                setState(() {
                    pushes--;
                });
            },
        child: Image.asset(
        'images/egg.png',
        fit: BoxFit.fill,
    )),
))

Answer 1

顺便说一句，您正在实现它将在整个图像上检测到敲击。

我建议您在填充区域的图像上添加透明视图，然后在该视图上添加GestureDetector。这样，您可以避免单击透明区域。

Answer 2

尝试此代码可以解决您的问题

Row(children: <Widget>[
      GestureDetector(child: Container(
        width: swidth * 0.75,
        height: sheight * 0.6,
      ),onTap: (){
        setState(() {
          pushes--;
        });
      },),
      Image.asset(
        'images/egg.png',
        fit: BoxFit.fill,
      )
    ],)

Answer 3

在Stackoverflow和Flutter开发中欢迎重要。

我对您的问题和问题非常感兴趣，因此我决定通过一个可以使用的新程序包来解决它。

此程序包是我最近对其进行编码的transparent_image_button。

您可以将其用作示例

TransparentImageButton.assets( "assets/images/egg.png", width: 200, onTapInside: () => print("You tapped the image."), onTapOutside: () => print("You tapped outside the image."), )

如您所见，您可以在点击图像时设置功能，而在图像之外点击时设置其他功能。

我希望其他人也可以从中受益。感谢您提出问题给我这个想法。

具有透明背景图像的按钮

3 个答案: