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

我尝试过在

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

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

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

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

在此处查找更多参考资料：

墨水小部件

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

Answer 3

使用

Stack

我们可以将

Material

和

InkWell

带到图像上。要拉伸材质，我们将使用

Positioned.fill

小部件。

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

飞镖板 | 要点

截图

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

Answer 4

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

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

Answer 6

这是我解决问题的方法：

ClipRRect(
                        borderRadius: BorderRadius.circular(15),
                        child: Material(
                            color: Colors.transparent,
                            child: InkWell(
                              customBorder: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(10),
                              ),
                              onTap: () {
                              print("");
                              },
                              child: Ink.image(
                                image: AssetImage(),
                                fit: BoxFit.cover,
                              ),
                            )),
                      );

Answer 7

将

InkWell

包裹在

Material

Widget

内

Material(   
  child : InkWell(          
      child : YourWidget     
  )      
)