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

Posted 2023-02-23

【中文标题】在 Flutter 中的 Inkwell 小部件中添加边框半径

【英文标题】：Add border Radius in the Inkwell widget in flutter

【发布时间】：2021-02-01 05:49:20

【问题描述】：

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

这是我的代码 sn-p：

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

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

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

【问题讨论】：

InkWell(borderRadius: BorderRadius.circular(20))

【参考方案1】：

Inkwell 小部件具有 customBorder 类型的 ShapeBorder 属性。您可以使用它为您的Inkwell 提供borderRadius。

例如：

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

【参考方案2】：

Inkwell 小部件具有 borderRadius 类型的属性 BorderRadius

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

【讨论】：

这个答案更简短准确

【参考方案3】：

简单的新方法/解决方案

我以某种方式同意 @Matthias 的 回答，但如果您需要更现实的回答而不是将 RoundedRectangleBorder 提供给 customBorder 属性，那么只需使用 CircleBorder()，如下例所示：

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

【参考方案4】：

要使Splash还舍入，请使用clipBehavior 987654322 @ widgets的合适选项。

【参考方案5】：

您可以使用剪辑行为来避免硬编码值：

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

【参考方案6】：

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