Qt Style Sheet實踐（一）：按鈕及關聯選單
http://www.cnblogs.com/csuftzzk/p/qss_button_menu.html
導讀
正如web前端開發中CSS（Cascade Style Sheet）的作用一樣，Qt開發中也可以使用修改版的QSS將邏輯業務和使用者介面進行隔離。這樣，美工設計人員和邏輯實現者可以各司其職而不受干擾。更重要的是，由於介面和邏輯處理是分離的，低耦合性使得程式碼重構的工作量可以減少到最小。QSS和CSS的語法幾乎一致，除了Qt自身增加的一些屬性之外，其餘的屬性都可以在CSS2或CSS3中找到對應的屬性。因此，如果曾經有過CSS的使用經驗，那麼QSS的使用將遊刃有餘。關於QSS的使用實踐，打算撰寫一系列部落格來記錄使用過程中的一些技巧和方法。本篇是系列第一篇，主要探討QPushButton
QSS介紹
QSS(Qt Style Sheet)借鑑於CSS的良好思想，實現了介面和邏輯的分離。QSS中引入了盒模型（Box Model）概念，這是樣式表技術中的核心概念之一。具體的解釋網上說的挺多的，Qt本身自帶的文件也有較為詳細的說明。在使用盒模型進行設計之前，我們得了解下Qt中哪些元件可以用盒模型進行佈局設計：
| QCheckBox | QCheckBox的勾選符號可以使用::indicator子元件來定製。預設情況下，勾選標記位於元件矩形的左上角。QCheckBox的spacing屬性可以用於指定勾選標記和文字內容之間的間距。 |
| QComboBox | 對於QComboBox而言，支援盒模型的其實是包裹QComboBox的外框(Frame)，QComboBox的下拉單按鈕通過::drop-down子元件來定製，預設情況下下拉單按鈕位於盒模型中padding矩形的右上角。下拉按鈕中的箭頭號通過::down-arrow子元件進行定製，箭頭號預設位於子元件的正中央。 |
| QGroupBox | QGroupBox的標題用::title子元件進行定製，標題的位置依QGroupBox::textAlignment的具體值而言。對於可選的QGroupBox而言，標題中還會包含一個勾選標記，勾選標記用::indicator來定製，spacing仍然用於設定勾選標記與文字的間距。 |
| QSpinBox(QDateEdit,QDateTimeEdit) |  如圖所示，預設情況下spinbox右部分成上下兩個按鈕。以向上的箭頭為例，::up-button和::up-arrow分別用於定製按鈕及位於按鈕中的箭頭號。箭頭號預設位於按鈕的中間，對於向下的按鈕類似，只是用::down-button和::down-arrow子元件。 |
| QToolBox | QToolBox是一個具備QQ摺疊功能的元件，因此其中的獨立的page使用::tab子元件定製。::tab元件支援一些偽狀態：:only-one, :first, :middle, :previous-selected, :next-selected, :selected，從而達到定製特定page的目的。 |
| QMenuBar | 選單欄元件的spacing屬性可指定選單項之間的間距，單個選單項還可以通過::item子元件定製風格。但是值得注意的是，由於MAC下選單欄整合到了系統選單欄，此時樣式表會失去作用。 |
| QProgressBar | 進度條元件使用::chunks子元件來定製進度條樣式，text-align屬性用於設定進度條中文字的對齊方向：left, center, right |
| QScrollBar | 滾動條的組成其實非常複雜，依據垂直和水平方向的不同，由::handle, ::add-line, ::sub-line, ::add-page, ::sub-page, ::right-arrow, ::left-arrow, ::down-arrow, ::up-arrow等子元件組成。偽狀態:horizontal, :vertical用於確定滾動條的方向，width(min-width), height(min-height)則可確定滾動條的不同長和寬。 |
| QToolBar | 工具欄的偽狀態:top, :left, :right, :bottom的使用依賴於工具欄的具體位置；而:first, :last, :middle, :only-one則用於指代工具欄中的具體位置。工具欄的分隔器用::separator子元件指代，::handle則指代移動工具欄的handle. |
| QMenu | 選單中的獨立項使用::item子元件定製，除了常見的偽狀態，::item還支援:selected, :default, :exclusive以及:non-exclusive等偽狀態。利用這些偽狀態，可以為不同狀態的選單項定製出不同的外觀。對於可勾選的選單項，使用::indicator對勾選標記進行定製，::separator則定製選單項之間的分隔符；對於有子選單的選單項，其箭頭號可以用::right-arrow, ::left-arrow進行定製，還有::scroller及::tearoff兩個子元件，暫時沒搞清楚具體作用。 |
| QLabel | QLabel不支援:hover偽狀態，自Qt4.3開始，給QLabel設定樣式表也就隱式指定了QFrame::frameStyle屬性。 |
| QLineEdit | 對於QLineEidt，selection-color, selection-background-color屬性分別指定了選中文字的文字顏色和背景色，lineedit-password-character屬性說明密碼輸入顯示的字元。將在後面的實踐中說明。 |
| QPushButton | 支援:default, :flat, :checked偽狀態，對於具備關聯選單的按鈕，可以用::menu-indicator來定製下拉選單標記。而:open和:closed偽狀態則分別用於定製選單開啟和關閉時按鈕的外觀。 |
| QRadioButton | 同上，::indicator用於定製文字前面的選項框，spacing指定文字與選項框之間的間距。 |
| QSlider | 對於水平的QSlider，min-width和height屬性必須同時提供；對於垂直的QSlider, 必須同時提供min-height和width屬性。QSlider由::groove和::handle兩部分組成。::groove子元件是一條槽，供::handle在上面滑動。 |
| QSplitter | 窗體分割器，主要的部件是::handle。通過::handle可以動態改變分割器中的不同子視窗大小。 |
| QTextEdit | 使用selection-color, selection-background-color屬性定製，其他的定製方式見QAbstractScrollArea。 |
| QToolButton | 如果QToolButton關聯了一個選單，那麼和QPushButton是相同的處理方式。如果被設定成了QToolButton::MenuButtonPopup模式，那麼::menu-button用於繪製選單按鈕，而::menu-arrow用於繪製按鈕中的箭頭號。注意：如果設定了QToolButton的背景色，那麼必須還要設定邊框的寬度才會起作用。這是因為QToolButton預設繪製的邊框會完全遮擋住使用者設定的背景色。 |
| QAbstractScrollArea | 所有派生自QAbstractScrollArea類的子類，包括QTextEdit, QAbstractItemView，都可以通過設定background-attachment屬性來實現可滾動背景。通過給background-attachment設定fixed和scroll，背景會固定不動或者跟隨滾動。 |
| QHeaderView | QHeaderView是Model/View框架中的一部分，最重要的子元件是::section，::section支援:middle, :first, :last, :only-one, :next-selected, :previous-selected, :selected, :checked等偽狀態。::up-arrow和::down-arrow用於定製表頭的排序標記。 |
| QListView(QListWidget) | show-decoration-selected屬性控制選中時是選中整項還是僅僅只是項的文字，其他和QTableView相同。 |
| QTableView(QTableWidget) | 當view支援斑馬色條時，alternate-background-color屬性指定備選色實現斑馬色帶，selection-color和selection-background-color屬性指定選定項的文字色和背景色。注意：保證同時設定了背景色和邊框寬度值。 |
| QTreeView(QTreeWidget) | show-decoration-selected屬性控制選中時是選中整項還是僅僅只是項的文字， 子元件::branch和::item用於精細化控制。 |
應用例項
下面看看如何用QSS對按鈕及其關聯選單進行外觀定製。我們首先用如下的程式碼初始化好按鈕及其關聯選單，並在Windows 7預設主題下看看其效果：
| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 | ui.serviceType->setFixedWidth(95);m_mainMenu = new QMenu(this);m_osSubMenu = new QMenu(this);m_appSubMenu = new QMenu(this);m_details = new QAction(QStringLiteral("Details"),this);m_details->setCheckable(true);m_details->setChecked(true);m_settings = new QAction(QStringLiteral("Settings"), this);m_settings->setIcon(QIcon(":/misc/preference"));m_settings->setShortcut(QKeySequence::Print);m_os = new QAction(QStringLiteral("OS"), this);m_app = new QAction(QStringLiteral("Applications"), this);m_github = new QAction(QStringLiteral("Github"), this);m_github->setIcon(QIcon(":/app/github"));m_github->setShortcut(QKeySequence("Ctrl+G"));m_amazon = new QAction(QStringLiteral("Amazon"), this);m_amazon->setIcon(QIcon(":/app/amazon"));m_photoshop = new QAction(QStringLiteral("Photoshop"), this);m_photoshop->setIcon(QIcon(":/app/photoshop"));m_facebook = new QAction(QStringLiteral(
|