qt html自定义标签颜色,Qt scrollbar样式的自定义

作为一个初学者，最近为了修改样式，可谓抓破头，心累之。​

特将资料储存于此，时翻阅之，惟愿手熟尔。​

​

————————————————————————————————————

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;

}