Flutter中GridTile中图像上方的InkVell波纹 [英] InkWell ripple over top of image in GridTile in Flutter

问题描述

我正在尝试使用 InkWell 在用户点击图块时在 GridTile 内的图像顶部获得波纹效果.

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

下面是单个GridTile的代码.

 返回新的InkWell(onTap:()=>debugPrint(s.displayName)，HighlightColor:Colors.pinkAccent，splashColor:Colors.greenAccent，子:new GridTile(页脚:新的GridTileBar(标题:新的Text(s.displayName)，字幕:new Text(s.gameName)，backgroundColor:Colors.black45，尾随:新图标(Icons.launch，颜色:Colors.white，)，)，child:new Image.network(//这掩盖了InkWell的涟漪s.imageSrc，适合:BoxFit.cover，)，)，); 

我尝试使用容器 中的 DecorationImage 将InkWell移到层次结构的不同级别，但是这些似乎都无法揭示波纹./p>

如何使波纹出现在图块/图像的顶部?

解决方案

使用材料小部件.

 返回新堆栈(子代:< Widget> [新的Positioned.fill(底部:0.0，子:new GridTile(页脚:新的GridTileBar(标题:新的Text(s.displayName)，字幕:new Text(s.gameName)，backgroundColor:Colors.black45，尾随:新图标(Icons.launch，颜色:Colors.white，)，)，子级:新Image.network(s.imageSrc，适合:BoxFit.cover))，)，新的Positioned.fill(子级:新材料(颜色:Colors.transparent，子级:新InkWell(splashColor:Colors.lightGreenAccent，onTap:()=>_launchStream(s.displayName)，)))，]); 

I'm trying to use InkWell to get a ripple effect on top of an image inside of a GridTile when the user taps on the tile.

I believe the image itself is obscuring the ripple because when I remove the image, I see the ripple.

Below is the code for a single 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,
    ),
   ),
 );

I've tried moving the InkWell to different levels of the hierarchy, using DecorationImage inside a Container, but none of these seem to work to reveal the ripple.

How can I get the ripple to appear on top of the tile/image?

解决方案

I was able to get a ripple to appear over the image by using a Stack and wrapping the InkWell in a Material widget.

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

这篇关于Flutter中GridTile中图像上方的InkVell波纹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！