PC客户端换肤解决方案（Qt）

1 Qt样式表

QSS称为Qt Style Sheets也就是Qt样式表，它是Qt提供的一种用来自定义控件外观的机制。QSS大量参考了CSS的内容，只不过QSS的功能比CSS要弱很多，体现在选择器要少，可以使用的QSS属性也要少很多，并且并不是所有的属性都可以用在Qt的所有控件上。

注意:QSS会对各种控件提供不同的样式表支持，对于特殊的样式，可以利用筛选器配合Qt控件代码中的ObjectName，对其进行筛选，当然ObjectName可以多个控件都叫一个名称，QSS会将名称一样的设置为一样的样式，若未进行筛选，则样式表则对界面上所有的控件统一设置相同的样式。                   

2 换肤方案设计

针对白天黄昏黑夜，三种皮肤，建立三个样式表文件，每一个样式表文件对应一种皮肤，在点击切换皮肤时，则切换到对应的样式表文件即可，在写样式表文件时，要有一个相对的规范，不能乱写，按照窗口的顺序从上向下来写，如果需要修改某个窗口的样式，则找到对应的窗口在样式表中的位置即可。如下所示，不同界面的QSS以/**********************  *******************/这样的形式分割，便于后续查找以及维护。

示例
/***************************************
* 作者：YYC
* 日期：2020-04-26
* 功能：所有界面的样式表，用于美化界面
***************************************/
 
/********************** TitleBar Style Sheet  *******************/
QFrame#frameTitle
{
background-color:#19617C;
color:white;
}
 
QLabel#labelUtc
{
font-family: PingFangSC-Regular;
font-size: 16px;
color: #FFFFFF;
border: 1px solid #04CBDF;
}
 
/********************** Slider Angel Style Sheet  *******************/
 
QFrame#frameSlider
{
border-image:url(:/res/image/slider.png);
}
 
QPushButton#pushButtonLeft
{
border-image:url(:/res/image/left_arrow_normal.png);
}
 
QPushButton#pushButtonLeft:hover
{
border-image:url(:/res/image/left_arrow_hover.png);
}
 
QPushButton#pushButtonLeft:pressed
{
border-image:url(:/res/image/left_arrow_pressed.png);
}

3 实际应用

针对换肤，下面写了一个单例类，可以全局使用直接调用switchStyle接口，指定相对应的枚举即可，在以后的开发中只需要更改对应的样式表文件即可，无需修改代码。

// 头文件
#ifndef STYLESINGLETON_H
#define STYLESINGLETON_H
 
#include <QObject>
#include <QMutex>
#include <QMap>
 
class StyleSingleton : public QObject
{
    Q_OBJECT
public:
    enum StyleType
    {
        DAY_STYLE,
        DUSK_STYLE,
        NIGHT_STYLE,
 
        MAX_STYLE,
    };
    static StyleSingleton *getInstance();
    bool switchStyle(StyleType styleType);
private:
    explicit StyleSingleton(QObject *parent = nullptr);
    void initValue();
    bool loadStyleSheet(const QString &styleFilePath);
private:
    static QMutex m_mutex;
    QMap<StyleType, QString> m_mapStyle;
};
 
#endif // STYLESINGLETON_H

// 源文件
#include "stylesingleton.h"
#include <QFile>
#include <QApplication>
 
QMutex StyleSingleton::m_mutex;
 
StyleSingleton::StyleSingleton(QObject *parent) : QObject(parent)
{
    this->initValue();
}
 
void StyleSingleton::initValue()
{
    m_mapStyle[DAY_STYLE] = ":/style/day.qss";
    m_mapStyle[DUSK_STYLE] = ":/style/dusk.qss";
    m_mapStyle[NIGHT_STYLE] = ":/style/night.qss";
}
 
StyleSingleton *StyleSingleton::getInstance()
{
    QMutexLocker mutexLocker(&m_mutex);
    static StyleSingleton instance;
    return &instance;
}
 
bool StyleSingleton::loadStyleSheet(const QString &styleFilePath)
{
    QFile file(styleFilePath);
    file.open(QFile::ReadOnly);
    if(file.isOpen())
    {
        qApp->setStyleSheet(file.readAll());
        file.close();
        return true;
    }
    return false;
}
 
bool StyleSingleton::switchStyle(StyleType styleType)
{
    if (!m_mapStyle.contains(styleType)) return false;
 
    return this->loadStyleSheet(m_mapStyle.value(styleType));
}


// 调用
StyleSingleton::getInstance()->switchStyle(StyleSingleton::NIGHT_STYLE);