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

当切割完之后,长方形的四个角被固定;从而在拉伸的时候以这四个角进行拉伸;如图所示Qt Gui 第十九章

当只指定一个数值的时候,则表示上下左右都是那个数值,而不是只指top是那个数值;Qt Gui 第十九章

Qt Gui 第十九章

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

 

上一篇:微信小程序--关于加快小程序开发的几个小建议


下一篇:使用 Android Studio 开发工具创建一个 Android 应用程序,显示一行文字“Hello Android”,并将应用程序的名称更改为“FirstApp”。