QScrollBar样式

QScrollBar样式

      滚动条在Qt里叫做QScrollBar，使用样式设置控件的外观很方便，这里分享一下滚动条的样式设置。例如下面的树形控件的滚动条的样式。

const QString VSCROLLBAR_STYLE =

            "QScrollBar:vertical {margin: 13px 0px 13px 0px;background-color: rgb(255, 255, 255, 100); border: 0px; width: 12px;}\
             .QScrollBar::handle:vertical {background-color: purple; width: 12px; }\
             .QScrollBar::add-page:vertical {background-color: pink; }\
             .QScrollBar::sub-page:vertical {background-color: orange; }\
             .QScrollBar::sub-line:vertical {subcontrol-origin: margin; border: 1px solid red; height:13px}\
             .QScrollBar::up-arrow:vertical { subcontrol-origin: margin; background-color: blue; height:13px}\
             .QScrollBar::down-arrow:vertical { background-color: yellow; }\
             .QScrollBar::add-line:vertical {subcontrol-origin: margin; border: 1px solid green; height:13px}";

QScrollBar分为sub-line、add-line、add-page、sub-page、up-arrow、down-arrow和handle几个部分，这几个相应的部位都己经在上面画出来了。sub-line包含了up-arrow，而add-line则包含了down-arrow区域。

需要注意的是，如果不对sub-line、add-line设置subcontrol的话，会出现下面的问题。如果不设置整个QScrollBar的marg-left和margin-bottom话，则不能定制add-line和sub-line区域。

没有定义sub-control为margin

没有定义margin-top和margin-bottom

 下面是另外一片博客，也直接复制过来，以供参考

QScrollBar:vertical {
background: #E6E6E6;
width: 20px;
margin: 0px;
border-radius: 10px;
}
QScrollBar::handle:vertical {
background: #8BC53F;
min-height: 20px;
border-radius: 10px;
}
QScrollBar::add-line:vertical {
background: #E6E6E6;
height: 0px;
border-radius: 10px;
}
QScrollBar::sub-line:vertical {
background: #E6E6E6;
height: 0px;
border-radius: 10px;
}

样式见图片：