Flutter 如何在flatter中的image.asset上添加onClick？

我在点击时使用了三个图像，它们将导航到其他页面，那么我应该如何在这些图像上使用onClick呢？我的代码如下：

Row(
      children: [
        Expanded(
          child: Column(
            children: <Widget>[
              Container(
                  child: ClipRRect(
                borderRadius: BorderRadius.circular(20.0),
                child: Image.asset('assets/cat.jpg',
                    width: 110.0, height: 110.0),
              )),
              Text(
                'Tickets',
                style:
                    TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
              )
            ],
          ),
        ),
        Expanded(
          child: Column(
            children: <Widget>[
              Container(
                  child: ClipRRect(
                borderRadius: BorderRadius.circular(20),
                child: Image.asset('assets/cat.jpg',
                    width: 110.0, height: 110.0),
              )),
              Text(
                'Buy Tickets',
                style:
                    TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
              )
            ],
          ),
        ),
        Expanded(
          child: Column(
            children: <Widget>[
              Container(
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20),
                    child: Image.asset('assets/cat.jpg',
                        width: 110.0, height: 110.0),
                  )),
              Text(
                'Prizes',
                style:
                    TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
              )
            ],
          ),
        ),
      ],
    ),

行(
儿童：[
扩大(
子：列(
儿童：[
容器(
孩子：ClipRRect(
边界半径：边界半径。圆形（20.0），
子项：Image.asset（'assets/cat.jpg'，
宽度：110.0，高度：110.0），
)),
正文(
“票”，
风格：
TextStyle（fontSize:16.0，fontWeight:fontWeight.bold），
)
],
),
),
扩大(
子：列(
儿童：[
容器(
孩子：ClipRRect(
边界半径：边界半径。圆形（20），
子项：Image.asset（'assets/cat.jpg'，
宽度：110.0，高度：110.0），
)),
正文(
“买票”，
风格：
TextStyle（fontSize:16.0，fontWeight:fontWeight.bold），
)
],
),
),
扩大(
子：列(
儿童：[
容器(
孩子：ClipRRect(
边界半径：边界半径。圆形（20），
子项：Image.asset（'assets/cat.jpg'，
宽度：110.0，高度：110.0），
)),
正文(
“奖品”，
风格：
TextStyle（fontSize:16.0，fontWeight:fontWeight.bold），
)
],
),
),
],
),

预期：在图像上添加onClick

---

我使用了

GestureDetector

，但它会抛出错误，所以我需要知道我应该使用什么以及如何使用。

您可以使用InkWell，正如@Murat Aslan所示

Material(
        child: InkWell(
          onTap: () {},
          child: Container(
            child: ClipRRect(
              borderRadius: BorderRadius.circular(20.0),
              child: Image.asset('assets/cat.jpg',
                  width: 110.0, height: 110.0),
            ),),
        )
    )

您还可以使用

手势检测器

，如下所示

Material(
      child: GestureDetector(
        onTap: () {},
        child: Container(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(20.0),
            child: Image.asset('assets/cat.jpg',
                width: 110.0, height: 110.0),
          ),
        ),
      ),
    )

---

我阅读了其他答案，发现您与border有问题，请尝试此解决方案

GestureDetector(
  onTap: () {}, // handle your image tap here
  child: Image.asset(
    'assets/cat.jpg',
    fit: BoxFit.cover, // this is the solution for border
    width: 110.0,
    height: 110.0,
  ),
)

---

要在轻触图像时渲染材质飞溅，请使用

Ink.image

InkWell(
  onTap: () {},
  child: Ink.image(
    image: AssetImage('assets/cat.jpg'),
    // fit: BoxFit.cover,
    width: 110,
    height: 110,
  ),
)

---

另一种方法是将

扁平按钮

与

图像

作为子级使用：

FlatButton(
    onPressed: () {
      print('I got clicked');
    },
    child: Image.asset('images/ball1.png'),
  ),

---

这是通过点击图像工作的，我得到了输出，但有一个小问题，图像的顶部和底部有一个灰色边框，这使得图像似乎位于我不需要的背景上。知道为什么会这样吗？是的，它使用手势检测器和inkwell都工作，但有一个问题：在输出中，我在图片的顶部和底部都有一个灰色边框，你知道为什么吗？请添加一个灰色边框的屏幕截图。这是一个链接，我认为这个问题与容器的高度有关（）我不这么认为，因为当我更改设置的高度和宽度时，图像的大小会改变。请参阅上面的代码，我为图像而不是容器提供高度和宽度。FlatButton不推荐使用，TextButton应该可以使用