作为一个初学者,最近为了修改样式,可谓抓破头,心累之。
特将资料储存于此,时翻阅之,惟愿手熟尔。
————————————————————————————————————
Qt设置样式的方式有两种,一种直接在程序中写,适用于样式不多的情况;另一种,写入到文件中,适用用样式较大且需要提供换肤功能的情况。
1.写入到文件中,新建个xx.qss,然后复制一下内容
// 设置垂直滚动条基本样式
QScrollBar:vertical
{
width:8px;
background:rgba(0,0,0,0%);
margin:0px,0px,0px,0px;
padding-top:9px; // 留出9px给上面和下面的箭头,否则handle拖动时就会遮住他们
padding-bottom:9px;
}
QScrollBar::handle:vertical
{
width:8px;
background:rgba(0,0,0,25%);
border-radius:4px; // 滚动条两端变成椭圆
min-height:20;
}
QScrollBar::handle:vertical:hover
{
width:8px;
background:rgba(0,0,0,50%); // 鼠标放到滚动条上的时候,颜色变深
border-radius:4px;
min-height:20;
}
QScrollBar::add-line:vertical // 这个应该是设置下箭头的,3.png就是箭头
{
height:9px;width:8px;
border-image:url(:/images/a/3.png);
subcontrol-position:bottom;
}
QScrollBar::sub-line:vertical // 设置上箭头
{
height:9px;width:8px;
border-image:url(:/images/a/1.png);
subcontrol-position:top;
}
QScrollBar::add-line:vertical:hover // 当鼠标放到下箭头上的时候
{
height:9px;width:8px;
border-image:url(:/images/a/4.png);
subcontrol-position:bottom;
}
QScrollBar::sub-line:vertical:hover // 当鼠标放到下箭头上的时候
{
height:9px;width:8px;
border-image:url(:/images/a/2.png);
subcontrol-position:top;
}
QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical //
当滚动条滚动的时候,上面的部分和下面的部分
{
background:rgba(0,0,0,10%);
border-radius:4px;
}
接着在程序中读取文件
QFile file(":/scrollbar.qss");
file.open(QFile::ReadOnly);
listWidget->verticalScrollBar()->setStyleSheet(file.readAll());
2.直接在程序中设置,简单
listWidget->verticalScrollBar()->setStyleSheet();
内容一样,在此不重述了。
滚动条有两种,水平的和垂直的,我这里面只设置了垂直的,水平的只需要把 vertical 换成 horizontal。
—————————————分割线——割割割———————————————
下图,原创。生动的显示了
ScrollBar的样式属性。
另,加上arrow属性。
QScrollBar::up-arrow:vertical,
QScrollBar::down-arrow:vertical
{
border: 0px solid grey;
width: 10px;
height: 10px;
background: white;
}