QT样式表实例

六、QT样式表实例

1、样式表的使用

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

{

      image: url(myindicator.png);

 }

    默认，菜单指示器定位在衬底区域的右下角。通过改变subcontrol-position、subcontrol-origin属性可以定位指示器。

QPushButton::menu-indicator

{

      image: 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 }

 

2、定制特殊组件

本节提供使用样式表定制特定组件的实例。

（1）、定制QAbstractScrollArea

任何QAbstractScrollArea组件(项视图、QTextEdit、QTextBrowser)的背景都可以使用bakcground属性设置。例如，设置带有滚动条滚动的背景图属性如下：

QTextEdit, QListView 

{

      background-color: white;

      background-image: url(draft.png);

      background-attachment: scroll;

  }

如果设置background-image属性在视口中固定。

QTextEdit, QListView 

{

      background-color: white;

      background-image: url(draft.png);

      background-attachment: fixed;

  }

（2）、定制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);

  }

（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 {

      image: 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-image: url(images/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

{

    image: url(:/images/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 

{

    image: url(down_arrow.png);

}

 

QHeaderView::up-arrow 

{

    image: 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;

}