2

我正在尝试为 QScrollArea 的滚动条和我的样式表应用一些样式表，如下所示。

QScrollBar:vertical {

  border-color: rgb(227, 227, 227);
  border-width: 1px;
  border-style: solid;

  background-color: rgb(240, 240, 240);
  width: 15px;
  margin: 21px 0 21px 0;
}

QScrollBar::handle:vertical {

  background-color: rgb(200, 200, 200);
  min-height: 25px;

}

 QScrollBar::add-line:vertical {
    border: 1px solid grey;
  background-color: rgb(241, 241, 241);
    height: 20px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:vertical {
    border: 1px solid grey;
    background-color: rgb(241, 241, 241);
    height: 20px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}


  QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
      background: none;
  }

QScrollBar::up-arrow:vertical
{
  image: url(:/BarIcon/Icons/uparrow.png);
}

QScrollBar::down-arrow:vertical
{
  image: url(:/BarIcon/Icons/downarrow.png);
}

QScrollBar:horizontal {
  border-color: rgb(227, 227, 227);
  border-width: 1px;
  border-style: solid;
  background-color: rgb(240, 240, 240);
    width: 15px;
    margin: 0px 21px 0 21px;
 }

 QScrollBar::handle:horizontal {
    background-color: rgb(200, 200, 200);
    min-height: 25px;
 }
QScrollBar::add-line:horizontal {
    border: 1px solid grey;
  background-color: rgb(241, 241, 241);
    width: 20px;
    subcontrol-position: right;
    subcontrol-origin: margin;
 }

 QScrollBar::sub-line:horizontal {
  border: 1px solid grey;
    background-color: rgb(241, 241, 241);
    width: 20px;
    subcontrol-position: left;
    subcontrol-origin: margin;
 }

 QScrollBar:left-arrow:horizontal
{
  image: url(:/BarIcon/Icons/leftarrow.png);
}

QScrollBar::right-arrow:horizontal 
{
  image: url(:/BarIcon/Icons/rightarrow.png);
}

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
     background: none;
}

这个样式表完美地完成了它应该为垂直滚动条做的事情，但是如果存在与 相关的任何单个样式表QScrollBar:horizontal，该栏就会消失。

请谁能指出我的缺陷，我该怎么办？

Change styleSheet注意： styleSheet 已通过使用Qt Designer 的选项应用于 QScrollArea 对象。

如果水平滚动条在此样式表上显示，请确认。

4

1 回答 1

7

你很幸运，今天我也发生了同样的事情。

这真的很简单，这是因为您只需将垂直样式复制到水平并将“垂直”一词更改为“水平”，但实际上还有一些需要更改的内容：

  • “宽度”参数在水平方向变为“高度”。
  • “高度”参数变为“宽度”。
  • “top”和“bottom”变成“left”和“right”（你做了）。
  • 此外，如果您的边距不对称等，请不要忘记调整它们（您也这样做了）。

这为您的特定情况提供了以下样式表：

QScrollBar:vertical {

  border-color: rgb(227, 227, 227);
  border-width: 1px;
  border-style: solid;

  background-color: rgb(240, 240, 240);
  width: 15px;
  margin: 21px 0 21px 0;
}

QScrollBar::handle:vertical {

  background-color: rgb(200, 200, 200);
  min-height: 25px;

}

 QScrollBar::add-line:vertical {
    border: 1px solid grey;
  background-color: rgb(241, 241, 241);
    height: 20px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:vertical {
    border: 1px solid grey;
    background-color: rgb(241, 241, 241);
    height: 20px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}


  QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
      background: none;
  }

QScrollBar::up-arrow:vertical
{
  image: url(:/BarIcon/Icons/uparrow.png);
}

QScrollBar::down-arrow:vertical
{
  image: url(:/BarIcon/Icons/downarrow.png);
}

QScrollBar:horizontal {
  border-color: rgb(227, 227, 227);
  border-width: 1px;
  border-style: solid;
  background-color: rgb(240, 240, 240);
    height: 15px;
    margin: 0px 21px 0 21px;
 }

 QScrollBar::handle:horizontal {
    background-color: rgb(200, 200, 200);
    min-width: 25px;
 }
QScrollBar::add-line:horizontal {
    border: 1px solid grey;
  background-color: rgb(241, 241, 241);
    height: 20px;
    subcontrol-position: right;
    subcontrol-origin: margin;
 }

 QScrollBar::sub-line:horizontal {
  border: 1px solid grey;
    background-color: rgb(241, 241, 241);
    height: 20px;
    subcontrol-position: left;
    subcontrol-origin: margin;
 }

 QScrollBar:left-arrow:horizontal
{
  image: url(:/BarIcon/Icons/leftarrow.png);
}

QScrollBar::right-arrow:horizontal 
{
  image: url(:/BarIcon/Icons/rightarrow.png);
}

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
     background: none;
}
于 2014-09-26T12:21:01.430 回答