QSlider 添加页面的不同颜色（宽度应恒定）

Question

我目前正在使用 Qt6 开发 GUI。我想使用样式表创建自定义垂直滑块。我希望滑块的底部（手柄正下方）具有不同的颜色，但是当我尝试操作滑块样式表的“添加页面”部分时，宽度不再恒定，看起来像这样：

我希望滑块的凹槽区域的宽度在手柄的顶部和下方保持相同。 到目前为止，这是我的代码：

QSlider:vertical
{
  min-height: 100px;
  min-width: 20px;
  background: none;
}
QSlider::groove:vertical
{
  background: rgb(43, 43, 43); 
  border: 1px solid rgb(43, 43, 43); 
  border-radius: 2px;
  width: 4px;
  margin: 0px 17px;
}
QSlider::handle:vertical
{
  background: white;
  border: 1px solid white;
  border-radius: 3px;
  top: 14px;
  bottom: 14px;
  margin: -15px -7px;
  min-width: 30px;
  min-height: 30px;
}
QSlider::add-page:vertical
{
  background: white;
}

当我从样式表中删除添加页面部分时，滑块如下所示：

正如你所看到的，底部不再是白色的，但宽度现在看起来确实不错。

Answer 1

移动边距的定义，使其影响

groove

和

add-page

。 它的要点是：

QSlider::groove:vertical,
QSlider::add-page:vertical
{
  margin:0px 17px;
}
QSlider::add-page:vertical
{
  background-color: red;
}

以及基于您问题中的样式表的完整样式表：

QSlider:vertical
{
  min-height: 100px;
  min-width: 20px;
  background: none;
}
QSlider::groove:vertical
{
  background: rgb(43, 43, 43); 
  border: 1px solid rgb(43, 43, 43); 
  border-radius: 2px;
  width: 4px;
}
QSlider::handle:vertical
{
  background: white;
  border: 1px solid white;
  border-radius: 3px;
  top: 14px;
  bottom: 14px;
  margin: -15px -7px;
  min-width: 30px;
  min-height: 30px;
}
QSlider::groove:vertical,
QSlider::add-page:vertical
{
  margin:0px 17px;
}
QSlider::add-page:vertical
{
  background-color: red;
}