InkWell 在 Flutter 中的 GridTile 中的图像顶部产生波纹

Posted 2023-02-23

【中文标题】InkWell 在 Flutter 中的 GridTile 中的图像顶部产生波纹

【英文标题】：InkWell ripple over top of image in GridTile in Flutter

【发布时间】：2018-06-12 11:24:05

【问题描述】：

当用户点击磁贴时，我正在尝试使用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 移动到层次结构的不同级别，在 Container 中使用 DecorationImage，但这些似乎都无法揭示涟漪。

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

【问题讨论】：

尽管有层次结构，但 Image 确实比 InkWell 具有更高的高度，这很奇怪

【参考方案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),
                ))),
      ]);

【讨论】：

我有透明墨水池，在材质中使用它也会使其对背景图像不透明

【参考方案2】：

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

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

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

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

The Ink widget

Create a Rounded Image Icon with Ripple Effect in Flutter

【讨论】：

感谢您链接我的文章，很高兴它有帮助！

此解决方案不允许为图像创建圆角

我考虑过这种方法，但我相信没有办法让它与更复杂的小部件（例如包含文本和图像的容器）一起工作？

【参考方案3】：

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

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

DartPad | Gist

截图

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

【讨论】：

在这里尝试了所有建议。这个最适合我，因为我的主层有AspectRatio 和FadeInImage。

@TheMisir 这是唯一一个使用缓存网络图像的灵魂 喜欢它！

相当不错，也可以与卡内的 FadeInImage 配合使用

【参考方案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,
            ),
          ),
        ),
      ],
    );
  

【讨论】：

子小部件的格式丢失。使用Positioned.fill(child: child)

修复

【参考方案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),
    ),
  ),
)

【讨论】：

优秀的方法。甚至可以使用AspectRatio。如果我可以使用FadeInImage，那会更好。

【参考方案6】：

将InkWell 包裹在Material 小部件中

Material(   
  child : InkWell(          
      child : YourWidget     
  )      
)