flutter - 如何在 flutter 中对 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),
              )
            ],
          ),
        ),
      ],
    ),

预期:在图像上添加 onClick我使用了 GestureDetector 但它会引发错误，所以我需要知道我应该使用什么以及如何使用。

Answer 1

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

GestureDetector(
  onTap: () {}, // Image tapped
  child: Image.asset(
    'assets/cat.jpg',
    fit: BoxFit.cover, // Fixes border issues
    width: 110.0,
    height: 110.0,
  ),
)

如果您想要飞溅效果，请使用 Ink.image 或带有 decoration 的 Ink。

InkWell(
  onTap: () {}, // Image tapped
  splashColor: Colors.white10, // Splash color over image
  child: Ink.image(
    fit: BoxFit.cover, // Fixes border issues
    width: 100,
    height: 100,
    image: AssetImage(
      'assets/cat.jpg,
    ),
  ),
)