在Flutter中的GridTile中,InkWell在图像顶部涟漪

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移动到层次结构的不同级别,使用DecorationImage内部a Container,但这些似乎都无法揭示波纹.

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

Answer 1

使用Stack我们可以把Material与InkWell在图像上。为了拉伸材质，我们将使用Positioned.fill小部件。

Stack(
  children: <Widget>[
    Image( ... ),
    Positioned.fill(
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: () { ... },
        ),
      ),
    ),
  ],
);

飞镖板| 要旨

截屏

此屏幕截图取自给定的 dartpad 链接。

Answer 2

通过使用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),
                ))),
      ]);

Answer 3

我认为这是在图像上显示涟漪效应的更好方法

Ink.image(
    image: AssetImage('sample.jpg'),
    fit: BoxFit.cover,
    child: InkWell(
        onTap: () {},
    ),
),

根本原因是Flutter按降序呈现视图.当我们将我们的图像作为InkWell的孩子时,该图像会覆盖该效果.

在这里找到更多参考:

Ink小部件

在Flutter中创建带有波纹效果的圆角图像图标

Answer 4

我们创建了这个简单的 Widget 来在任何给定的孩子之上绘制墨水反应。

class InkWrapper extends StatelessWidget {
  final Color splashColor;
  final Widget child;
  final VoidCallback onTap;

  InkWrapper({
    this.splashColor,
    @required this.child,
    @required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        child,
        Positioned.fill(
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              splashColor: splashColor,
              onTap: onTap,
            ),
          ),
        ),
      ],
    );
  }
}

Answer 5

截屏：

SizedBox(
  height: 200,
  child: Ink(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: ExactAssetImage("chocolate_image"),
        fit: BoxFit.cover,
      ),
    ),
    child: InkWell(
      onTap: () {},
      splashColor: Colors.brown.withOpacity(0.5),
    ),
  ),
)