QT CSS使用（滚动条）

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

 

 

 

 

QProgressBar{ 
    color : solid gray; 
    border: 2px solid gray; 
    border-radius: 5px; 
    background: transparent; 
    padding: 0px; 
    text-align : center ; 
} 
QProgressBar::chunk{ 
    background: #B22222; 
} 
 
QTextEdit{ 
    border: 10px; 
    border-image: url(image/system/border.png)10 10 10 10 ; 
    background-color: rgba(43,45,31,255); 
} 
 
QTextEdit[description="true"]{ 
    border: 10px; 
    border-image: none; 
    background-color: rgba(255,255,255,255); 
} 
 
QTextEdit QScrollBar:vertical  { 
     margin: 22px 0 22px 0; 
} 
 
QScrollBar:add-page 
{ 
     background-color: rgba(0,0,0,255); 
} 
 
QScrollBar:sub-page 
{ 
     background-color: rgba(0,0,0,255); 
} 
 
 QScrollBar::add-line:vertical  { 
 
     background-color: rgba(43,45,31,255); 
     height: 15px; 
     subcontrol-position: bottom; 
     subcontrol-origin: margin; 
 } 
 
 QScrollBar::sub-line:vertical  { 
 
     background-color: rgba(43,45,31,255); 
     height: 15px; 
     subcontrol-position: top; 
     subcontrol-origin: margin; 
 } 
 
QScrollBar::handle:vertical    {     
    border : 2px solid gray; 
    border-radius: 6px; 
    background-color: solid gray; 
    min-height : 12px; 
} 
 
QScrollBar::up-arrow:vertical 
{ 
    border-image: url(image/system/button/scroll-up-arrow.png); 
} 
 
QScrollBar::down-arrow:vertical 
{ 
    border-image: url(image/system/button/scroll-down-arrow.png); 
} 
 
 QLineEdit#chat_edit{ 
    background-color: rgba(20,20,20,255); 
    color: white; 
    border: 10px transparent; 
    height: 20px; 
    border-image: url(image/system/border.png)10 10 10 10 ; 
 } 
 
QStatusBar::item { 
     border: 0px solid grey; 
 } 
  
QStatusBar{ 
    background-image: url(image/system/skill-dock.png); 
    color:white; 
} 
 
QMenu[private_pile="true"]{ 
    background-color: rgba(43,63,53,200); 
    border-radius: 1px; 
    color: white; 
} 
 
QPushButton[private_pile="true"]{ 
    background-color: rgba(43,63,53,200); 
    border-radius: 1px; 
    color: white; 
} 
 
QPushButton[game_control="true"]{ 
    border: 0px solid gray; 
    font: 12px; 
    border-radius: 5px; 
    padding: 6px 12px 6px 12px; 
} 
 
QPushButton#pause{ 
    background-image: url(image/system/button/pause.png); 
} 
 
QPushButton#play{ 
    background-image: url(image/system/button/play.png); 
} 
 
QPushButton#slow-down{ 
    background-image: url(image/system/button/slow-down.png); 
} 
 
QPushButton#speed-up{ 
    background-image: url(image/system/button/speed-up.png); 
} 
 
QPushButton#uniform{ 
    background-image: url(image/system/button/uniform.png); 
} 
 
#skill_bar_container QPushButton{ 
    background-image: url(image/system/button/back.png); 
        border: 1px solid gray; 
        border-radius: 4px; 
    color: yellow; 
    font: 12px; 
    padding: 6px 12px 6px 12px; 
} 
#skill_bar_container QPushButton:disabled{ 
    background-image: url(image/system/button/back_shade.png); 
        border-radius: 4px; 
    color: white; 
    font: 12px; 
} 
#skill_bar_container QCheckBox{ 
    border: 1px solid gray; 
        border-radius: 4px; 
    color: yellow; 
    font: 12px; 
    padding: 1px 12px 1px 8px; 
} 
#skill_bar_container QCheckBox::indicator{ 
    height: 0px; 
    width: 0px; 
} 
#skill_bar_container QCheckBox:unchecked{ 
    background-image: url(image/system/button/frequent_checkbox/unchecked.png); 
} 
#skill_bar_container QCheckBox:unchecked:hover{ 
    background-image: url(image/system/button/frequent_checkbox/unchecked_hover.png); 
} 
#skill_bar_container QCheckBox:unchecked:pressed{ 
    background-image: url(image/system/button/frequent_checkbox/unchecked_press.png); 
} 
#skill_bar_container QCheckBox:checked{ 
    background-image: url(image/system/button/frequent_checkbox/checked.png); 
} 
#skill_bar_container QCheckBox:checked:hover{ 
    background-image: url(image/system/button/frequent_checkbox/checked_hover.png); 
} 
#skill_bar_container QCheckBox:checked:pressed{ 
    background-image: url(image/system/button/frequent_checkbox/checked_press.png); 
} 
#skill_bar_container QComboBox{ 
    background-image: url(image/system/button/back2.png); 
    border: 1px solid gray; 
    border-radius: 3px; 
    color: white; 
    padding: 1px 18px 1px 3px; 
} 
#skill_bar_container QComboBox:on{ 
    padding-left: 4px; 
    padding-top: 3px; 
} 
#skill_bar_container QComboBox::drop-down{ 
    border-bottom-right-radius: 3px; 
    border-left-color: darkgray; 
    border-left-style: solid; 
    border-left-width: 1px; 
    border-top-right-radius: 3px; 
    subcontrol-origin: padding; 
    subcontrol-position: top right; 
    width: 15px; 
} 
#skill_bar_container QComboBox::down-arrow:on{ 
    left: 1px; 
    top: 1px; 
}