当今世界,是一个用户体验至上的时代,每个人对软件的整体风格都提出了自己的要求,而这些都迫使开发者们需要定期的更新软件的界面风格,并为不同用户提供个性化的定制服务。
前面两节小豆君分享了有道界面的美化方法,但是美化的方式还存在很多不足,设置样式的代码散落在各个源文件或是ui设计器中,当需要更新界面风格时,就显得格外繁琐。
下面,小豆君就以自己的探索经历,跟大家分享如何有效合理的使用样式表来美化界面。
如果你有更好的方法或建议,欢迎在评论区或群中讨论发言。
1 ui文件告诉我的秘密
在ui设计师界面中对控件属性编辑,信号槽连接等,Qt都会为其生成相应的ui文件(以ui_开头的同名.h文件),所以,当我们编辑控件的样式表时,看看Qt在ui_xxx.h头文件中做了哪些操作。
打开ui_xxx.h文件,浏览该文件中的内容,果然,我们发现了下面的一句话。
原来在ui设计师中编辑的样式表是该pushButton调用了setStyleSheet()接口。
好,那让我们来看看这个接口是怎么声明的。
按下Ctrl键,鼠标移动到setStyleSheet上,该接口高亮,点击接口,直接跳到setStyleSheet的声明处:
查看其所属类,这货是属于QWidget类的,QPushButton间接继承QWidget,而且QWidget类也是所有Qt控件的基类,那么也就是说所有继承自QWidget的类都可以设置样式。
好了,那么我们可以使用setStyleSheet来设置样式了,然而,如果是直接为每个控件调用该接口,和使用ui并无差别,那么,探索继续。
2 文件是个好东西
我们来观察下setStyleSheet的参数,它是一个字符串,那完全可以使用一个文件来将所有的设置语句写在该文件中,对于特殊的控件样式,可以用选择器来设置(关于选择器的内容可查看文章Qt样式表选择器,掌握这些已足够)。
好,我们就以上两节的有道词典为例,首先,将源文件中的所有样式表语句迁移到一个文件中,该文件以qss为后缀名,表明是样式表文件。
3 样式表管理器
毕竟我们使用的是面向对象的程序设计,一切皆为对象,那我们可以专门设计一个类来管理样式表,取名为StyleSheetManager(样式表管理器)。
该管理器需要包含一个数据成员用来存放样式表文件路径。
StyleSheetManager需要对外提供如下接口:
public:
//1 加载指定的样式表
//2 切换指定的样式(换肤)
private:
//1 读取指定文件内容
为此,我们生成实际代码如下:
stylesheetmanager.h
#ifndefSTYLESHEETMANAGER_H
#defineSTYLESHEETMANAGER_H
#include
classStyleSheetManager:publicQObject
{
Q_OBJECT
public:
StyleSheetManager(QObject*parent=);
StyleSheetManager(constQString&filePath,QObject*parent=);
//1加载指定的样式表字符串
boolload(constQString&styleStr);
//1.1加载指定qss文件
boolloadFile(constQString&path);
//2重新加载指定的样式表文件
boolreload();
//3切换指定的样式(换肤)
boolswitchTo(constQString&path);
//4qss文件路径存取器
QStringfilePath()const;
voidsetFilePath(constQString&path);
signals:
voidstyleSheetLoaded();
private:
//1读取指定文件内容
QStringreadFile(constQString&path)const;
//2是否为同一文件
boolisSameFile(constQString&path)const;
private:
QStringm_filePath;//qss文件路径
};
#endif//STYLESHEETMANAGER_H
stylesheetmanager.cpp
#include
#include
#include
#include
#include"stylesheetmanager.h"
StyleSheetManager::StyleSheetManager(QObject*parent):
QObject(parent)
{
}
StyleSheetManager::StyleSheetManager(
constQString&filePath,QObject*parent
):QObject(parent)
{
setFilePath(filePath);
}
boolStyleSheetManager::load(constQString&styleStr)
{
if(!styleStr.isEmpty()&&qApp)
{
qApp->setStyleSheet(styleStr);
setFilePath(styleStr);
returntrue;
}
returnfalse;
}
boolStyleSheetManager::loadFile(constQString&path)
{
QStringstyleStr=readFile(path);
returnload(styleStr);
}
boolStyleSheetManager::reload()
{
returnloadFile(filePath());
}
boolStyleSheetManager::switchTo(constQString&path)
{
if(isSameFile(path))
{
returnfalse;
}
returnloadFile(path);
}
QStringStyleSheetManager::readFile(constQString&path)const
{
QStringret;
QFilefile(path);
if(file.open(QIODevice::ReadOnly))
{
ret=file.readAll();
file.close();
}
returnret;
}
boolStyleSheetManager::isSameFile(constQString&path)const
{
returnfilePath()==path;
}
QStringStyleSheetManager::filePath()const
{
returnm_filePath;
}
voidStyleSheetManager::setFilePath(constQString&path)
{
m_filePath=path;
}
4 编写qss文件
将源文件中的样式表代码拷贝到qss文件中,并稍加修改,如下图:
5 多文件加载
细心的同学可能发现,对于比较少的控件,我们一般使用一个文件已经足够了,但是对于复杂多种类的控件,如果全部写在一个文件中,难免会显得过于臃肿,因此我们可以为每一类控件单独创建一个qss文件。
将每类控件的qss代码移到相应的文件中,然后在StyleSheetManager类中添加一个公有接口loadDir()用来加载所有指定目录下的所有qss文件
//1.2加载指定文件夹下的所有qss文件
boolStyleSheetManager::loadDir(constQString&path)
{
QStringstyleStr;
QDirdir(path);
QFileInfoListfileList=dir.entryInfoList(QDir::Files);
foreach(constQFileInfo&file,fileList)
{
styleStr+=readFile(file.absoluteFilePath());
}
returnload(styleStr);
}
再在main函数最后添加如下两句
StyleSheetManagermanager;
manager.loadDir(":/style/");
OK,大功告成,让我们编译代码,再重新运行程序
如果想要实现换肤功能,那就可以建立多个样式表文件夹,调用StyleSheetManager类的换肤接口即可。
好的,关于样式表的内容就分享到这里了,本节的所有代码小豆君已经上传到qq群文件中,有需要的朋友可以自行下载。
领取专属 10元无门槛券
私享最新 技术干货