Qt之QSS（Q_PROPERTY-自定义属性）

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

 

目录(?)[+]

 

简述

在Qt之QSS（Q_PROPERTY-原始属性）一节我们分享了Q_PROPERTY-原始属性的用法，但通常情况下我们需要很多自定义样式，例如：动态获取QSS样式，这时自定义属性就能很好的发挥其用武之地了。

• 简述
• 问题
• 解决方案
• 实例
  • 效果
  • 源码
  • QSS
  • 使用
• 更多参考

问题

在使用QAbstractItemModel、QAbstractItemDelegate更新表格样式的时候，比如：背景色、前景色等，我们通常的做法是定义一些颜色常量，然后根据不同的条件显示不同的颜色，要么就是通过QSS全局设置，让所有的背景色、前景色保持一致。

这有一个问题，局限性太强，无法动态获取颜色值，大大降低了程序的扩展性。

解决方案

QAbstractItemModel、QAbstractItemDelegate均继承自QObject，而QSS只能用于QWidget及其子孙类，那么，如何动态获取样式属性值呢？

三部曲：

• 创建一个从QWidget继承的专用类StyledWidget。
• 为StyledWidget添加自定义属性，并使用Q_PROPERTY声明
• 自定义QSS，使用自定义属性，语法：qproperty-<property name>

其中，Q_PROPERTY声明有以下要求：

• READ getFunction 
  用于读取属性，使用const限定，返回属性的类型或者类型的指针或引用。

• WRITE setFunction 
  用于设置属性，参数是一个属性的类型，或者属性的const指针或引用，返回

实例

效果

源码

创建一个从QWidget继承的专用类StyledWidget，为其添加自定义属性，并使用Q_PROPERTY声明：

StyledWidget.h

#ifndef STYLED_WIDGET
#define STYLED_WIDGET

#include <QWidget>

class StyledWidget : public QWidget
{
    Q_OBJECT
    Q_PROPERTY(QColor normalColor READ normalColor WRITE setNormalColor DESIGNABLE true)
    ...
public:
    explicit StyledWidget(QWidget *parent = 0);
    ~StyledWidget();

    QColor normalColor() const;
    void setNormalColor(QColor color);
    ...

private:
    QColor m_normalColor;
    ...
};

#endif // STYLED_WIDGET

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

StyledWidget.cpp

...
QColor StyledWidget::normalColor() const
{
    return m_normalColor;
}

void StyledWidget::setNormalColor(QColor color)
{
    m_normalColor = color;
}
...

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

QSS

QSS中使用自定义的属性设置对应的样式：

StyledWidget {
        qproperty-normalColor: white;
        qproperty-disableColor: gray;
        qproperty-highlightColor: rgb(0, 160, 230);
        qproperty-errorColor: red;
}

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

使用

在需要设置样式的类中声明StyledWidget：

class TableModel : public QAbstractTableModel
{
    Q_OBJECT

public:
    ...
    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const;
    ...
private:
    ...
    StyledWidget m_styledWidget;
};

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

使用自定义属性设置样式：

QVariant TableModel::data(const QModelIndex &index, int role) const
{
    if (!index.isValid())
        return QVariant();

    switch (role)
    {
    case Qt::TextColorRole:
    {
        if (index.column() == FILE_NAME_COLUMN)
            return m_styledWidget.normalColor();

        if (index.column() == SIZE_COLUMN)
            return m_styledWidget.highlightColor();

        if (index.column() == STATUS_COLUMN)
            return m_styledWidget.errorColor();
    }
    ...
    }
    return QVariant();
}