在 Flutter 中的 Inkwell 小部件中添加边框半径

Question

我想使用墨水瓶小部件向容器添加悬停颜色属性，但容器有自己的边框半径，当我使用墨水瓶使用悬停属性时，它采用自定义形状并使其在悬停后看起来为矩形墨水瓶。

这是我的代码片段：

InkWell(
            
            onTap: () {},
            hoverColor: Colors.red[200],
            child: Container(
              width: 70.w,
              height: 60.h,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
              ),
              child: Row(
                children: [
                  Image.asset(
                    'images/call.png',
                    height: 30.h,
                  ),
                  Text(
                    'Call',
                    style: white,
                  ),
                ],
              ),
            ),
          ),

我希望我让你很好地理解了这个问题

请帮助我解决问题或提供替代方法。

Answer 1

该Inkwell部件有一个属性customBorder类型ShapeBorder。您可以使用它borderRadius为您的Inkwell.

例如：

customBorder: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20),
),

Answer 2

该墨水瓶小部件有一个属性borderRadius型BorderRadius

InkWell(
  borderRadius: BorderRadius.circular(25),
  // ...
);

Answer 3

简单而新的方法/解决方案

我在某种程度上同意@Matthias的答案，但如果您需要更现实的答案而不是给予RoundedRectangleBorder财产customBorder，那么只需使用CircleBorder()如下示例：

InkWell(customBorder: CircleBorder(), // ... );

Answer 4

当您的小部件已经具有边框半径时，您可以使用剪辑行为来不具有硬编码值，例如Card：

    return Card(
      clipBehavior: Clip.antiAlias,
      child: InkWell(

Answer 5

InkWell(
  borderRadius: BorderRadius.circular(12),
  child: // ...
);