QT开发（六十八）——QSS应用
QT开发（六十八）——QSS应用
本博文转载自一去丶二三里的博客：http://blog.csdn.net/liang19890820
一、语法高亮设置
Qt Creator中默认情况下打开qss文件（*.qss）不会高亮显示，需要手动配置，让其更符合阅读习惯，以更炫丽的方式展示代码片段。
配置流程如下：
A、进入：工具 -> 选项 -> 环境 -> MIME 类型。
B、在【已注册的MIME类型】处输入“text/css”可以快速定位，然后在【详情】中的“模式”处添加 *.qss，即将原来的“模式”改为：*.css;*.CSSL;*.qss。
注意：中间用分号（;）分隔
650) this.width=650;" src="https://s2.51cto.com/wyfs02/M02/8C/C1/wKioL1h3MLazus55AAB8TRdrkAs237.png" title="图片1.png" alt="wKioL1h3MLazus55AAB8TRdrkAs237.png" />
效果如下：
650) this.width=650;" src="https://s4.51cto.com/wyfs02/M02/8C/C4/wKiom1h3MNejeEi9AABIOKASKwM740.png" title="图片2.png" alt="wKiom1h3MNejeEi9AABIOKASKwM740.png" />
二、动态属性
1、自定义属性
为了用户界面外观的动态变化，属性选择器可以与动态属性组合使用。动态属性在QT4.2中引入，允许为编译时不存在的QObject属性分配属性值。即：如果为QObject设置一个urgent属性为true，该属性将跟随该类，但不会为urgent属性包含一个Q_PROPERTY宏。
创建样式选择器依赖于动态属性，例如：urgent，可以用一个非常动态的方式凸显用户界面。例如：
QLineEdit[urgent=true] {
color: red;
}
使用这种方式有局限性。最主要的是当一个属性值变化时，所引用的样式不会自动更新。相反地，必须手动触发更新才会生效。
unpolish()用于清理之前的样式，而polish()则用于添加新的样式。
lineEdit->setProperty("urgent", true);
lineEdit->style()->unpolish(lineEdit);
lineEdit->style()->polish(lineEdit);
必须在组件的样式中使用，QStyle::polish既接受QWidge也接受QApplication作为参数。
2、实例
自定义标题栏中的最大化/还原按钮为例，进行切换。
650) this.width=650;" src="https://s3.51cto.com/wyfs02/M00/8C/C4/wKiom1h3MRHBOysGAAAIRnyXx3k258.png" style="float:none;" title="图片3.png" alt="wKiom1h3MRHBOysGAAAIRnyXx3k258.png" />650) this.width=650;" src="https://s3.51cto.com/wyfs02/M00/8C/C1/wKioL1h3MRKw4DRuAAAIgQP_mmI528.png" style="float:none;" title="图片4.png" alt="wKioL1h3MRKw4DRuAAAIgQP_mmI528.png" />
void TitleBar::updateMaximize(){ QWidget *pWindow = this->window(); if (pWindow->isTopLevel()) { bool bMaximize = pWindow->isMaximized(); m_pMaximizeButton->setToolTip(bMaximize ? tr("Restore") : tr("Maximize")); m_pMaximizeButton->setProperty("maximizeProperty", bMaximize ? "restore" : "maximize"); // 手动更新样式 m_pMaximizeButton->style()->unpolish(m_pMaximizeButton); m_pMaximizeButton->style()->polish(m_pMaximizeButton); m_pMaximizeButton->update(); //m_pMaximizeButton->setStyle(QApplication::style()); }}QSS：
QPushButton#maximizeButton[maximizeProperty="maximize"] { border-radius: none; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background: rgb(50, 50, 50); image: url(:/Images/maximize);}QPushButton#maximizeButton[maximizeProperty="maximize"]:hover { background: rgb(60, 60, 60); image: url(:/Images/maximizeHover);}QPushButton#maximizeButton[maximizeProperty="maximize"]:pressed { background: rgb(55, 55, 55); image: url(:/Images/maximizePressed);}QPushButton#maximizeButton[maximizeProperty="restore"] { border-radius: none; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background: rgb(50, 50, 50); image: url(:/Images/restore);}QPushButton#maximizeButton[maximizeProperty="restore"]:hover { background: rgb(60, 60, 60); image: url(:/Images/restoreHover);}QPushButton#maximizeButton[maximizeProperty="restore"]:pressed { background: rgb(55, 55, 55); image: url(:/Images/restorePressed);三、原始属性
任何可被识别的Q_PROPERTY都可以使用qproperty-语法设置。
Q_PROPERTY定义的属性通过QSS按照qproperty-
QLabel的属性如下：
class Q_WIDGETS_EXPORT QLabel : public QFrame{ ... Q_PROPERTY(QPixmap pixmap READ pixmap WRITE setPixmap) Q_PROPERTY(bool scaledContents READ hasScaledContents WRITE setScaledContents) ...};class Q_WIDGETS_EXPORT QWidget : public QObject, public QPaintDevice{ ... Q_PROPERTY(QSize minimumSize READ minimumSize WRITE setMinimumSize) Q_PROPERTY(QSize maximumSize READ maximumSize WRITE setMaximumSize) ...};QLabel的属性有minimumSize、maximumSize、pixmap、scaledContents。
QSS文件：
QLabel#customLabel { qproperty-minimumSize: 100px 100px; qproperty-maximumSize: 100px 100px; qproperty-pixmap: url(:/Images/logo); qproperty-scaledContents: true;} QPushButton#customButton { qproperty-text: "Click Me"; qproperty-icon: url(:/Images/logo); qproperty-iconSize: 20px 20px;} QGroupBox#customGroupBox { qproperty-title: "GroupBox";}源码：
Widget::Widget(QWidget *parent) : QWidget(parent){ QLabel *pLabel = new QLabel(this); QPushButton *pButton = new QPushButton(this); QGroupBox *pGroupBox = new QGroupBox(this); pLabel->setObjectName("customLabel"); pButton->setObjectName("customButton"); pGroupBox->setObjectName("customGroupBox"); QVBoxLayout *pLayout = new QVBoxLayout(); pLayout->addStretch(); pLayout->addWidget(pLabel, 0, Qt::AlignCenter); pLayout->addWidget(pButton); pLayout->addStretch(); pLayout->setSpacing(10); pLayout->setContentsMargins(10, 10, 10, 10); pGroupBox->setLayout(pLayout);}Main.cpp文件：
#include "Widget.h"#include #include class CommonHelper{public: static void setStyle(const QString &style) { QFile qss(style); qss.open(QFile::ReadOnly); qApp->setStyleSheet(qss.readAll()); qss.close(); }}; int main(int argc, char *argv[]){ QApplication a(argc, argv); CommonHelper::setStyle(":/style.qss"); Widget w; w.show(); return a.exec();} 以上的解决方法将界面样式与业务逻辑进行了分离，效果与如下代码相同：
pLabel->setPixmap(QPixmap(":/Images/logo"));pLabel->setMinimumSize(100, 100);pLabel->setMaximumSize(100, 100);pLabel->setScaledContents(true); pButton->setIcon(QIcon(":/Images/logo"));pButton->setIconSize(QSize(20, 20));pButton->setText("Click Me"); pGroupBox->setTitle("GroupBox");四、自定义属性
1、自定义属性
QAbstractItemModel、QAbstractItemDelegate均继承自QObject，而QSS只能用于QWidget及其子类，动态获取样式属性值方法如下：
A、创建一个从QWidget继承的专用类StyledWidget。
B、为StyledWidget添加自定义属性，并使用Q_PROPERTY声明
C、自定义QSS，使用自定义属性，语法：qproperty-
其中，Q_PROPERTY声明有以下要求：
READ getFunction
用于读取属性，使用const限定，返回属性的类型或者类型的指针或引用。
WRITE setFunction
用于设置属性，参数是一个属性的类型，或者属性的const指针或引用，返回
2、应用实例
创建一个从QWidget继承的专用类StyledWidget，为其添加自定义属性，并使用Q_PROPERTY声明。
StyledWidget.h文件：
#ifndef STYLEDWIDGET_H#define STYLEDWIDGET_H #include class StyledWidget : public QWidget{ Q_OBJECT Q_PROPERTY(QColor normalColor READ normalColor WRITE setNormalColor DESIGNABLE true) ...public: explicit StyledWidget(QWidget *parent = 0); ~StyledWidget(); QColor normalColor() const; void setNormalColor(QColor color); ... private: QColor m_normalColor; ...}; #endif // STYLEDWIDGET_H StyledWidget.cpp文件：
...QColor StyledWidget::normalColor() const{ return m_normalColor;} void StyledWidget::setNormalColor(QColor color){ m_normalColor = color;}...QSS文件：
StyledWidget { qproperty-normalColor: white; qproperty-disableColor: gray; qproperty-highlightColor: rgb(0, 160, 230); qproperty-errorColor: red;}使用：
在需要设置样式的类中声明StyledWidget：
class TableModel : public QAbstractTableModel{ Q_OBJECTpublic: ... QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const; ...private: ... StyledWidget m_styledWidget;};使用自定义属性设置样式：
QVariant TableModel::data(const QModelIndex &index, int role) const{ if (!index.isValid()) return QVariant(); switch (role) { case Qt::TextColorRole: { if (index.column() == FILE_NAME_COLUMN) return m_styledWidget.normalColor(); if (index.column() == SIZE_COLUMN) return m_styledWidget.highlightColor(); if (index.column() == STATUS_COLUMN) return m_styledWidget.errorColor(); } ... } return QVariant();}650) this.width=650;" src="https://s5.51cto.com/wyfs02/M01/8C/C1/wKioL1h3MT3QloiuAABCTpvStm8315.png" title="图片5.png" alt="wKioL1h3MT3QloiuAABCTpvStm8315.png" />
五、QSS文件加载
QT中对于样式表的使用，为了降低耦合性（与逻辑代码分离），通常会定义一个QSS文件，然后编写各种组件（QLabel、 QLineEdit、QPushButton）的样式，最后使用QApplication进行样式加载，让整个应用程序就共享同一个样式。
1、创建QSS文件
创建一个后缀名为qss的文件，例如：style.qss，将其加入资源文件（qrc）中。
2、编写QSS文件
QLineEdit{ border: 1px solid rgb(41, 57, 85); border-radius: 3px; background: white; selection-background-color: green; font-size: 14px ;}3、QSS文件加载
为了便于调用，可以写一个静态加载样式的函数
#include #include class CommonHelper{public: static void setStyle(const QString &style) { QFile qss(style); qss.open(QFile::ReadOnly); qApp->setStyleSheet(qss.readAll()); qss.close(); }}; 主函数中加载：
int main(int argc, char *argv[]){ QApplication a(argc, argv); // 加载QSS样式 CommonHelper::setStyle("style.qss"); MainWindow window; window.show(); return a.exec();}4、QSS加载实现原理
qApp是QCoreApplication的一个单例，然后，将其转换为QApplication。
#if defined(qApp)#undef qApp#endif#define qApp (static_cast(QCoreApplication::instance())) QApplication调用setStyleSheet()后所有的组件样式都改变的主要原因是调用了setStyle()。
void QApplication::setStyle(QStyle *style){ if (!style || style == QApplicationPrivate::app_style) return; QWidgetList all = allWidgets(); // clean up the old style if (QApplicationPrivate::app_style) { if (QApplicationPrivate::is_app_running && !QApplicationPrivate::is_app_closing) { for (QWidgetList::ConstIterator it = all.constBegin(), cend = all.constEnd(); it != cend; ++it) { QWidget *w = *it; if (!(w->windowType() == Qt::Desktop) && // except desktop w->testAttribute(Qt::WA_WState_Polished)) { // has been polished QApplicationPrivate::app_style->unpolish(w); } } } QApplicationPrivate::app_style->unpolish(qApp); } QStyle *old = QApplicationPrivate::app_style; // save QApplicationPrivate::overrides_native_style = nativeStyleClassName() == QByteArray(style->metaObject()->className()); #ifndef QT_NO_STYLE_STYLESHEET if (!QApplicationPrivate::styleSheet.isEmpty() && !qobject_cast(style)) { // we have a stylesheet already and a new style is being set QStyleSheetStyle *newProxy = new QStyleSheetStyle(style); style->setParent(newProxy); QApplicationPrivate::app_style = newProxy; } else#endif // QT_NO_STYLE_STYLESHEET QApplicationPrivate::app_style = style; QApplicationPrivate::app_style->setParent(qApp); // take ownership // take care of possible palette requirements of certain gui // styles. Do it before polishing the application since the style // might call QApplication::setPalette() itself if (QApplicationPrivate::set_pal) { QApplication::setPalette(*QApplicationPrivate::set_pal); } else if (QApplicationPrivate::sys_pal) { clearSystemPalette(); initSystemPalette(); QApplicationPrivate::initializeWidgetPaletteHash(); QApplicationPrivate::initializeWidgetFontHash(); QApplicationPrivate::setPalette_helper(*QApplicationPrivate::sys_pal, /*className=*/0, /*clearWidgetPaletteHash=*/false); } else if (!QApplicationPrivate::sys_pal) { // Initialize the sys_pal if it hasn't happened yet... QApplicationPrivate::setSystemPalette(QApplicationPrivate::app_style->standardPalette()); } // initialize the application with the new style QApplicationPrivate::app_style->polish(qApp); // re-polish existing widgets if necessary if (QApplicationPrivate::is_app_running && !QApplicationPrivate::is_app_closing) { for (QWidgetList::ConstIterator it = all.constBegin(), cend = all.constEnd(); it != cend; ++it) { QWidget *w = *it; if (w->windowType() != Qt::Desktop && w->testAttribute(Qt::WA_WState_Polished)) { if (w->style() == QApplicationPrivate::app_style) QApplicationPrivate::app_style->polish(w); // repolish#ifndef QT_NO_STYLE_STYLESHEET else w->setStyleSheet(w->styleSheet()); // touch#endif } } for (QWidgetList::ConstIterator it = all.constBegin(), cend = all.constEnd(); it != cend; ++it) { QWidget *w = *it; if (w->windowType() != Qt::Desktop && !w->testAttribute(Qt::WA_SetStyle)) { QEvent e(QEvent::StyleChange); QApplication::sendEvent(w, &e); w->update(); } } } #ifndef QT_NO_STYLE_STYLESHEET if (QStyleSheetStyle *oldProxy = qobject_cast(old)) { oldProxy->deref(); } else#endif if (old && old->parent() == qApp) { delete old; } if (QApplicationPrivate::focus_widget) { QFocusEvent in(QEvent::FocusIn, Qt::OtherFocusReason); QApplication::sendEvent(QApplicationPrivate::focus_widget->style(), &in); QApplicationPrivate::focus_widget->update(); }} 主要分为4步：
A、清理旧样式 - unpolish()
B、初始化新样式 - polish()
C、加载新样式 - polish() + sendEvent()、update()
D、删除旧样式 - delete
通过调用QWidgetList all = allWidgets()获取了所有控件的集合，然后利用迭代器QWidgetList::ConstIterator对每一个控件进行处理，通 过QApplication::sendEvent()来发送QEvent::StyleChange事件，达到全局样式更改。