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

Question

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

这是我的代码片段：

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。您可以使用它为您的 Inkwell.

提供 borderRadius

例如：

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

Answer 2

Inkwell 小部件有一个属性 borderRadius 类型 BorderRadius

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

Answer 3

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

Answer 4

要使启动画面也圆润，请为 Material 小部件使用合适的 clipBehavior 选项。

Answer 5

简单而新颖Approach/Solution

我有点同意 @Matthias 的 回答，但是如果你需要更现实的答案而不是给 RoundedRectangleBorder 给 customBorder 属性，那么只需像下面的示例一样使用 CircleBorder()：

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

Answer 6

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

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

请注意，您需要一个围绕 InkWell 的 material 小部件，Card 是一个，Material 是另一个可以使用的小部件。

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

Add border Radius in the Inkwell widget in flutter

widget

dart

flutter

flutter-layout