flutter - InkWell 在 Flutter 中的 GridTile 中的图像顶部产生波纹

Question

我正在尝试使用 InkWell 在用户点击磁贴时在 GridTile 内的图像顶部获得涟漪效果。

我相信图像本身会掩盖波纹，因为当我移除图像时，我会看到波纹。

以下是单个 GridTile 的代码。

return new InkWell(
  onTap: () => debugPrint(s.displayName),
  highlightColor: Colors.pinkAccent,
  splashColor: Colors.greenAccent,
  child: new GridTile(
    footer: new GridTileBar(
      title: new Text(s.displayName),
      subtitle: new Text(s.gameName),
      backgroundColor: Colors.black45,
      trailing: new Icon(
        Icons.launch,
        color: Colors.white,
      ),
    ),
    child: new Image.network( //this is obscuring the InkWell ripple
      s.imageSrc,
      fit: BoxFit.cover,
    ),
   ),
 );

我尝试将 InkWell 移动到层次结构的不同级别，在 Container 中使用 DecorationImage，但这些似乎都无法揭示波纹。

如何让波纹出现在图 block /图像的顶部？

Answer 1

通过使用 Stack，我能够在图像上出现波纹。并将 InkWell 包裹在 Material 中小部件。

return new Stack(children: <Widget>[
        new Positioned.fill(
          bottom: 0.0,
          child: new GridTile(
              footer: new GridTileBar(
                title: new Text(s.displayName),
                subtitle: new Text(s.gameName),
                backgroundColor: Colors.black45,
                trailing: new Icon(
                  Icons.launch,
                  color: Colors.white,
                ),
              ),
              child: new Image.network(s.imageSrc, fit: BoxFit.cover)),
        ),
        new Positioned.fill(
            child: new Material(
                color: Colors.transparent,
                child: new InkWell(
                  splashColor: Colors.lightGreenAccent,
                  onTap: () => _launchStream(s.displayName),
                ))),
      ]);