1.1 QScrollBar樣式用法如下:
//整個垂直滾動條區域樣式
"QScrollBar:vertical{background-color:transparent;width:20px;height:255px;padding-top:20px;padding-bottom:20px;}"
//滾動條上面和下面區域樣式
"QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{background-color:transparent;}"
//滑塊區域樣式
"QScrollBar::handle:vertical{background:rgba(75,120,154,0.8);border:1px solid rgba(255,0,0,1);}"
//鼠標滑過滑塊樣式
"QScrollBar::handle:vertical:hover,QScrollBar::handle:vertical:pressed{background:red;border:1px solid rgb(255,255,255);}"
//向上箭頭樣式
"QScrollBar::sub-line:vertical{height:12px;width:12px;background:rgba(255,0,0,0.5) url(:/1.png);}"
//向上箭頭滑過、摁下樣式
"QScrollBar::sub-line:vertical:hover,QScrollBar::sub-line:vertical:pressed{height:20px;width:20px;background:red url(:/1.png);border:1px solid rgb(255,255,255);}"
//向下箭頭樣式
"QScrollBar::add-line:vertical{height:20px;width:20px;background:red url(:/1.png);}"
//向下箭頭滑過、摁下樣式
"QScrollBar::add-line:vertical:hover,QScrollBar::add-line:vertical:pressed{height:20px;width:20px;background:red url(:/1.png);border:1px solid rgb(255,255,255);}"
/*設置垂直滾動條*/
"QScrollBar:vertical{background-color:transparent;width:20px;height:200px;padding-top:20px;padding-bottom:20px;}" //整個垂直滾動條區域樣式
"QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{background-color:transparent;}" //滾動條上面和下面區域樣式
"QScrollBar::handle:vertical{background:rgba(75,120,154,0.8);border:1px solid rgba(82,130,164,1);}" //滑塊區域樣式
"QScrollBar::handle:vertical:hover,QScrollBar::handle:vertical:pressed{background:rgba(75,120,154,1);border:1px solid rgb(255,255,255);}"//鼠標滑過滑塊樣式
"QScrollBar::sub-line:vertical{height:12px;width:12px;background:rgba(75,120,154,0.8) url(:/image/icon/toolIcon/icon_up.png);}"//向上箭頭樣式
"QScrollBar::sub-line:vertical:hover,QScrollBar::sub-line:vertical:pressed{height:12px;width:12px;background:rgba(75,120,154,1) url(:/image/icon/toolIcon/icon_up.png);border:1px solid rgb(255,255,255);}"//向上箭頭樣式
"QScrollBar::add-line:vertical{height:12px;width:12px;background:rgba(75,120,154,0.8) url(:/image/icon/toolIcon/icon_down.png);}"//向下箭頭樣式
"QScrollBar::add-line:vertical:hover,QScrollBar::add-line:vertical:pressed{height:12px;width:12px;background:rgba(75,120,154,1) url(:/image/icon/toolIcon/icon_down.png);border:1px solid rgb(255,255,255);}"//向下箭頭樣式
/*設置水平滾動條*/
"QScrollBar:horizontal{background-color:transparent;width:140px;height:12px;padding-left:12px;padding-right:12px;}" //整個水平滾動條背景樣式
"QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal{background-color:transparent;}" //滾動條左面和右面區域樣式
"QScrollBar::handle:horizontal{background:rgba(75,120,154,0.8);border:1px solid rgba(82,130,164,1);}" //滑塊區域樣式
"QScrollBar::handle:horizontal:hover,QScrollBar::handle:horizontal:pressed{background:rgba(75,120,154,1);border:1px solid rgb(255,255,255);}"//鼠標滑過滑塊樣式
"QScrollBar::sub-line:horizontal{subcontrol-position:left;height:12px;width:12px;background:rgba(75,120,154,0.8) url(:/1.png);}"//向左箭頭樣式
"QScrollBar::sub-line:horizontal:hover,QScrollBar::sub-line:horizontal:pressed{height:20px;width:20px;background:rgba(75,120,154,1) url(:/1.png);border:1px solid rgb(255,255,255);}"//向左箭頭樣式
"QScrollBar::add-line:horizontal{height:12px;width:20px;background:rgba(75,120,154,0.8) url(:/1.png);}"//向右箭頭樣式
"QScrollBar::add-line:horizontal:hover,QScrollBar::add-line:horizontal:pressed{height:20px;width:20px;background:rgba(75,120,154,1) url(:/1.png);border:1px solid rgb(255,255,255);}"//向右箭頭樣式
參考內容:
https://blog.csdn.net/wzs250969969/article/details/78496856