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;
}
posted @ 2020-04-26 21:26  懒人状元  阅读(8075)  评论(0编辑  收藏  举报