Qt 類型編輯執行個體-指定QPushButton 菜單指標的子控制

 

作者：丁林松,華清遠見嵌入式學院講師。

子控提供了訪問子子項目的功能， 例如通常的時候一個按鈕將會管理一個菜單，

QPushButton#evilButton::menu-indicator {
        image: url(myindicator.png);
        }

同時如果美化一個按鈕的話， 那麼將可以通過定位器來確定美化按鈕的路徑， 通常可以是一個圖片。

QPushButton::menu-indicator {
                image: url(myindicator.png);
                subcontrol-position: right center;
                subcontrol-origin: padding;
                left: -2px;
        }

經過以上的設定那麼QPushButton 將會在方格的中心顯示一個myindicator.png 的圖片。

複雜的選擇地區的例子：

當應對於一個使用者可可編輯可輸入的組件的時候， 將需要設計到使用者選擇地區的顏色設定， 與類型設定， 下面將通過使用QLineEdit 組件來進行示範：

QLineEdit { color: red }

QLineEdit{color:red}
QLineEdit[readOnly="true"]{color:gray}

在團隊開發的時候， 需要設計到不同顏色的設定， 或者說不同類型的設定， 那麼就需要在樣式編輯當中有多種選擇， 將不需要的那部分， 注釋掉：

QLineEdit { color: red }

QLineEdit[readOnly="true"] { color: gray }
#registrationDialog QLineEdit { color: brown }

自訂制定的組件

這個部分提供了一些自訂特殊組件的某種樣式

定製QAbstractScrollArea

比如說一些QAbstractScrollArea 類， 例如 QTextEdit 與QTextBrowser . 同時可以使用背景屬性來進行設定。 例如來設定一個 背景圖片。

QTextEdit, QListView {
                background-color: white;
                background-image: url(draft.png);
                background-attachment: scroll;
        }

下面的代碼是讓背景圖片與可瀏覽的地區大小相同：

QTextEdit, QListView {
                background-color: white;
                background-image: url(draft.png);
                background-attachment: fixed;
        }

給QCheckBox 做樣式

QCheckBox 與QRadioButton 具有想色的屬性， 他們之間的不同時QCheckBox是返回當前的狀態：

QCheckBox {
                spacing: 5px;
        }

QCheckBox::indicator {
                width: 13px;
                height: 13px;
        }

QCheckBox::indicator:unchecked {
                image: url(:/images/checkbox_unchecked.png);
        }

QCheckBox::indicator:unchecked:hover {
                image: url(:/images/checkbox_unchecked_hover.png);
        }

QCheckBox::indicator:unchecked:pressed {
                image: url(:/images/checkbox_unchecked_pressed.png);
        }

QCheckBox::indicator:checked {
                image: url(:/images/checkbox_checked.png);
        }

QCheckBox::indicator:checked:hover {
                image: url(:/images/checkbox_checked_hover.png);
        }

QCheckBox::indicator:checked:pressed {
                image: url(:/images/checkbox_checked_pressed.png);
        }

QCheckBox::indicator:indeterminate:hover {
                image: url(:/images/checkbox_indeterminate_hover.png);
        }

QCheckBox::indicator:indeterminate:pressed {
                image: url(:/images/checkbox_indeterminate_pressed.png);
        }