如何在Flutter中设置按钮启动效果的边界？

Question

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

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

- Expanded
-- Listview

- Container
-- Row
--- IconButton[]

Answer 1

我认为最好使用带有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),
          ),
        ),

Answer 2

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

我必须将容器包装到ClipPath小部件中以限制启动效果的区域。

- Expanded
-- Listview

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