QT开发（六十八）——QSS应用 动态属性

QT开发（六十八）——QSS应用 动态属性

本博文转载自一去丶二三里的博客：http://blog.csdn.net/liang19890820

一、语法高亮设置
Qt Creator中默认情况下打开qss文件（*.qss）不会高亮显示，需要手动配置，让其更符合阅读习惯，以更炫丽的方式展示代码片段。

配置流程如下：

A、进入：工具 -> 选项 -> 环境 -> MIME 类型。

B、在【已注册的MIME类型】处输入“text/css”可以快速定位，然后在【详情】中的“模式”处添加 *.qss，即将原来的“模式”改为：*.css;*.CSSL;*.qss。

注意：中间用分号（;）分隔

效果如下：

二、动态属性
1、自定义属性
为了用户界面外观的动态变化，属性选择器可以与动态属性组合使用。动态属性在QT4.2中引入，允许为编译时不存在的QObject属性分配属性值。即：如果为QObject设置一个urgent属性为true，该属性将跟随该类，但不会为urgent属性包含一个Q_PROPERTY宏。

创建样式选择器依赖于动态属性，例如：urgent，可以用一个非常动态的方式凸显用户界面。例如：

QLineEdit[urgent=true] {

color: red;

}

使用这种方式有局限性。最主要的是当一个属性值变化时，所引用的样式不会自动更新。相反地，必须手动触发更新才会生效。

unpolish()用于清理之前的样式，而polish()则用于添加新的样式。

lineEdit->setProperty(“urgent”, true);

lineEdit->style()->unpolish(lineEdit);

lineEdit->style()->polish(lineEdit);

必须在组件的样式中使用，QStyle::polish既接受QWidge也接受QApplication作为参数。

2、实例
自定义标题栏中的最大化/还原按钮为例，进行切换。

void TitleBar::updateMaximize()
{
    QWidget *pWindow = this->window();
    if (pWindow->isTopLevel())
    {
        bool bMaximize = pWindow->isMaximized();
        m_pMaximizeButton->setToolTip(bMaximize ? tr("Restore") : tr("Maximize"));
        m_pMaximizeButton->setProperty("maximizeProperty", bMaximize ? "restore" : "maximize");
 
        // 手动更新样式
        m_pMaximizeButton->style()->unpolish(m_pMaximizeButton);
        m_pMaximizeButton->style()->polish(m_pMaximizeButton);
        m_pMaximizeButton->update();
        //m_pMaximizeButton->setStyle(QApplication::style());
    }
}

QSS：

QPushButton#maximizeButton[maximizeProperty="maximize"] {
        border-radius: none;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        background: rgb(50, 50, 50);
        p_w_picpath: url(:/Images/maximize);
}
QPushButton#maximizeButton[maximizeProperty="maximize"]:hover {
        background: rgb(60, 60, 60);
        p_w_picpath: url(:/Images/maximizeHover);
}
QPushButton#maximizeButton[maximizeProperty="maximize"]:pressed {
        background: rgb(55, 55, 55);
        p_w_picpath: url(:/Images/maximizePressed);
}
QPushButton#maximizeButton[maximizeProperty="restore"] {
        border-radius: none;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        background: rgb(50, 50, 50);
        p_w_picpath: url(:/Images/restore);
}
QPushButton#maximizeButton[maximizeProperty="restore"]:hover {
        background: rgb(60, 60, 60);
        p_w_picpath: url(:/Images/restoreHover);
}
QPushButton#maximizeButton[maximizeProperty="restore"]:pressed {
        background: rgb(55, 55, 55);
        p_w_picpath: url(:/Images/restorePressed);

三、原始属性
任何可被识别的Q_PROPERTY都可以使用qproperty-语法设置。

Q_PROPERTY定义的属性通过QSS按照qproperty-<property name>语法的方式设置。

QLabel的属性如下：

class Q_WIDGETS_EXPORT QLabel : public QFrame
{
…
Q_PROPERTY(QPixmap pixmap READ pixmap WRITE setPixmap)
Q_PROPERTY(bool scaledContents READ hasScaledContents WRITE setScaledContents)
…
};
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)
…
};

QLabel的属性有minimumSize、maximumSize、pixmap、scaledContents。

QSS文件：