QT 常见控件样式表

1.QToolButon

QToolButton{  
min-width:80px;  
min-height:32px;  
}  
QToolButton{  
color:rgb(255, 255, 255);  
min-height:20;  
border-style:solid;  
border-top-left-radius:2px;  
border-top-right-radius:2px;  
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 rgb(226,236,241),   
stop: 0.3 rgb(160,160,160),  
stop: 1 rgb(140,140,140));  
border:1px;  
border-radius:5px;padding:2px 4px;/*border-radius控制圆角大小*/  
}  
QToolButton:hover{  /*鼠标放上后*/  
color:rgb(255, 255, 255);  
min-height:20;  
border-style:solid;  
border-top-left-radius:2px;  
border-top-right-radius:2px;  
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 rgb(226,236,241),   
stop: 0.3 rgb(160,160,160),  
stop: 1 rgb(120,120,120));  
border:1px;  
border-radius:5px;padding:2px 4px;  
}  
QToolButton:pressed{ /*按下按钮后*/  
color:rgb(255, 255, 255);  
min-height:20;  
border-style:solid;  
border-top-left-radius:2px;  
border-top-right-radius:2px;  
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 rgb(226,236,241),   
stop: 0.3 rgb(190,190,190),  
stop: 1 rgb(160,160,160));  
border:1px;  
border-radius:5px;padding:2px 4px;  
}  
QToolButton:checked{    /*选中后*/  
color:rgb(255, 255, 255);  
min-height:20;  
border-style:solid;  
border-top-left-radius:2px;  
border-top-right-radius:2px;  
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 rgb(226,236,241),   
stop: 0.3 rgb(190,190,190),  
stop: 1 rgb(160,160,160));  
border:1px;  
border-radius:5px;padding:2px 4px;  
}

2.QSlider

QSlider::groove:vertical
{
    width: 5px;
    background: #C0C0C0;
    border: 1px solid #4A708B;
    border-radius: 1px;
    padding-left:-1px;
    padding-right:-1px;
    padding-top:-1px;
    padding-bottom:-1px;
}

QSlider::sub-page:vertical
{
    background: #575757;
    border: 1px solid #4A708B;
    border-radius: 2px;
}

QSlider::add-page:vertical
{
    width: 10px;
    background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #c4c4c4, stop:1 #B1B1B1);
    background: qlineargradient(x1:0, y1:0.2, x2:1, y2:1, stop:0 #5DCCFF, stop: 1 #1874CD);
    border: 0px solid #777;
    border-radius: 2px;
}

QSlider::handle:vertical
{
    height: 11px;
    background: qradialgradient
    (
        spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,
        stop:0.6 #45ADED, stop:0.778409 rgba(255, 255, 255, 255)
    );
    margin-left: -3px;
    margin-right: -3px;
    border-radius: 5px;
}

QSlider::handle:vertical:hover
{  
    height: 11px;
    background: qradialgradient
    (
        spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,
        stop:0.6 #2A8BDA, stop:0.778409 rgba(255, 255, 255, 255)
    );
    margin-left: -3px;
    margin-right: -3px;
    border-radius: 5px;
}

QSlider::sub-page:vertical:disabled
{
    background: #00009C;
    border-color: #999;
}

QSlider::add-page:vertical:disabled
{
    background: #eee;
    border-color: #999;
}

QSlider::handle:vertical:disabled
{
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 4px;
}

 

3.QSpinBox

QSpinBox{
height:30px;
width:30px;
}
QSpinBox::up-button
{
background-image:url(:/images/scroll_up.png);
height: 15px;
}
QSpinBox::down-button{
    background-image:url(:/images/scroll_down.png);
height: 15px;
}

子部件    描述

::down-arrow    combo box或spin box的下拉箭头

::down-button    spin box的向下按钮

::drop-down    combo box的下拉箭头

::indicator    checkbox、radio button或可选择group box的指示器

::item    menu、menu bar或status bar的子项目

::menu-indicator    push button的菜单指示器

::title    group box的标题

::up-arrow    spin box的向上箭头

3.QDoubleSpinbox

 

QDoubleSpinBox::up-button {
     subcontrol-origin: border;
     subcontrol-position: top right; /* position at the top right corner */
     width: 16px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */
     border-image: url(:/new/prefix1/up.png) 1;
     border-width: 1px;
     margin:-1px 12px 0px 5px;
}
QDoubleSpinBox::up-button:hover {
     border-image: url(:/new/prefix1/up.png) 1;
}
QDoubleSpinBox::up-button:pressed {
     border-image: url(:/new/prefix1/up.png) 1;
}
QDoubleSpinBox::up-arrow {
     image: url(:/new/prefix1/up.png);
     width: 65px;
     height: 50px;
}

QDoubleSpinBox::down-button {
     subcontrol-origin: border;
     subcontrol-position: bottom right; /* position at bottom right corner */
     width: 16px;
     border-image: url(:/new/prefix1/down.png) 1;
     border-width: 1px;
     border-top-width: 0;
     margin:-1px 12px 0px 5px;
}
QDoubleSpinBox::down-button:hover {
     border-image: url(:/new/prefix1/down.png) 1;
}
QDoubleSpinBox::down-button:pressed {
     border-image: url(:/new/prefix1/down.png) 1;
}
QDoubleSpinBox::down-arrow {
     image: url(:/new/prefix1/down.png);
     width: 65px;
     height: 50px;
}