QScrollArea 樣式美化


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;
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM