所需工具:QT Creator 5.7
前言:
本文主要讨论如何将一个QT APP中的所有控件进行整体换肤的功能。
探讨:
近由于项目需求,我研究了一下如何将一个QT APP的所有控件进行整体的换肤功能。
传统:
如果按照传统的更换每一个控件的图像,那么面临的问题是代码繁多,手续繁琐。如果这个APP中有100个控件,那么岂不是要重写100次画图的代码?所以我们需要一个统筹整个APP的控件。
样式表:
经过寻找,我在QT Assiant中寻找到了一个函数setStyleSheet();
这个方法是QApplation中的一个方法。主要功能是使用“样式表”来实现相应的图片渲染。
什么是样式表呢?
同样是在QT Assiant中,我们找到了相关的说明:
The concepts, terminology, and syntax of Qt Style Sheets are heavily inspired by HTML Cascading Style Sheets (CSS) but adapted to the world of widgets
也就是说“样式表”本身是一个CSS语言。
所以我们在按照CSS语言来书写一段CSS代码吧!(在QT中我们成为qss语言)
我们来书写一个文件叫:my.qss 并且把它加入到QT APP中的资源文件
QWidget{
/*背景图片,无法随着部件的大小来自动缩放*/
background-image: url(:/res/image/common/background.png);
/*设置边框图片,实现随着部件的大小来自动缩放,会绘制在背景之上*/
border-image: url(:/res/image/common/background.png);
}
QPushButton{
/*背景颜色*/
background-color: rgba(100, 225, 100, 30);
/*边框样式为沉进去*/
border-style:inset;
/*边框宽度为4个像素*/
border-width:4px;
/*边框圆角半径为10个像素*/
border-radius:10px;
/*边框颜色*/
border-color: rgba(100, 125, 15, 30);
/*字体*/
font:bold 9px "新宋体";
/*字体颜色*/
color: rgba(0, 0, 0, 100);
/*填衬*/
padding:6px;
}
…
然后我们要给APP 安装一下样式表:
下列代码书写到APP中某个能够被运行的代码:
//==============使用样式表文件==============
QFile t_styleSheetFile(":/my.qss");
//以只读方式打开文件
t_styleSheetFile.open(QFile::ReadOnly);
//读取文件所有内容,用tr()函数将其转换为QString类型
QString m_styleSheet = t_styleSheetFile.readAll();
//为QApplication设置样式表
qApp->setStyleSheet(m_styleSheet);
我们来看一下代码的实现效果:
你会发现本APP中所有的控件,都会按照你的qss文件中的指定进行布置。