Qt之Qss的使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/a844651990/article/details/82854090

  使用Qt美化控件时qss必不可少，本文记录各个控件如何使用qss进行美化，不定时更新。。。

QSlider

// 一定要先设置groove，不然handle的很多效果将没有
QSlider::groove:horizontal {
    border: none;
    height: 4px;
    background: red;
}
QSlider::handle:horizontal {
    border: none;
    margin: -5px 0px; // 上下边距和左右边距
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background: #6495E0;
}
// 划过部分
QSlider::sub-page:horizontal {
    background: #6495E0;
    height: 4px;
}
// 未划过部分
QSlider::add-page:horizontal { 
    background: black; 
    height: 4px;
}

效果图：

QScrollBar

QScrollArea#musicMangeScrollArea {
    border: none;
    background-color: #f5f5f7;
}
QScrollBar:vertical {
    border: none;
    background: #f5f5f7;
    width: 10px;
    margin: 0px 0 0px 0;
}
QScrollBar::handle:vertical {
    background: Gainsboro;
    min-height: 20px;
    border-radius: 5px;
    border: none;
}
QScrollBar::add-line:vertical {
    border: 0px solid grey;
    background: #32CC99;
    height: 0px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
    border: 0px solid grey;
    background: #32CC99;
    height: 0px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
    width: 0px;
    height: 0px;
}

效果图：