当高度减小时，QSlider 句柄忽略边框半径

Question

我正在尝试创建一个 gui 应用程序来使用 Qt5 和 C++ 控制我的机器的音量级别。这就是我想要达到的目标。

因此，我创建了基本布局并添加了 QSlider，然后使用以下样式表对其设置样式：

QSlider::groove:horizontal
{
    height: 16px;
    background: yellow;
    margin: 2px;
}
QSlider::handle:horizontal
{
    background: blue;
    width: 16px;
    height: 16px;
    margin: -5px 6px -5px 6px;
    border-radius:11px;
    border: 3px solid #ffffff;
}

我得到以下结果：

首先手柄是一个日蚀，而不是一个圆。但是我想降低凹槽的高度，所以我修改了上面的样式表：

QSlider::groove:horizontal
{
    height: 10px; // modified here
    background: yellow;
    margin: 2px;
}
QSlider::handle:horizontal
{
    background: blue;
    width: 16px;
    height: 16px;
    margin: -5px 6px -5px 6px;
    border-radius:11px;
    border: 3px solid #ffffff;
}

现在，滑块的手柄变成了一个矩形。

任何人都可以回答是什么导致它表现得像这样，或者给我指点一些文档。

Answer 1

你的border-radius应该和长宽成正比才能变成一个圆

试试这个风格：

QSlider::groove:horizontal {
    border-radius: 1px;
    height: 3px;
    margin: 0px;
    background-color: rgb(52, 59, 72);
}
QSlider::groove:horizontal:hover {
    background-color: rgb(55, 62, 76);
}
QSlider::handle:horizontal {
    background-color: rgb(85, 170, 255);
    border: none;
    height: 40px;
    width: 40px;
    margin: -20px 0;
    border-radius: 20px;
    padding: -20px 0px;
}
QSlider::handle:horizontal:hover {
    background-color: rgb(155, 180, 255);
}
QSlider::handle:horizontal:pressed {
    background-color: rgb(65, 255, 195);
}

这是适合你的风格（我改变了边距和填充）

QSlider::groove:horizontal
{
    height: 16px;
    background: yellow;
    margin: 2px;
}
QSlider::handle:horizontal
{
    background: blue;
    width: 16px;
    height: 16px;
    margin: -4px 0;
    padding: -4px 0px;
    border-radius:11px;
    border: 3px solid #ffffff;
}

当高度减小时，QSlider 句柄忽略边框半径

QSlider handle ignores border radius when height is reduced

c++

qt

qt5