簡述
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); }