在 Flutter 中的 Inkwell 小部件中添加邊框半徑

Question

我想使用inkwell小部件向容器添加懸停顏色屬性，但容器有自己的邊框半徑，當我使用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

要使飛濺也圓潤， clipBehavior為Material小部件使用合適的clipBehavior選項。

Answer 4

簡單的解決方案

不知何故，我與@馬蒂亞斯的答案達成一致，但如果你需要更真實的答案，而不是給RoundedRectangleBorder到customBorder屬性，那么只需使用CircleBorder()像下面的例子：

customBorder: CircleBorder()

Answer 5

您可以使用剪輯行為來避免硬編碼值：

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

Answer 6

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