QScrollArea 樣式美化:
說明:horizontal:水平滾動條,vertical:垂直滾動條,需要換為水平滾動條設置只需要將vertical替換為horizontal即可
整個垂直滾動條區域樣式
QScrollBar:vertical{ }
滾動條上面和下面區域樣式
QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{ }
滑塊區域樣式
QScrollBar::handle:vertical{ }
鼠標滑過滑塊樣式
QScrollBar::handle:vertical:hover,QScrollBar::handle:vertical:pressed{ }
向上箭頭樣式
QScrollBar::sub-line:vertical{ }
向上箭頭滑過、摁下樣式
QScrollBar::sub-line:vertical:hover,QScrollBar::sub-line:vertical:pressed{ }
向下箭頭樣式
QScrollBar::add-line:vertical{ }
向下箭頭滑過、摁下樣式
QScrollBar::add-line:vertical:hover,QScrollBar::add-line:vertical:pressed{ }
例子(網易雲音樂的左邊歌單選項卡):
QScrollArea{
border: 0px solid;
border-right-width: 1px;
border-right-color: #dcdbdc;
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;
}