Qt之QSS(動態屬性)


簡述

QSS可以定制應用程序的外觀,無需關注Qt樣式背后的魔力。從非常輕微到極其復雜的調整,樣式表都可以做到。對於一個完全定制和獨特的用戶體驗,QtQuick和QGraphicsView是更好的選擇。

自定義屬性

為了用戶界面外觀的動態變化,屬性選擇器可以與動態屬性組合使用。動態屬性在Qt4.2中引入,允許為編譯時不存在的QObject屬性分配屬性值。即:如果為QObject設置一個urgent屬性為true,該屬性將跟隨該類,但不會為urgent屬性包含一個Q_PROPERTY宏。

創建樣式選擇器依賴於動態屬性,例如:urgent,可以用一個非常動態的方式凸顯用戶界面。例如:

QLineEdit[urgent=true] { color: red; }

限制

使用這種方式有局限性。最主要的是,當一個屬性值變化時,所引用的樣式不會自動更新。相反地,必須手動觸發更新才會生效。

unpolish()用於清理之前的樣式,而polish()則用於添加新的樣式。

例如:

myLineEdit->setProperty("urgent", true);
myLineEdit->style()->unpolish(myLineEdit);
myLineEdit->style()->polish(myLineEdit);

注意:必須在部件的樣式中使用,QStyle::polish既接受QWidge也接受QApplication作為參數。

示例

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

效果

這里寫圖片描述 這里寫圖片描述

源碼

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());
    }
}

使用屬性選擇器的時候,如果之前已經有了樣式,那么,需要重新設置一下,使用了unpolish()與polish()。當然,也可以不用那么復雜,直接使用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); }

更多參考


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM