Qt Gui 第十九章

1、Qt样式表

.qss文件；跟html的css文件格式差不多。

例如：selector1, selector2。。。 {property1: value1; property2: value2; 。。。。} 表示多个选择器，对应多个属性值；

也可以在代码中直接编写；例如：

// 指向全局的设置QLineEdit的背景色为黄色；
qApp->setStyleSheet("QLineEdit{background-color:yellow;}");
// 要使用的dialog设置QLineEdit的背景色为黄色；
CandyDialog w;
w.setStyleSheet("QLineEdit{background-color:yellow;}");

当要使用文件导入的时候

    CandyDialog w;
    QFile file(":/qss/candy.qss");
    file.open(QIODevice::ReadOnly);
    w.setStyleSheet(file.readAll());

因为candy.qss是资源文件，则需要在qrc文件中指明；

<RCC>
<qresource>
<file>qss/candy.qss</file>
</qresource>
</RCC>

qss的编写

1、颜色

可以使用rgb()、rgba()、 #RRGGBB；也可以使用调色板：palette(Base) ；渐进的调色：QLinearGradient、QRadialGradient、QConicalGradient；例如：

    background-color:qlineargradient(x1:0,y1:0,x2:1,y2:1,
                                   stop:0 white,stop:0.4 gray,
                                   stop:1 green);

2、图片

image: url(:/images/down-arrow.png); 或者 border-image: url(:/images/button.png) 4 8 12 16; 模型即：url(image.png) top right bottom left; 即上面的横切线、右边的竖切线，下面的横切线，左边的竖切线；如果没有指定竖直，则表明边界均为0；即0 0 0 0

当切割完之后，长方形的四个角被固定；从而在拉伸的时候以这四个角进行拉伸；如图所示

当只指定一个数值的时候，则表示上下左右都是那个数值，而不是只指top是那个数值；

3、padding

padding是指文字要放的位子偏移；模型是：padding: top right bottom left; 如果要单独指定的话，则是padding-top 或者其他的方位；如上图所示；如果要将contents rectangle的区域覆盖到border rectangle 则需要将padding的值设置为负数；

即移动contents rectangle通过padding来完成；

4、indicator的使用；例如

QLineEdit,
QListView {
    color: rgb(127,0,63);
    background-color: rgb(255,255,241);
}

如上qss所示，有两个indicator（QLineEdit和QListView）共同使用花括号里面的属性值；

indicator也可以是：control:subcontrol的方式如：QComboBox:editable、QCheckBox:checked:hover、QCheckBox:!checked:hover 也可以是如上所示的逻辑非

5、杂项

当使用圆角的时候，可以使用

border-radius: 10px; 表示半径为10像素的圆作为圆角

border: 2px groove gray; 表示两像素的灰色凹槽

font: bold 10pt; 使用10号加粗的字体

QComboBox * {font: 9pt;} 表示QComboBox的子项用的字号是9

二、子类化QStyle

当使用到custom style的时候，则需要在使用到这个子类化控件之前，先设置进qapplication；例如：要将BronzeStyle这个子类化的控件加到程序中，则需要在用到这个控件之前先操作：QApplication::setStyle(new BronzeStyle);

猜你喜欢