当高度小于边界半径的两倍时保持圆角？答案

【问题标题】：Maintaining rounded corners when the height is less than twice the border radius?当高度小于边界半径的两倍时保持圆角？
【发布时间】：2013-07-21 18:23:20
【问题描述】：

在 Qt 中，您可以使用 CSS 样式表给 QWidget 一个圆角：

QWidget#myWidget {
    background-color: #ffbb33;
    border-radius: 20px;
}

我想为这个QWidget设置动画，让它从屏幕底部弹出来通知用户，但发现当小部件的高度小于边框半径时，圆边会不和谐地消失。

是否可以防止这种情况发生？

更新：感谢大家针对此问题提供的与网络相关的解决方案。他们中的大多数实际上确实很好地翻译了这个应用程序。但我只想指出，这个应用程序是用C++ 和Qt 库编码的。如果您有其他与网络相关的解决方案，请务必发布它们，但请注意，如果您使用网络技术来执行此操作，那么“它适用于我”在这种情况下并不完全适用。 ;)

【问题讨论】：

你是如何制作动画的？
使用 QPropertyAnimation 更改 minimumHeight 的 QWidget
为什么不将边框半径从 0 或 5px 增加到 20px？
这是个好主意。我认为这可能会奏效。我仍然想了解为什么它的行为如此......我自己编写了一个相当简单的自定义圆边绘图算法，它很自然地处理了这样的情况。
我的 GUESS 将是 CSS/浏览器绘制边框的方式。如果没有足够的空间，它将恢复为默认值。

标签： c++ css qt user-interface qwidget

【解决方案1】：

您可以为角落设置动画。从小边界半径或无边界半径开始，并根据您的需要进行构建。你可能没有使用 jQuery，但你可以做类似的事情。

CSS

#myWidget {
     border-radius: 5px;
}

jQuery

$('#myWidget').animate({ 'border-radius': '20px' }, 1500);

【讨论】：

【解决方案2】：

为什么不直接将bottom CSS 属性设置为负高度，然后将bottom 属性设置为0，而不是height？ See this fiddle for an example。这样你就不必弄乱元素的高度，也不会有任何奇怪的内容挤压。

【讨论】：

这看起来确实是一个可接受的替代方案，但它仍然只是一种解决方法，而不是解决实际问题。（我不能 100% 确定实际问题无论如何都可以解决。）此外，它在视觉上与改变对象的高度不同。
@CoryKlein 没错，它的外观不同（实际上我认为它看起来更好，因为我不是特别喜欢压扁的外观）。但是，我也无法重现您遇到的问题。边界半径在这个小提琴中消失了吗？ jsfiddle.net/bWbnK
你可能无法重现这个，因为我在C++ 和Qt 中实现了这个，而你没有。 Qt 可能是在绘制锐边，而不是网络浏览器。
@CoryKlein 啊，你是对的，我猜我没有注意到C++ 标签。
我将此标记为已接受的答案，因为此解决方案在转换为 Qt C++ 时效果最佳。动画边框半径不起作用，因为在更改样式表和更新 UI 外观之间存在太多延迟，因此动画滞后。

【解决方案3】：

由于您使用的是 QPropertyAnimation，因此您可以设置一个与调整大小动画并行的动画，该动画将圆角边框从半径 0px 变为 20px（或其他任何值）。

【讨论】：

【解决方案4】：

您可以做的一件事是重新实现 QWidget 的resizeEvent，然后计算边框的最大可用大小。然后使用this.setStyleSheet("border-radius: ?px"); 设置边框半径（显然替换为 ?）

您可以在此处查看如何重新实现函数：https://beginnersbook.com/2017/09/cpp-function-overriding/，其中 BaseClass 是 QWidget，DerivedClass 是新的小部件，您可以将其称为 QRoundedCornersWidget。

【讨论】：