如何在 Flutter 中设置按钮飞溅效果的边界？

Posted 2023-02-23

【中文标题】如何在 Flutter 中设置按钮飞溅效果的边界？

【英文标题】：How to set boundaries for a button splash effect in Flutter?

【发布时间】：2018-09-03 07:48:43

【问题描述】：

当我在容器内按下 IconButton 时，会在容器外绘制飞溅效果，因此有点“溢出”。如何设置边界以限制绘制飞溅效果的区域？

我的层次结构看起来像这样，我想限制容器小部件内的飞溅效果。

- Expanded
-- Listview

- Container
-- Row
--- IconButton[]

【参考方案1】：

我在写这个问题时偶然发现了解决方案，所以我将把答案留在这里，以防其他人遇到同样的问题。

我不得不将容器包装到 ClipPath 小部件中以限制飞溅效果的区域。

- Expanded
-- Listview

- ClipPath (add this)
-- Container
--- Row
---- IconButton[]

【讨论】：

仅供参考，这不是材料。但是素材使用的 ClipPath。

@RémiRousselet 感谢您的澄清。我相应地编辑了答案。

有没有办法减少飞溅区域，上方按钮图像中的飞溅区域在顶部和底部被裁剪，我正在寻找一个不会被裁剪的小飞溅圈。

【参考方案2】：

我认为最好使用带有 Icon 的 InkWell 小部件作为子部件。正如 Flutter 文档所述

Clipping to a path is expensive

你可以使用 onTap() 属性来放置你的函数，你可以使用borderRadius 属性来给你的飞溅一个圆形。

圆形飞溅 InkWell

Container(
          height: 30,
          width: 30,
          child: InkWell(
            borderRadius: BorderRadius.circular(30),
            onTap: () ,
            child: Icon(Icons.timer),
          ),
        ),

或者你可以使用没有borderRadius的默认形状，这也很酷：

Container(
          height: 30,
          width: 30,
          child: InkWell(
            onTap: () ,
            child: Icon(Icons.timer),
          ),
        ),