Flutter：如何使用 InkWell 在 GridTile 中的图像上制作波纹效果

Question

我正在尝试使用

InkWell

在用户点击图块时在 GridTile 内的图像顶部获得

波纹效果

。

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

以下是单个

GridTile

的代码。

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

我尝试将

InkWell

移动到树的不同级别，并在

DecorationImage

内使用

Container

，但这些似乎都无法揭示波纹。

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

Answer 1

通过用 Stack 包裹小部件树并添加带有 InkWell 的 Material 小部件，我能够在图像上获得 Ripple Effect，如下所示：

return Stack(
  children: [
    Positioned.fill(
      bottom: 0.0,
      child: GridTile(
        footer: GridTileBar(
          title: Text(s.displayName),
          subtitle: Text(s.gameName),
          backgroundColor: Colors.black45,
          trailing: const Icon(
            Icons.launch,
            color: Colors.white,
          ),
        ),
        child: Image.network(s.imageSrc, fit: BoxFit.cover),
      ),
    ),

    // This is the widget that achieves the ripple effect.
    Positioned.fill(
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          splashColor: Colors.lightGreenAccent,
          onTap: () => _launchStream(s.displayName),
        ),
      ),
    ),
  ],
);

Answer 2

使用

Stack

小部件，我们可以组成分层布局，我们可以使用

Image

作为背景层，并在其前面放置一个透明的

Material

。然后通过在材质中放置一个

InkWell

，您可以显示涟漪效果并捕获点击事件。

要将前景层（材质）扩展到背景层的边界，我们可以使用

Positioned.fill

小部件。

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

飞镖板 | 要点

截图

上面代码片段的结果如下。

Answer 3

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

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

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

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

墨水小部件

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

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