qt样式表学习

目录：

1. 何为Qt样式表
2. 样式表语法基础
3. 方箱模型
4. 前景与背景
5. 创建可缩放样式
6. 控制大小
7. 处理伪状态
8. 使用子部件定义微观样式
    8.1. 相对定位
    8.2. 绝对定位

1.何为Qt样式表

Qt样式表的思想很大程度上是来自HTML的层叠式样式表（CSS）,通过调用QWidget::setStyleSheet()或者QApplication::setStyleSheet()，你可以为一个独立的子部件.整个窗口.甚至是整个应用指定一个样式表。

样式表是通过QStyle的一个叫QStyleSheet的特殊子类来实现的。这个特殊的子类实际上是其他的系统特定风格类的包裹类，它会通过样式表指定的自定义外观风格应用在底层的系统特定风格之上。

Qt 4.2包含了一个叫做StyleSheet的例子来帮助你来学习样式表，这个例子自带了二个样式：Coffee和Pagefold。

Coffee风格自定义了push button.frames.tooltip，但使用了下层的风格来绘制的。Pagefold风格完全重新定义了对话框使用的所有控件的外观，从而实现了一种独特的，平台无关的外观。

2.样式表语法基础

Qt样式表与CSS的语法规则机会完全相同，如果你已经了解了CSS,完全可以跳过本节。

一个样式表有一系列的样式规则构成。每个样式表规则如下面的形式：

selector { attribute: value }

选择器（selector）部分通常是一个类名（如QPushButton）,当然也还有其他的语法形式。

属性（attribute）部分是一个样式表属性的名字，值（value）部分是赋给该属性的值。

为了简化方便，我们还可以使用一种简化形式：

selector1,selector2...selectorM｛

         attribute1:value1;

         attribute2:value2;

         ...

        attributeM:valuem;

｝

这种简化形式可以同时为与M个选择器匹配的部件设置N中属性。例如：

QCheckBox, QComboBox，QSpinBox {

          color: red;

          background-color: white;

          font: bold;

}

这种规则设置了所有的QCheckBox,QComboBox，QSpinBox的前景色，背景色和字体。在线文档列出了每种部件支持的所有属性，我们只使用最常见的几种通用属性。

3.方箱模型

在样式表中，每个部件都被看作是一个由四个相似的矩形组成的箱体；空白（margin）,边框(border)，填充(padding)和内容（context）。对于一个平面部件---例如一个空白，边框和填充都是0像素的部件而言，这四个矩形完全重合的。

空白区域位于边框外，并且总是透明的。边框为部件提供了四周的框架，其border-style属性可以设置为一些内置的框架风格，如inset,outset,solid和ridge。填充在边框和内容区域之间提供了空白间隔。

4.前景和背景

部件的前景色用于绘制上面的文本，可以通过color属性指定。背景色用于绘制部件的填充矩形，可以通过background-color和background-repeat属性指定。

如果指定的背景色具有alpha通道（即半透明效果），通过background-color指定的颜色将会透过透明区域。这一功能可以使背景图片在多种环境下重复利用。

该例子中使用的样式表如下所示：

         QFrame｛

                      margin:10px;

                      border：2px solid green;

                      pading:20px;

                      background-color:gray;

                      background-image:url(qt.png);

                      background-position:top right;

                      background-origin:context;

                      background-repeat:none; 

              ｝

在这个例子中，QFrame四周的空白，边框和填充值都是一样的。实际上margin属性可以在上下左右四个方向分别指定我们需要的不同值，例如：

            QFrame{

                    margin:14px,18px,20px,18px;

            }

同时，我们也可以分别指定margin-top,margin-right,margin-buttom,margin-left四个属性。

               QFrame{

                  margin-top:14px;

                  margin-right:18px;

                  margin-bottom:20px;

                  margin-left:18px;

         }

虽然目前我们仅仅使用了QFrame作为例子，但是我们也可以同样的将这些属性应用到任何一个支持方箱模型的Qt部件，例如：QCheckBox,QLabel,QLineEdit,QListView,QMenu,QPushButton,QTextEdit和QToolTip.

5.创建可缩放样式

在默认情况下，通过background-image指定的背景图片会自动重复平铺，已覆盖部件的整个填充矩形（即边框里面的那个区域）。如果我们想创建能够随着部件大小自动缩放"而不是平铺的背景，我们需要设置一种称之为"边框图片"的东东。"边框图片"可以通过border-image属性指定，它同时提供了部件的背景和边框。一个"边框图片"被分为九个部分（九宫格），有点向tic-tac-toe游戏的棋盘。

当；一个部件的边框被填充时，四角的格子通常不会发生变化，而其余的五个格子则可能被拉伸或平铺以填充可用空间。

6.控制大小

min-width和min-height两个属性可以用来指定一个部件的内容区域的最小大小。这两个值将影响部件的minimumSizeHint(),并在布局时被考虑。例如：

QPushButton{

            min-width:43px;

            min-height:23px;

}

如果该属性没有被指定，最小大小将从部件的内容区域和当前样式表中继承。

7.处理伪状态

部件的外观可以按照用户界面元素状态的不同来分别定义，这在样式表中被称为“伪状态”。例如，如果我们想在一个pushbutton在被按下的时候具有sunken的外观，我们可以指定一个叫做：pressed的伪状态。

QPushButton ｛

           border:2px outset green;

           background:gray;

｝

QPushButton:pressed {

          border-style:inset;

}

伪状态列表：

伪状态                       描述

：checked               部件被选中

：disabled              部件被禁用

：enabled               部件被启用

：focus                    部件获得焦点

：hover                    鼠标位于部件上

：indeterminate    checkbox或radiobutton被部分选中

：off                         部件可以切换且处于off状态

：on                        部件可以切换且处于on状态

：pressed             部件被鼠标按下

：unchecked        部件未被选中

8.使用子部件定义微观样式

许多部件都包含有子元素，这些元素可以称为'子部件"。Spinbox的上下箭头就是子部件最好的例子。

子部件可以通过：：来指定，例如QDateTimeEdit：：up-button。定义子部件的样式表与定义部件非常相似，他们遵循前面提到的方箱模型（即它们可以拥有自己的边框，背景等），并且也可以和伪状态联合使用(例如QSpinBox::up-button:hover)。

子部件列表

子部件                              描述

：：down-arrow            combobox或spinbox的下拉箭头

：：down-button           spinbox的向下箭头

：：drop-down              combobox的下拉箭头

：：indicator                  chenkbox，radio button或可选择group box的指示器

：：item                          menu,menu bar或status bar的子项目

：：menu-indicator      pushbutton的菜单指示器

：：title                           groupbox的标题

：：up-arrow                 spinbox的向上箭头

：：up-button                spinbox的向上按钮

通过指定subcontrol-position和subcontrol-origin属性，子部件可以被放置在部件箱体内的任何地方。并且子部件的位置还可以使用相对或绝对的方式来进一步调整。具体选择何种调整方式取决于子部件具有固定的大小，还是会随着父部件而变化。

8.1. 相对定位
相对定位适合于子部件具有固定大小的情形（通过width和height指定子部件大小）。使用这种方式，子部件可以以相对于subcontrol- position和 subcontrol-origin属性定义的原始位置进行移动调整。使用left属性可以把子部件向右移，top属性可以把子部件向左移。

例如：
QPushButton::menu-indicator {
    image: url(menu_indicator.png);
    width: 13px;
    height: 13px;
    subcontrol-origin: padding;
    subcontrol-position: bottom right;
}

 
当按下按钮时，我们可以把菜单指示器从原来的位置向右下方移动几个像素来模拟按钮按下的状态。
QPushButton::menu-indicator:pressed {
    position: relative;
    top: 2px;
    left: 2px;
}

8.2. 绝对定位
绝对定位适合于子部件的位置随父部件的变化而变的情形。与前面的例子相同，subcontrol-origin定义了父部件箱体的参考矩形。子部件的矩形区域则可以随后通过相对于这个参考矩形四边的偏移量来定义。
QPushButton::menu-indicator {
    border: 2px solid red;
    subcontrol-origin: padding;
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 40px;
}

对于宽度或高度固定的子部件，subcontrol-position被用来说明其在subcontrol-origin指定矩形内的对其方式：
QPushButton::menu-indicator {
    image: url(menu_indicator.png);
    width: 13px;

    subcontrol-origin: padding;
    subcontrol-position: bottom right;
    position: absolute;
    top: 2px;
    bottom: 2px;
    right: 2px;
}