我认为qt样式表对于专注于ui交互的人,其在qt的地位不亚于信号与槽的地位。通过qt样式表可以展示绝大部分你可以想象得到的风格。
qt样式表的使用是先将要特例化的样式建立在后缀qss的文件中,在程序启动时加载进来,那些在qss文件中涉及的样式将会替换掉qt各个界面元件默认的样式。
要将qss加载在程序中,需要3个步骤:
1)在qt资源文件.qrc中加入的qss资源,例如:
<RCC version="1.0">
<qresource prefix="/">
<file>qss/skin.qss</file>
</qresource>
</RCC>
2)在程序中读取qss文件信息并设置,示例:
//设置界面皮肤
bool setSkin(QApplication* const app, QString const &skinFile)
{
QFile file(skinFile);
if (QFile::exists(skinFile) && file.open(QIODevice::ReadOnly))
{
//设置默认风格,有Windows WindowsXP WindowsVista Motif CDE Plastique Cleanlooks多种选择
QApplication::setStyle(QStyleFactory::create("WindowsXP"));
QString strTemp;
QTextStream in(&file);
while (!in.atEnd())
{
strTemp.append(in.readLine());
}
file.close();
app->setStyleSheet(strTemp);
} else{
return false;
}
return true;
};
//主函数入口
int main(int argc, char *argv[])
{
//app构造
QApplication app(argc, argv);
//主窗口
MainWindow w;
//设置界面皮肤
setSkin(&app ,":/qss/skin.qss");
w.show();
return app.exec();
};
3)在qss中将需要变更样式的元件进行重新设计,例如要改变qtreeview的风格
/****************** QTreeView **************/
QTreeView {
/*alternate-background-color: yellow;*/
font-size:12px;
font-family:"Courier New";
show-decoration-selected: 1;
}
QTreeView::item {
border: 1px solid #d9d9d9;
border-top-color: transparent;
border-bottom-color: transparent;
}
/* 鼠标在QTreeView上面移动时的效果 */
QTreeView::item:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1);
border: 1px solid #bfcde4;
/*background-color:rgba(0,230,230,127);*/
}
QTreeView::item:selected {
border: 1px solid #0055ff;
/*background-color:rgba(0,230,0,127);*/
}
/* 节点被选中激活时的效果 */
QTreeView::item:selected:active{
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #0028ff, stop: 1 #0055ff);
}
QTreeView::item:selected:!active {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #0000ff, stop: 1 #0028ff);
}
QTreeView::branch:has-siblings:!adjoins-item {
border-image: url(:/images/vline.png)0;
}
QTreeView::branch:has-siblings:adjoins-item {
border-image: url(:/images/branch-more.png)0;
}
QTreeView::branch:!has-children:!has-siblings:adjoins-item {
border-image: url(:/images/branch-end.png)0;
}
QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {
border-image: none;
image: url(:/images/branch-closed.png);
}
QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings {
border-image: none;
image: url(:/images/branch-open.png);
}
treeview_img:
关于样式表更多更深层级的知识可参考:http://doc.qt.io/qt-4.8/stylesheet-examples.html