Qt之界面换肤的两种方式

概述

• 像现在市面上有很多软件都有换肤功能，例如：QQ、360、迅雷等。换肤其实很简单，并没有想象中那么难，下面介绍两种实现换肤的方式，仅供参考！

方式一

1. 实现原理

• 创建多个QSS文件
  首先，根据界面不同的版式创建多个QSS文件，例如，black.qss，blackblue.qss，gray.qss等，将其加入资源文件。Qt样式表的动态加载如下：

QFile file(":/qss/black.qss");  
file.open(QFile::ReadOnly);  
QString styleSheet = QLatin1String(file.readAll());  
qApp->setStyleSheet(styleSheet);  
file.close(); 

• 每一个QSS文件编写对应控件的样式

//QMenu样式（black.qss）
QMenu::item
{
	background-color: #333333;
	padding: 5px 10px 5px 10px;
	margin:5px 5px 10px 10px;
}

QMenu::item:disabled
{
	color: #666666;
}

QMenu::item:selected
{
	background: #333333;
	color: #FEFEFE;
	border: 1px solid transparent;
}

QMenu::separator
{
	height: 1px;
	background: transparent;
	margin: 10px 1px 10px 1px;
}

QMenu::indicator
{
	width: 13px;
	height: 13px;
}

• 界面换肤时，进行切换
  界面上可以通过不同的按钮进行加载不同的QSS文件，以此达到换肤功能。

方式二

1. 实现原理

• 创建一个QSS文件
  首先，创建一个后缀名为QSS文件，例如style.qss，将其加载到资源文件中（qrc）。
• 生成格式文件（文件类型可以是xml，也可以是json格式）
  然后，手动创建一个用于保存界面中控件的颜色值的文件，例如customcolor.xml，该xml文件格式可以自己设计，方便加载和解析。以下给出customcolor.xml的格式，仅供参考。

//注意：颜色值的划分可按照重要色、强调色、普通色及不可编辑色等类型进行划分。
<?xml version="1.0" encoding="utf-8"?>
<!--  QApplication Color -->
<StyleColor>
	<!-- 字体颜色 -->
 	<ColorItem name="fontcolor" value="#cccccc"></ColorItem>
 	<!-- 边框颜色 -->
 	<ColorItem name="bordercolor" value="#cccccc"></ColorItem>
	<!-- 普通控件颜色 -->
	<ColorItem name="normalcolor" value="#cccccc"></ColorItem>
	<!-- 普通控件hover颜色 -->
	<ColorItem name="hovercolor" value="#6699cc"></ColorItem>
	<!-- 普通控件press颜色 -->
	<ColorItem name="presscolor" value="#333333"></ColorItem>
</note>

• 替换QSS文件中的颜色值

//修改QSS中的字体、背景颜色值，与customcolor.xml文件对应起来
QPushButton#login_btn
{
	border-width:1px;
	border-style: style;
	border-color: %bordercolor%;
	border-radius: 3px;
	color: %fontcolor%;
	background: %normalcolor%;
}
QPushButton#login_btn::hover
{
	background: %hovercolor%;
}
QPushButton#login_btn::pressed
{
 	background: %presscolor%;
}

• 加载并解析格式文件，进行界面换肤

//加载QSS文件
QFile qssfile(":/themes/style");
QString qss;
UpdateThemeFile(qssfile);
AnalysisQssFile(qssfile, qss);
this->setStyleSheet(qss);

//解析customcolor.xml文件
//DOC解析xml需要添加对应头文件
QMap<QString, QString> ColorMaps;
void UpdateThemeFile(QString& qssfile)
{
	QString filepath = QApplication::applicationDirPath() + "/customcolor.xml";
	QFile file(filepath);
	if(!file.open(QIODevice::ReadOnly))
	{
		return;	
	}
	QDocument docment;
	bool isok = docment.setContent(&file);
	if(!isok)
	{
		file.close();
		return;
	}
	file.close();

	QDocment root = docment.docmentElement();
	QDomNode node = root.firstChild();
	while(!node.isNull())
	{
		if(node.isElement())
		{
			QDomElement firstele = node.toElement();
			QDomNodeList nodelist = firstele.childNodes();
			 for(int i=0;i<nodelist.count();++i)
			 {
				if(nodelist.at(i).isElement())
				{
					QDomElement coloritem = nodelist.at(i).toElement();
					QString strname = coloritem.attribute("name");
					QString strvalue = coloritem.attribute("value"); 
					ColorMaps.insert(strname, strvalue);
				}	
			}
		}
		node = node.nextSibling();//读取
	}
}

void AnalysisQssFile(QString qssfile, QString& qssstr)
{	
	if(ColorMaps.count() > 0 && qssfile.open(QIODevice::ReadOnly))
	{
		QByteArray bytes = qssfile.readAll();
		QMap<QString,QString>::iterator iter = ColorMaps.begin();
		for(; iter != ColorMaps.end(); ++iter)
		{
			QString repname = "%" + iter.key() + "%";	
			bytes.replace(repname, iter.value().toUtf8());
		}
		qssstr = bytes;
	}
}