主页 / coding / 问题 / 77752170
Accepted
ano
Asked: 2024-01-03 21:19:22 +0800 CST

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

  • 772

我目前正在使用 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;
}

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

在此输入图像描述

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

qt

1 个回答

  1. Best Answer

    移动边距的定义，使其影响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;
}
    • 1

相关问题