QT開發（六十四）——QT樣式表（三）

6、QT樣式表實例

一、樣式表的使用

A、定製前景色和背景色

    設置應用程序中的全部QLineEdit組件的背景色爲×××

    qApp->setStyleSheet("QLineEdit { background-color: yellow }");

    若是隻想要屬性用於具體某個對話框的QLineEdit及子類組件。

    myDialog->setStyleSheet("QLineEdit { background-color: yellow }");

    若是隻想將屬性用於某個具體的QLineEdit組件，能夠使用QObject::setObjectName() 和ID選擇器。

    myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");

    能夠直接設置QLieEdit組件的background-color屬性，忽略選擇器

    nameEdit->setStyleSheet("background-color: yellow");

    爲了確保對比效果，應該指定文本合適的顏色

    nameEdit->setStyleSheet("color: blue; background-color: yellow");

    修改選中文本的顏色以下：

    nameEdit->setStyleSheet("color: blue;"

                          "background-color: yellow;"

                          "selection-color: yellow;"

                          "selection-background-color: blue;");

B、使用動態屬性定製樣式

爲了提示用戶字段是必填的，對這些字段使用×××做爲背景色。要使用QT樣式表是現實很容易的。首先，應該使用應用程序的樣式表：

*[mandatoryField="true"] { background-color: yellow }

這意味着mandatoryField字段設置爲true的組件的背景色爲×××。

對於每一個必備字段組件，咱們匆忙中簡單建立了一個mandatoryField屬性並設置爲true。

    QLineEdit *nameEdit = new QLineEdit(this);

    nameEdit->setProperty("mandatoryField", true);

 

    QLineEdit *emailEdit = new QLineEdit(this);

    emailEdit->setProperty("mandatoryField", true);

 

   QSpinBox *ageSpinBox = new QSpinBox(this);

   ageSpinBox->setProperty("mandatoryField", true);

C、使用盒子模型定製QPushButton

本節咱們展現如何建立一個紅色的按鈕。

QPushButton#evilButton

{

      background-color: red;

      border-style: outset;

      border-width: 2px;

      border-radius: 10px;

      border-color: beige;

      font: bold 14px;

      min-width: 10em;

      padding: 6px;

  }

  QPushButton#evilButton:pressed

{

      background-color: rgb(224, 0, 0);

      border-style: inset;

  }

D、定製按鈕菜單指示器子控件

    子控件能夠訪問組件的子元素。例如，按鈕會使用QPushButton::setMenu()關聯菜單與菜單指示器。定製紅色按鈕的菜單指示器以下：

QPushButton#evilButton::menu-indicator

{

      p_w_picpath: url(myindicator.png);

 }

    默認，菜單指示器定位在襯底區域的右下角。經過改變subcontrol-position、subcontrol-origin屬性能夠定位指示器。

QPushButton::menu-indicator

{

      p_w_picpath: url(myindicator.png);

      subcontrol-position: right center;

      subcontrol-origin: padding;

      left: -2px;

  }

    Myindicator.png的位置在按鈕襯底區域的右中心。

E、複雜選擇器示例

    設置應用程序樣式表中QLineEdit文本爲紅色。

    QLineEdit { color: red }

    然而，想要設置一個只讀QLineEdit的文本顏色爲灰色以下：

    QLineEdit { color: red }

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

    某些狀況下，若是要求註冊表單中的全部QLineEdit爲棕色。

    QLineEdit { color: red }

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

     #registrationDialog QLineEdit { color: brown }

    若是要求全部對話框中的QLineEdit爲棕色。

    QLineEdit { color: red }

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

    QDialog QLineEdit { color: brown }

 

二、定製特殊組件

本節提供使用樣式表定製特定組件的實例。

（1）、定製QAbstractScrollArea

任何QAbstractScrollArea組件(項視圖、QTextEdit、QTextBrowser)的背景均可以使用bakcground屬性設置。例如，設置帶有滾動條滾動的背景圖屬性以下：

QTextEdit, QListView 

{

      background-color: white;

      background-p_w_picpath: url(draft.png);

      background-p_w_upload: scroll;

  }

若是設置background-p_w_picpath屬性在視口中固定。

QTextEdit, QListView 

{

      background-color: white;

      background-p_w_picpath: url(draft.png);

      background-p_w_upload: fixed;

  }

（2）、定製QCheckBox

進行QCheckBox樣式設置與QRadioButton樣式設置相同。主要區別在於三態的QCheckBox有一個模糊態。

QCheckBox 

{

      spacing: 5px;

  }

 

  QCheckBox::indicator

{

      width: 13px;

      height: 13px;

  }

 

  QCheckBox::indicator:unchecked

{

      p_w_picpath: url(:/p_w_picpaths/checkbox_unchecked.png);

  }

 

  QCheckBox::indicator:unchecked:hover

{

      p_w_picpath: url(:/p_w_picpaths/checkbox_unchecked_hover.png);

  }

 

  QCheckBox::indicator:unchecked:pressed

{

      p_w_picpath: url(:/p_w_picpaths/checkbox_unchecked_pressed.png);

  }

 

  QCheckBox::indicator:checked

{

      p_w_picpath: url(:/p_w_picpaths/checkbox_checked.png);

  }

 

  QCheckBox::indicator:checked:hover

{

      p_w_picpath: url(:/p_w_picpaths/checkbox_checked_hover.png);

  }

 

  QCheckBox::indicator:checked:pressed

{

      p_w_picpath: url(:/p_w_picpaths/checkbox_checked_pressed.png);

  }

 

  QCheckBox::indicator:indeterminate:hover

{

      p_w_picpath: url(:/p_w_picpaths/checkbox_indeterminate_hover.png);

  }

 

  QCheckBox::indicator:indeterminate:pressed {

      p_w_picpath: url(:/p_w_picpaths/checkbox_indeterminate_pressed.png);

  }

（3）、定製組合框QComboBox

QComboBox {

      border: 1px solid gray;

      border-radius: 3px;

      padding: 1px 18px 1px 3px;

      min-width: 6em;

  }

 

  QComboBox:editable {

      background: white;

  }

 

  QComboBox:!editable, QComboBox::drop-down:editable {

       background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                   stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,

                                   stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);

  }

 

  /* QComboBox gets the "on" state when the popup is open */

  QComboBox:!editable:on, QComboBox::drop-down:editable:on {

      background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                  stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,

                                  stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);

  }

 

  QComboBox:on { /* shift the text when the popup opens */

      padding-top: 3px;

      padding-left: 4px;

  }

 

  QComboBox::drop-down {

      subcontrol-origin: padding;

      subcontrol-position: top right;

      width: 15px;

 

      border-left-width: 1px;

      border-left-color: darkgray;

      border-left-style: solid; /* just a single line */

      border-top-right-radius: 3px; /* same radius as the QComboBox */

      border-bottom-right-radius: 3px;

  }

 

  QComboBox::down-arrow {

      p_w_picpath: url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png);

  }

 

  QComboBox::down-arrow:on { /* shift the arrow when popup is open */

      top: 1px;

      left: 1px;

  }

    組合框的彈出菜單是QAbstractItemView，使用後代選擇器進行樣式設置。

  QComboBox QAbstractItemView {

      border: 2px solid darkgray;

      selection-background-color: lightgray;

  }

（4）、定製QDockWidget

QDockWidget的標題欄和按鈕能夠按以下進行樣式設置。

QDockWidget

{

    border: 1px solid lightgray;

    titlebar-close-icon: url(close.png);

    titlebar-normal-icon: url(undock.png);

}

 

QDockWidget::title

{

    text-align: left; /* align the text to the left */

    background: lightgray;

    padding-left: 5px;

}

 

QDockWidget::close-button, QDockWidget::float-button

{

    border: 1px solid transparent;

    background: darkgray;

    padding: 0px;

}

 

QDockWidget::close-button:hover, QDockWidget::float-button:hover

{

    background: gray;

}

 

QDockWidget::close-button:pressed, QDockWidget::float-button:pressed

{

    padding: 1px -1px -1px 1px;

}

若是要移動停靠組件按鈕到左側，能夠使用以下樣式表設置：

QDockWidget 

{

      border: 1px solid lightgray;

      titlebar-close-icon: url(close.png);

      titlebar-normal-icon: url(float.png);

 }

 

  QDockWidget::title 

  {

      text-align: left;

      background: lightgray;

      padding-left: 35px;

  }

 

  QDockWidget::close-button, QDockWidget::float-button 

  {

      background: darkgray;

      padding: 0px;

      icon-size: 14px; /* maximum icon size */

  }

 

  QDockWidget::close-button:hover, QDockWidget::float-button:hover 

  {

      background: gray;

  }

 

  QDockWidget::close-button:pressed, QDockWidget::float-button:pressed 

  {

      padding: 1px -1px -1px 1px;

  }

 

  QDockWidget::close-button 

  {

      subcontrol-position: top left;

      subcontrol-origin: margin;

      position: absolute;

      top: 0px; left: 0px; bottom: 0px;

      width: 14px;

  }

 

  QDockWidget::float-button 

  {

      subcontrol-position: top left;

      subcontrol-origin: margin;

      position: absolute;

      top: 0px; left: 16px; bottom: 0px;

      width: 14px;

  }

（5）、定製QFrame

QFrame, QLabel, QToolTip 

{

      border: 2px solid green;

      border-radius: 4px;

      padding: 2px;

      background-p_w_picpath: url(p_w_picpaths/welcome.png);

}

（6）、定製QGroupBox

QGroupBox

{

    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                      stop: 0 #E0E0E0, stop: 1 #FFFFFF);

    border: 2px solid gray;

    border-radius: 5px;

    margin-top: 1ex; /* leave space at the top for the title */

}

QGroupBox::title

{

    subcontrol-origin: margin;

    subcontrol-position: top center; /* position at the top center */

    padding: 0 3px;

    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                      stop: 0 #FF0ECE, stop: 1 #FFFFFF);

}

QGroupBox::indicator

{

    width: 13px;

    height: 13px;

}

 

QGroupBox::indicator:unchecked

{

    p_w_picpath: url(:/p_w_picpaths/checkbox_unchecked.png);

}

（7）、定製QHeaderView

QHeaderView::section 

{

    background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,

                                      stop:0 #616161, stop: 0.5 #505050,

                                      stop: 0.6 #434343, stop:1 #656565);

color: white;

    padding-left: 4px;

border: 1px solid #6c6c6c;

}

 

QHeaderView::section:checked

{

    background-color: red;

}

 

QHeaderView::down-arrow 

{

    p_w_picpath: url(down_arrow.png);

}

 

QHeaderView::up-arrow 

{

    p_w_picpath: url(up_arrow.png);

}

（8）、定製QLineEdit

QLineEdit的框架使用盒子模型進行樣式設置。

QLineEdit 

{

    border: 2px solid gray;

    border-radius: 10px;

    padding: 0 8px;

    background: yellow;

    selection-background-color: darkgray;

}

QLineEdit的密碼字符使用QLineEdit::Password顯示模式設置。

QLineEdit[echoMode="2"] 

{

    lineedit-password-character: 9679;

}

只讀QLineEdit的背景能夠以下修改：

QLineEdit:read-only 

{

    background: lightblue;

}