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

希望我已经让您充分理解这个问题了

请帮我解决这个问题，或者提供一个替代方案。

- Pratyay Sinha

---

InkWell（borderRadius: BorderRadius.circular(20)） - Karzan Kamal

Answer 1

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

例如：

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

- Matthias

---

请查看 @Sh4msi 的下面的答案 - InkWell 上有一个直接的 borderRadius 属性。 - Oded Ben Dov

Answer 2

Inkwell组件有一个类型为BorderRadius的属性borderRadius

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

或者

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

- Sh4msi

---

这个答案更加简短和精确。 - MBK

Answer 3

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

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

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

- RuslanBek

Answer 4

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

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

- Ced

Answer 5

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

- Ritesh Ghimire

Answer 6

为了使闪屏也变成圆形，可以使用Material小部件的适当选项clipBehavior。

- Konstantin Kozirev