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

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

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

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

Answer 2

我认为这是在图像上显示波纹效果的更好方法

.grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 1000px;
    margin: 50px auto;
}
.box-wrapper {
    width: 25%;
    height: 250px;
    perspective: 1000px;
}
.box {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform .5s;
    transform-style: preserve-3d;
    transform-origin:center center -125px;
}
.box .face {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing:border-box;
}
.box .face.front {
    background-color: hsla(0, 100%, 50%, .5);
}
.box .face.bottom {
    transform: rotateX(-90deg) translateY(50%) translateZ(125px);
    background-color: hsla(120, 100%, 50%, .5);
}
.box:hover {
    transform: rotateX(90deg);
}

根本原因是Flutter按降序渲染视图。当我们将图像作为InkWell的子级时，效果被该图像覆盖。

在此处找到更多参考文献：

The Ink widget

Create a Rounded Image Icon with Ripple Effect in Flutter

Answer 3

我们创建了这个简单的小部件，以在任何给定孩子的上方绘制墨水反应。

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 4

屏幕截图：

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

Answer 5

未显示波纹，因为显示在InkWell上的小部件具有不透明的背景。我正在使用Stack将 InkWell 放在任何背景填充小部件的顶部（例如，本示例中的Image）。

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

Answer 6

在InkWell小部件内包装Material

Material(   
  child : InkWell(          
      child : YourWidget     
  )      
)

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

6 个答案: