QT開發（六十八）——QSS應用

本博文轉載自一去丶二三裡的部落格：http://blog.csdn.net/liang19890820

一、語法高亮設定

    Qt Creator中預設情況下開啟qss檔案（*.qss）不會高亮顯示，需要手動配置，讓其更符合閱讀習慣，以更炫麗的方式展示程式碼片段。

配置流程如下：

    A、進入：工具 -> 選項 -> 環境 -> MIME 型別。

    B、在【已註冊的MIME型別】處輸入“text/css”可以快速定位，然後在【詳情】中的“模式”處新增 *.qss，即將原來的“模式”改為：*.css;*.CSSL;*.qss。

注意：中間用分號（;）分隔

效果如下：

二、動態屬性

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、例項

    自定義標題欄中的最大化/還原按鈕為例，進行切換。

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-<property name>語法的方式設定。

    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 <QApplication>#include <QFile> 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-<property name>

    其中，Q_PROPERTY宣告有以下要求：

    READ getFunction
    用於讀取屬性，使用const限定，返回屬性的型別或者型別的指標或引用。

    WRITE setFunction
    用於設定屬性，引數是一個屬性的型別，或者屬性的const指標或引用，返回

2、應用例項

    建立一個從QWidget繼承的專用類StyledWidget，為其新增自定義屬性，並使用Q_PROPERTY宣告。

StyledWidget.h檔案：

#ifndef STYLEDWIDGET_H#define STYLEDWIDGET_H #include <QWidget> 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();}

五、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 <QFile>#include <QApplication> 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<QApplication *>(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<QStyleSheetStyle *>(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<QStyleSheetStyle *>(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事件，達到全域性樣式更改。