如何在颤动中在image.asset上添加onClick？

Question

我在点击时使用了三个图像，它们将导航到其他页面，那么我应该如何在这些图像上使用 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),
              )
            ],
          ),
        ),
      ],
    ),

预期：在我使用的图像上添加一个 onClickGestureDetector但它抛出错误，所以我需要知道我应该使用什么以及如何使用。

Answer 1

我阅读了其他答案，发现您遇到了边框问题，请尝试此解决方案。

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,
  ),
)

Answer 2

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

Answer 3

您可以使用 @Murat Aslan 展示的 InkWell。

您也可以使用GestureDetector如下所示。

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),
          ),
        ),
      ),
    )

Answer 4

另一种方法是将 aFlatButton与a一起Image用作子项：

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