此图片显示了我在 Qt 应用程序中想要的滚动条类型:
这是我的尝试,与要求不太接近:
QString sbStyle = QString(
"QScrollBar:vertical {"
"border: none;"
"background: #111;"
"width: 10px;"
"}"
"QScrollBar::handle:vertical {"
"background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #ddd, stop:1 #111);"
"min-height: 10px;"
"}"
"QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical {"
"border: none;"
"background: #111;"
"}"
);
设计滚动条(以及一般的复杂小部件)需要一定的耐心并正确研究文档和示例。
最重要的是,复杂的小部件有一个基本要求,如文档中所述:
您的尝试中最重要的问题是您没有为按钮留出空间,也没有为它们设置任何样式表。注意: 对于 QComboBox 和 QScrollBar 等复杂的控件,如果自定义了一个属性或子控件,则所有其他属性或子控件也必须自定义。
按钮的空间是通过使用适当的边距(垂直滚动条的顶部和底部)来设置的。
可以使用图像设置箭头按钮的样式,但对于简单的三角形,可以使用智能 CSS 技巧:使用边框。
这个想法是有一个 0 大小的对象,周围有边框;因为只有边框可见,所以结果是一个由三角形组成的矩形,边框宽度实际上是每个三角形的高度(边到中心的距离):
然后只画与箭头方向相反的边框;如果你想显示向上箭头,请用不同的颜色绘制底部边框:
请注意,为了正确放置这些箭头而没有不必要的边距(例如向上箭头的顶部“边框”),必须使用
top
或
bottom
属性进行一些调整。最后,如果您需要点图案背景,则必须通过图像来完成(简单的 2x2 图像就足够了)。
这是生成的样式表:
QScrollBar:vertical {
border: none;
background: #111;
width: 8px;
margin: 6px 0 6px 0;
}
QScrollBar::handle:vertical {
background: qlineargradient(
x1:0, y1:0, x2:1, y2:0,
stop:0 #fff, stop:1 #111
);
min-height: 8px;
border: 2px solid;
border-left-color: #ddd;
border-top-color: #ddd;
border-right-color: #444;
border-bottom-color: #222;
}
QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical {
border: none;
background: #111;
subcontrol-origin: margin;
height: 6px;
}
QScrollBar::add-line:vertical {
subcontrol-position: bottom;
}
QScrollBar::sub-line:vertical {
subcontrol-position: top;
}
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
border: 4px solid #111;
width: 0px;
height: 0px;
}
QScrollBar::up-arrow:vertical {
top: -2px;
border-bottom-color: gray;
}
QScrollBar::down-arrow:vertical {
bottom: -2px;
border-top-color: gray;
}
QScrollBar::up-arrow:vertical:hover {
border-bottom-color: lightgray;
}
QScrollBar::down-arrow:vertical:hover {
border-top-color: lightgray
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
background: url("pattern.png");
}
QScrollBar::add-page:vertical {
background-position: bottom; /* prevent background "scrolling" */
}
这是结果:放大查看更多细节: