Qt之QSS（Q_PROPERTY-原始属性）

http://blog.csdn.net/liang19890820/article/details/51698536

 

版权声明：进步始于交流，收获源于分享！纯正开源之美，有趣、好玩、靠谱。。。作者：一去丶二三里 博客地址：http://blog.csdn.net/liang19890820

 

目录(?)[+]

 

简述

在Qt之QSS（样式表语法）一节讲过关于“设置对象属性”的用法，里面有一条很重要的原则是：任何可被识别的Q_PROPERTY都可以使用qproperty-语法设置。

这里需要对Qt属性系统有一定的了解，详见：Qt之属性系统。

• 简述
• 属性
• 实例
  • 效果
  • QSS
  • 源码
• 更多参考

属性

下面我们以QLabel为例，讲解如何在QSS中使用属性。

class Q_WIDGETS_EXPORT QLabel : public QFrame
{
    ...
    Q_PROPERTY(QPixmap pixmap READ pixmap WRITE setPixmap)
    Q_PROPERTY(bool scaledContents READ hasScaledContents WRITE setScaledContents)
    ...
};

• 1
• 2
• 3
• 4
• 5
• 6
• 7

可以看到，其中pixmap、scaledContents等属性均可使用，这样我们就可以通过QSS按照qproperty-<property name>语法的方式设置标签的图标和适应性了。

但是如果要设置标签的大小该怎么办呢？因为我们并没有发现与width、height、size相关的属性。难道真的束手无策？当然不是了，我们可以继续向上级联查找基类，这样，可以很容易的发现QWidget中有需要的属性：

class Q_WIDGETS_EXPORT QWidget : public QObject, public QPaintDevice
{
    ...
    Q_PROPERTY(QSize minimumSize READ minimumSize WRITE setMinimumSize)
    Q_PROPERTY(QSize maximumSize READ maximumSize WRITE setMaximumSize)
    ...
};

• 1
• 2
• 3
• 4
• 5
• 6
• 7

实例

通过以上的分析，我们可以很快的用QSS构建属于自己的样式了。

效果

QSS

下面，主要介绍qproperty-<property name>语法，其它样式可以忽略。

QLabel#customLabel {
        qproperty-minimumSize: 100px 100px;
        qproperty-maximumSize: 100px 100px;
        qproperty-pixmap: url(:/Images/logo);
        qproperty-scaledContents: true;
}

QPushButton#customButton {
        qproperty-text: "Click Me";
        qproperty-icon: url(:/Images/logo);
        qproperty-iconSize: 20px 20px;
}

QGroupBox#customGroupBox {
        qproperty-title: "GroupBox";
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

源码

我们不需要通过C++代码调用任何接口，仅仅通过上面的样式就可以实现自定义风格了。

QLabel *pLabel = new QLabel(this);
QPushButton *pButton = new QPushButton(this);
QGroupBox *pGroupBox = new QGroupBox(this);

pLabel->setObjectName("customLabel");
pButton->setObjectName("customButton");
pGroupBox->setObjectName("customGroupBox");

QVBoxLayout *pLayout = new QVBoxLayout();
pLayout->addStretch();
pLayout->addWidget(pLabel, 0, Qt::AlignCenter);
pLayout->addWidget(pButton);
pLayout->addStretch();
pLayout->setSpacing(10);
pLayout->setContentsMargins(10, 10, 10, 10);

pGroupBox->setLayout(pLayout);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

如果按照下面这种方式写，其结果是相同的：

...
pLabel->setPixmap(QPixmap(":/Images/logo"));
pLabel->setMinimumSize(100, 100);
pLabel->setMaximumSize(100, 100);
pLabel->setScaledContents(true);

pButton->setIcon(QIcon(":/Images/logo"));
pButton->setIconSize(QSize(20, 20));
pButton->setText("Click Me");

pGroupBox->setTitle("GroupBox");
...

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

到这里，是不是越觉得QSS有意