qt样式表笔记

一。语法

qt样式表（qss）的基本语法和css基本一样，熟悉css的使用的话其他样式表也差不多都会了。

1.qt样式表主要有选择器和声明2部分组成，基本语法如下：

使用时可直接调用类的成员函数setStyleSheep("......")，这时不需要指定选择器直接写声明，本身这个类就是选择器了;也可以使用main函数里的app.setStyleSheep()直接设置全局样式，这时就需要指定选择器了；

不需要选择器的写法

 

 

需要选择器的写法

2.一次指定多个选择器：

当多个选择器里的声明一样时（如边框，背景，颜色等），可以直接同时写多个选择器，用逗号（，）分隔：

等同于下图：

ps：感觉这个使用会很少；

3.指定多个属性：

当需要在声明中指定多个属性时需要使用分号（；）隔开：

4.对某个属性的多个值的规则：

当你需要对某个属性中的多个值赋值时可以：

上述位简写，等同于下图：

这是使用规则3的写法，把属性中的每个值都看做一个属性，使用分号隔开；

二。选择器

前面讲到样式表由选择器和声明组成，选择器确定声明描述的对象（某些写法不需要选择器）；qt提供了下列几种选择器：

ps：目前我常用的是类型选择器，类选择器和id选择器；

三。伪状态

每个部件都会有几种不同的状态，例如说按键有正常的状态，点击的状态（pressed），鼠标在上方的状态（hover），不可选中的状态等状态（disabled）；例子如下：

/*普通状态*/ QPushButton { /*字体为微软雅黑*/ font-family:Microsoft Yahei; /*字体大小为20点*/ font-size:20pt; /*字体颜色为白色*/ color:white; /*背景颜色*/ background-color:rgb(14 , 150 , 254); /*边框圆角半径为8像素*/ border-radius:8px; }

/*按钮停留态*/ QPushButton:hover { /*背景颜色*/ background-color:rgb(44 , 137 , 255); }

/*按钮按下态*/ QPushButton:pressed { /*背景颜色*/ background-color:rgb(14 , 135 , 228); /*左内边距为3像素，让按下时字向右移动3像素*/ padding-left:3px; /*上内边距为3像素，让按下时字向下移动3像素*/ padding-top:3px; }

伪状态都有其专用的标识符，使用冒号（：）连接在选择器上；每个伪状态要单独起一段（相当于每个伪状态是一个特殊的选择器）；

伪状态有很多，每个部件可能都有其独特的伪状态，下列是伪状态图：

ps：常用的伪状态为正常，禁用，悬浮，选中；

四。子部件

对于复杂的控件来说，都是由几个部件组成，例如下拉框这个部件由下拉按键，下拉框和行编辑器组成；每个子部件都能使用样式表来设置样式，在选择器后面使用双冒号（::）连接：

 

QComboBox {
    border: 1px solid gray;
    border-radius: 3px;
    padding: 1px 18px 1px 3px;
    min-width: 6em;
}

/*下拉按钮*/

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

下列是子部件的标识符：

五。属性

属性用于声明里控制各种样式，基本属性有边框（border），背景（background），字体（font），颜色（color，这里的颜色特指字体的颜色，也算是前景色），图标（icon）等；

属性实在是太多了，这里就不列举了。具体的属性需要上网 查询；

六：部分控件的主要样式设置：

按键类型

对话框，文本类型

窗口类型

滚动条类型

选项卡

视图/模型

其他部件

七。冲突规则

1.继承冲突

样式表可以在QApplication，父部件，子部件上设置，优先度由小到大，即优先自己的设置（注意，字体的属性不会被继承，需要独自设计或者使用

）；

2.当有多个选择器时优先于特殊的选择器（id选择器优先于类型选择器）

3.特殊性相同时，优先先写的（所以基本正常状态先写）

 

补充：

自定义的类需要支持qss时只需要加上哪个支持槽函数的宏

想要加命名空间的话

 

qt遵循css2规则

下列是一个综合例子：

效果图：

 代码：

/* Customize any plain widget that is a child of a QMainWindow. */
QMainWindow > .QWidget {
    background-color: gainsboro;
    background-image: url(:/images/pagefold.png);
    background-position: top right;
    background-repeat: no-repeat
}

/* Provide a padding for the layout inside the frame. The frame
   exists only to provide a padding for the top-right image, so we
   explicitly disable the border. */
#mainFrame {
    padding-right: 30px;
    border-style: none;
    border-image: none; /* since we set a border-image below */
}

/* mainFrame won't have this border-image since we have
   explicitly set it to 'none' using a more specific selector. */
QFrame, QLineEdit, QComboBox[editable="true"], QSpinBox {
    border-image: url(:/images/frame.png) 4;
    border-width: 3;
}

QLabel {
    border: none;
    border-image: none;
    padding: 0;
    background: none;
}

/* Make text in message boxes selectable. */
QMessageBox {
    /* LinksAccessibleByMouse | TextSelectableByMouse */
    messagebox-text-interaction-flags: 5;
}
   
/* Set the selection colors for all widgets. */
QWidget {
    selection-color: black;
    selection-background-color: Silver;
    color: black;
}

/* Make the entire row selected in item views. */
QAbstractItemView {
    show-decoration-selected: 1;
}

/* Nice WindowsXP-style password character for password line edits. */
QLineEdit[echoMode="2"] {
    lineedit-password-character: 9679;
}

/* Customize tooltips. */
QToolTip {
    background-color: rgb(200,200,255);
    border-color: darkslategray;
    border-width: 1px;
    border-style: solid;
    padding: 3px;
    font: bold;
    border-radius: 3px;
    opacity: 200;
}

/* Customize radio buttons. */

QRadioButton {
    spacing: 5px;
}

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

QRadioButton::indicator::unchecked {
    image: url(:/images/radiobutton_unchecked.png);
}

QRadioButton::indicator:unchecked:hover {
    image: url(:/images/radiobutton_unchecked_hover.png);
}

QRadioButton::indicator:unchecked:pressed {
    image: url(:/images/radiobutton_unchecked_pressed.png);
}

QRadioButton::indicator::checked {
    image: url(:/images/radiobutton_checked.png);
}

QRadioButton::indicator:checked:hover {
    image: url(:/images/radiobutton_checked_hover.png);
}

QRadioButton::indicator:checked:pressed {
    image: url(:/images/radiobutton_checked_pressed.png);
}

/* Customize arrows. */

*::down-arrow, *::menu-indicator {
    image: url(:/images/down_arrow.png);
    width: 7px;
    height: 7px;
}

*::down-arrow:disabled, *::down-arrow:off {
   image: url(:/images/down_arrow_disabled.png);
}

*::up-arrow {
    image: url(:/images/up_arrow.png);
    width: 7px;
    height: 7px;
}

*::up-arrow:disabled, *::up-arrow:off {
   image: url(:/images/up_arrow_disabled.png);
}

/* Customize push buttons and comboboxes. Our read-only combobox
   is very similar to a push button, so they share the same border image. */

QPushButton {
    min-width: 4em;
}

QPushButton, QComboBox[editable="false"],
QComboBox[editable="true"]::drop-down {
    border-image: url(:/images/pushbutton.png) 5;
    border-width: 5;
}

QPushButton:hover, QComboBox[editable="false"]:hover,
QComboBox[editable="true"]::drop-down:hover, QMenuBar::item:hover {
    border-image: url(:/images/pushbutton_hover.png) 5;
    border-width: 5;
}

QPushButton:pressed, QComboBox[editable="false"]:on,
QComboBox[editable="true"]::drop-down:on, QMenuBar::item:on {
    border-image: url(:/images/pushbutton_pressed.png) 5;
    border-width: 5;
}

/* Customize read-only comboboxes. */

QComboBox[editable="false"] {
    padding-left: 3px;
    padding-right: 20px; /* space for the arrow */
}

QComboBox[editable="false"]::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 15px;
    border-left-style: solid;
    border-left-color: darkgray;
    border-left-width: 1px;
}

QComboBox[editable="false"]::down-arrow {
    subcontrol-origin: content;
    subcontrol-position: center;
    position: relative;
    left: 1px; /* 1 pixel dropdown border */
}

/* The combobox arrow is on when the popup is open. */
QComboBox[editable="false"]::down-arrow:on {
    position: relative;
    top: 1px;
    left: 2px;
}

/* Customize editable comboboxes. */

QComboBox[editable="true"] {
    padding-right: 16px;
}

QComboBox[editable="true"]::drop-down {
    subcontrol-origin: border;
    subcontrol-position: top right;
    width: 13px;
    position: absolute;
    top: 2px;
    bottom: 2px;
    right: 2px;
}

QComboBox[editable="true"]::drop-down,
QComboBox[editable="true"]::drop-down:hover,
QComboBox[editable="true"]::drop-down:on {
    border-width: 0px;  
    border-left-width: 3px; /* we need only left and center part */
}

/* Shift the arrow when it's open. */
QComboBox[editable="true"]::down-arrow:on {
    position: relative;
    top: 1px;
    left: 1px;
}

/* Customize check boxes. */
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);
}

/* Customize the size grip. */
QSizeGrip {
    image: url(:/images/sizegrip.png);
    width: 16px;
    height: 16px;
}

/* Customize the menu bar. */
QMenuBar {
    border-image: none;
    border-style: none;
    border-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: darkslategray;
    padding: 2px;
}

/* Customize spin boxes. */

QSpinBox { 
    padding-right: 15px;
}

QSpinBox::up-button {
    subcontrol-origin: border;
    subcontrol-position: top right;

    width: 16px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */
    border-image: url(:/images/spinup.png) 1;
    border-width: 1px;
}

QSpinBox::up-button:hover {
    border-image: url(:/images/spinup_hover.png) 1;
}

QSpinBox::up-button:pressed {
    border-image: url(:/images/spinup_pressed.png) 1;
}

QSpinBox::down-button {
    subcontrol-origin: border;
    subcontrol-position: bottom right;

    width: 16px;
    border-image: url(:/images/spindown.png) 1;
    border-width: 1px;
    border-top-width: 0;
}

QSpinBox::down-button:hover {
    border-image: url(:/images/spindown_hover.png) 1;
}

QSpinBox::down-button:pressed {
    border-image: url(:/images/spindown_pressed.png) 1;
}