QSS自定义属性

最新推荐文章于 2025-10-13 15:08:48 发布
原创 最新推荐文章于 2025-10-13 15:08:48 发布 · 3.4k 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#QSS

本文详细介绍了如何使用Qt的QSS样式表通过qproperty语法设置QWidget派生类的各种属性，包括基本类型、枚举类型及复杂类型如QBrush的渐变色。并提供了源码解析过程，帮助理解QSS与属性的交互机制。

1.基本使用

（参见 Qt 文档页章节 Setting QObject Properties：https://doc.qt.io/qt-5/stylesheet-syntax.html）

从 Qt 4.3 及更高版本开始，可以使用 qproperty- <属性名称> 语法设置任何 designable 的 Q_PROPERTY ，QWidget 派生类支持该语法，仅继承 QObject 不会生效。使用该机制可以很方便的扩展我们的程序。

如我们给自己的窗口加上属性：

class MainWindow : public QMainWindow
{
    Q_OBJECT
    Q_PROPERTY(int id READ getId WRITE setId)
    Q_PROPERTY(QString name READ getName WRITE setName)
    //... ...
}

就可以在 QSS 样式表中这样赋值：

（QString 类型的貌似不能空格分隔，而且不能和颜色值之类的冲突）

MainWindow{
qproperty-id:10;
qproperty-name:gongjianbo-1992;
}

如果我们在属性的 set 函数中打印的话，是可以看到对应输出的：

一些常用的类型对应的 QSS 写法：

/* QIcon QImage 等 */
MyLabel { qproperty-pixmap: url(pixmap.png); }

/* QColor */
MyGroupBox { qproperty-titleColor: rgb(100, 200, 100); }

MyPushButton {  
/* QSize */
qproperty-iconSize: 20px 20px;

/* QRect */
qproperty-myrect:rect(10 20 100 50);   

/* QBrush 之渐变色 */
qproperty-mycolor:qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(0, 0, 0, 255), stop:1 rgba(255, 255, 255, 255));
}

2.注意事项

如果该属性引用用 Q_ENUMS 声明的枚举，则应按名称（而不是其数值）引用其常量。

请谨慎使用 qproperty 语法，因为它会修改正在绘制的小部件。

qproperty 语法仅计算一次，即用样式修饰小部件时。这意味着在伪状态（例如 QPushButton:hover）中使用它们的任何尝试都将无效。但是我们可以给非伪状态重新设置属性值。

如果使用 QString 类型，不要和 QColor 之类的属性值冲突，并且中间不要有分隔。

对于渐变色，可以用 QBrush 类接收。

（2020-6-6补充）正数赋值直接写数字就行，负数测试发现需要加字符串引号。

3.样式表与枚举

（2020-6-6补充）对于自定义属性的枚举值，赋值操作使用字符串：

class MyLabel : public QLabel
{
    Q_OBJECT
    Q_ENUMS(MyColor)
    Q_PROPERTY(MyColor color READ getColor WRITE setColor)
public:
    enum MyColor{
        Green=1,
        Yellow=2,
        Red=3
    };
    //... ...
}
/*类选择器*/
.MyLabel{
/*这里有作用域是因为我枚举是声明在MyLabel类里的*/
qproperty-color:"MyLabel::Red";
}

 对于属性选择器中的枚举值，赋值使用枚举对应常量的字符串：

.MyLabel[color="1"]{
background:green;
}
.MyLabel[color="2"]{
background:yellow;
}
.MyLabel[color="3"]{
background:red;
}

经测试 Q_ENUMS 和 Q_ENUM 注册的枚举是一样的写法，虽然 QDebug 打印的时候前者是常量后者是枚举字符串。（Q_ENUMS 和 Q_ENUM 可以参见文档，以及相关资料：https://woboq.com/blog/q_enum.html） 

4.相关源码片段

属性解析相关

//E:\Qt\qt-everywhere-src-5.15.0\qtbase\src\widgets\styles\qstylesheetstyle.cpp

（可以看到一些支持的基本类型）

void QStyleSheetStyle::setProperties(QWidget *w)
{
    // The final occurrence of each property is authoritative.
    // Set value for each property in the order of property final occurrence
    // since properties interact.

    const QVector<Declaration> decls = declarations(styleRules(w), QString());
    QVector<int> finals; // indices in reverse order of each property's final occurrence

    {
        // scan decls for final occurrence of each "qproperty"
        QSet<const QString> propertySet;
        for (int i = decls.count() - 1; i >= 0; --i) {
            const QString property = decls.at(i).d->property;
            if (!property.startsWith(QLatin1String("qproperty-"), Qt::CaseInsensitive))
                continue;
            if (!propertySet.contains(property)) {
                propertySet.insert(property);
                finals.append(i);
            }
        }
    }

    for (int i = finals.count() - 1; i >= 0; --i) {
        const Declaration &decl = decls.at(finals[i]);
        QString property = decl.d->property;
        property.remove(0, 10); // strip "qproperty-"

        const QMetaObject *metaObject = w->metaObject();
        int index = metaObject->indexOfProperty(property.toLatin1());
        if (Q_UNLIKELY(index == -1)) {
            qWarning() << w << " does not have a property named " << property;
            continue;
        }
        const QMetaProperty metaProperty = metaObject->property(index);
        if (Q_UNLIKELY(!metaProperty.isWritable() || !metaProperty.isDesignable())) {
            qWarning() << w << " cannot design property named " << property;
            continue;
        }

        QVariant v;
        const QVariant value = w->property(property.toLatin1());
        switch (value.userType()) {
        case QMetaType::QIcon: v = decl.iconValue(); break;
        case QMetaType::QImage: v = QImage(decl.uriValue()); break;
        case QMetaType::QPixmap: v = QPixmap(decl.uriValue()); break;
        case QMetaType::QRect: v = decl.rectValue(); break;
        case QMetaType::QSize: v = decl.sizeValue(); break;
        case QMetaType::QColor: v = decl.colorValue(); break;
        case QMetaType::QBrush: v = decl.brushValue(); break;
#ifndef QT_NO_SHORTCUT
        case QMetaType::QKeySequence: v = QKeySequence(decl.d->values.at(0).variant.toString()); break;
#endif
        default: v = decl.d->values.at(0).variant; break;
        }

        w->setProperty(property.toLatin1(), v);
    }
}

渐变色解析

//E:\Qt\qt-everywhere-src-5.15.0\qtbase\src\gui\text\qcssparser.cpp

static BrushData parseBrushValue(const QCss::Value &v, const QPalette &pal)
{
    ColorData c = parseColorValue(v);
    if (c.type == ColorData::Color) {
        return QBrush(c.color);
    } else if (c.type == ColorData::Role) {
        return c.role;
    }

    if (v.type != Value::Function)
        return BrushData();

    QStringList lst = v.variant.toStringList();
    if (lst.count() != 2)
        return BrushData();

    QStringList gradFuncs;
    gradFuncs << QLatin1String("qlineargradient") << QLatin1String("qradialgradient") << QLatin1String("qconicalgradient") << QLatin1String("qgradient");
    int gradType = -1;

    if ((gradType = gradFuncs.indexOf(lst.at(0).toLower())) == -1)
        return BrushData();

    QHash<QString, qreal> vars;
    QVector<QGradientStop> stops;

    int spread = -1;
    QStringList spreads;
    spreads << QLatin1String("pad") << QLatin1String("reflect") << QLatin1String("repeat");

    bool dependsOnThePalette = false;
    Parser parser(lst.at(1));
    while (parser.hasNext()) {
        parser.skipSpace();
        if (!parser.test(IDENT))
            return BrushData();
        QString attr = parser.lexem();
        parser.skipSpace();
        if (!parser.test(COLON))
            return BrushData();
        parser.skipSpace();
        if (attr.compare(QLatin1String("stop"), Qt::CaseInsensitive) == 0) {
            QCss::Value stop, color;
            parser.next();
            if (!parser.parseTerm(&stop)) return BrushData();
            parser.skipSpace();
            parser.next();
            if (!parser.parseTerm(&color)) return BrushData();
            ColorData cd = parseColorValue(color);
            if(cd.type == ColorData::Role)
                dependsOnThePalette = true;
            stops.append(QGradientStop(stop.variant.toReal(), colorFromData(cd, pal)));
        } else {
            parser.next();
            QCss::Value value;
            (void)parser.parseTerm(&value);
            if (attr.compare(QLatin1String("spread"), Qt::CaseInsensitive) == 0) {
                spread = spreads.indexOf(value.variant.toString());
            } else {
                vars[attr] = value.variant.toReal();
            }
        }
        parser.skipSpace();
        (void)parser.test(COMMA);
    }

    if (gradType == 0) {
        QLinearGradient lg(vars.value(QLatin1String("x1")), vars.value(QLatin1String("y1")),
                           vars.value(QLatin1String("x2")), vars.value(QLatin1String("y2")));
        lg.setCoordinateMode(QGradient::ObjectBoundingMode);
        lg.setStops(stops);
        if (spread != -1)
            lg.setSpread(QGradient::Spread(spread));
        BrushData bd = QBrush(lg);
        if (dependsOnThePalette)
            bd.type = BrushData::DependsOnThePalette;
        return bd;
    }

    if (gradType == 1) {
        QRadialGradient rg(vars.value(QLatin1String("cx")), vars.value(QLatin1String("cy")),
                           vars.value(QLatin1String("radius")), vars.value(QLatin1String("fx")),
                           vars.value(QLatin1String("fy")));
        rg.setCoordinateMode(QGradient::ObjectBoundingMode);
        rg.setStops(stops);
        if (spread != -1)
            rg.setSpread(QGradient::Spread(spread));
        BrushData bd = QBrush(rg);
        if (dependsOnThePalette)
            bd.type = BrushData::DependsOnThePalette;
        return bd;
    }

    if (gradType == 2) {
        QConicalGradient cg(vars.value(QLatin1String("cx")), vars.value(QLatin1String("cy")),
                            vars.value(QLatin1String("angle")));
        cg.setCoordinateMode(QGradient::ObjectBoundingMode);
        cg.setStops(stops);
        if (spread != -1)
            cg.setSpread(QGradient::Spread(spread));
        BrushData bd = QBrush(cg);
        if (dependsOnThePalette)
            bd.type = BrushData::DependsOnThePalette;
        return bd;
    }

    return BrushData();
}

 

Qt用Qss设置自定义属性
qq_29486179的博客
12-30 1263
这里用到了Qt中的属性机制，就是Q_PROPERTY这个宏，在qss中我们一般只会调用写的方法就是WRITE这是属性里面的，详细介绍可以看qt助手，qss启动属性的写方法是这个字符串：qproperty-“你的属性名”；比如你有个QWidget你设置了他的属性为btText，那你的qss就写qproperty-btText；如下： class MainWindow : public QWidget { Q_OBJECT Q_PROPERTY(QString btText WRITE setP
Qss自定义属性
mahuifa的博客
02-27 3467
QSS属性功能使用，包括属性选择器、Q_PROPERTY定义属性、动态属性、QSS设置自定义属性值。
Q_PROPERTY
weixin_45954890的博客
10-13 312
属性是类的一个成员，可以通过元对象系统（meta-object system）进行访问，这使得它们可以在运行时被查询和修改，同时也支持信号和槽机制、动画框架等。RESET resetFunction：用于重置属性值的成员函数（可选）。NOTIFY notifySignal：属性值改变时发出的信号（可选）。WRITE setFunction：用于写入属性值的成员函数（可选）。SCRIPTABLE bool：属性是否可以在Qt脚本中使用（可选）。REVISION int：属性的版本号（可选）。
qss中使用自定义属性(property)
u012098118的专栏
07-13 2322
Q_PROPERTY(type name READ getFunction [WRITE setFunction] [RESET resetFunction] [NOTIFY notifySignal] [DESIGNABLE bool] [SCRIPTABLE bool] [STORED bool] [USER bool] [CONSTANT] [FINAL]) 1.必须有一个READ 函数。
qt样式表qss选择器+自定义属性样式
野生猿-群号1025127672
06-12 5025
在开始之前，先要区分3个概念：子类、子控件、后代控件是具备继承关系的类：如MyWidget: public QWidget是聚合在一起的大控件中的一小部分，如下拉列表控件中有个下拉箭头，这个箭头就是子控件（sub-control）是在界面上有父子关系的控件，如在QWidget中放置了一个QPushButton按钮，这个按钮就是QWidget的后代控件（Descendant control）
QSS技术（二）—— 常用基本语法详解（QSS的基本语法、常用选择器、属性定义、控件状态样式、自定义属性等内容）
J^T的博客
08-26 2197
Qt样式表（QSS）是一种用于Qt应用程序界面样式定制的语言。通过QSS，开发者可以控制Qt控件的外观，包括背景颜色、字体、边框、边距等属性。QSS的设计灵感来源于CSS，使得开发者能够以类似的方式定义和管理界面样式。属性用于定义控件的外观，包括颜色、字体、边框、间距等。属性名称和属性值之间用冒号分隔，多个属性之间用分号分隔。在这个样式表中，的背景颜色设置为#3498db，字体颜色设置为白色，边框设置为1px实线边框，内边距设置为5px。QSS允许使用自定义属性来为控件定义样式。这些属性可以通过。
qt qss自定义属性设置
最新发布
12-05
根据用户的问题和提供的引用内容，用户想要了解在Qt中使用QSS进行自定义属性设置的方法。引用中提到了使用Q_PROPERTY宏定义属性，并在QSS中使用`qproperty-属性名`的语法进行设置。 步骤1：在自定义控件类中声明...
QSS自定义属性传字符串
11-27
如果你想在 QSS 中设置自定义属性并传递字符串值，你可以直接使用 `setProperty` 和 `:property` 语法。 例如，如果你有一个名为 `myWidget` 的 Qt 对象，并想设置一个名为 `customColor` 的自定义属性，可以这样做...
QT控件自定义属性并支持QSS样式表+读取样式表的属性值
野生猿-群号1025127672
06-12 3789
C++中自定义的属性borderColor，在qss中对应的名字为：qproperty-borderColor。冒号后面的值对应为该属性的值，他会被传递进C++代码中。边框颜色 border-color、边框半径 border-radius、背景颜色 background-color、字体大小font-size: 等等。样式表里有很多属性，例如。
Qt之自定义属性Q_PROPERTY专题（2）应用案例QSS
$firecat利白的代码足迹$
03-04 2019
简述 QSS可以定制应用程序的外观，无需关注Qt样式背后的魔力。从非常轻微到极其复杂的调整，样式表都可以做到。对于一个完全定制和独特的用户体验，QtQuick和QGraphicsView是更好的选择。 | 版权声明：一去、二三里，未经博主允许不得转载。 自定义属性 为了用户界面外观的动态变化，属性选择器可以与动态属性组合使用。动态属性在Qt4.2中引入，允许为编译时不存在的QObject属性分...
QT自定义属性Q_PROPERTY
Beyond欣
08-06 2263
Q_PROPERTY 继承于 QObject 相当于自定义了一个控件 他的优势就是注册之后的类转为qt元属性，可以在designer看到和修改，并且方便注册到qml中。 当然了如果你想qlabel，qbtn这些常用的类也有这个属性，并且可以在designer修改，那需要自己全部重定义，让后每个类前边注册Q_PROPERTY和READ WRITE两个函数。 具体方法 //类前边加（直接放在Q_...
Qt 自定义控件应用QSS（setStyleSheet）设置由Q_PROPERTY设置的属性
Qter
03-14 8617
继承自QWidget的类设置了自定义属性frameColor-边框颜色 class FHRBox : public QWidget { Q_OBJECT Q_PROPERTY(QColor frameColor READ frameColor WRITE setFrameColor) public: explicit FHRBox(QWidget *pare
QT:qss使用动态属性进行自定义实例
希望我的博客，能帮上你解决学习中工作中所遇到的问题
07-02 621
QT:QSS使用动态属性进行自定义
Qt之QSS（动态属性）
weixin_33973600的博客
06-16 1921
简述 QSS可以定制应用程序的外观，无需关注Qt样式背后的魔力。从非常轻微到极其复杂的调整，样式表都可以做到。对于一个完全定制和独特的用户体验，QtQuick和QGraphicsView是更好的选择。 简述 自定义属性 限制 示例 效果 源码 QSS 更多参考 自定义属性 为了用户界面外观的动态变化，属...
Qt之QSS（Q_PROPERTY-自定义属性）
weixin_34383618的博客
06-17 1228
简述 在Qt之QSS（Q_PROPERTY-原始属性）一节我们分享了Q_PROPERTY-原始属性的用法，但通常情况下我们需要很多自定义样式，例如：动态获取QSS样式，这时自定义属性就能很好的发挥其用武之地了。 简述 问题 解决方案 实例 效果 源码 QSS 使用 更多参考 问题 在使用QAbstrac...
css自定义属性
h_jQuery的博客
06-17 316
css文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
QT学习笔记5---QSS
qq_41684737的博客
11-28 1112
QSS 其实是Qt样式表，Qt样式表是Qt界面的一种强大的机制，除了通过继承QStyle已经可以实现的功能外，它还允许您自定义窗口组件的外观。Qt样式表的概念、术语和语法很大程度上受到HTML层叠样式表(CSS)的启发。功能和CSS的基本一样，如果大家应该也是有CSS 的基本基础，那写QSS就比较容易。
【Qt学习笔记】14.界面的样式 （Qt Stylesheet）
weixin_33943347的博客
12-20 373
一、StyleSheet的基本用法StyleSheet : 样式单Qt中支持StyleSheet技术，将界面的样式定义分离开来。采用和HTML/CSS类似的形式，使用一个文本文件来单独定义样式。通常，用于定义界面样式的StyleSheet称为“皮肤”StyleSheet的定义：定义一个StyleSheet,前面是类名(称为Selector),大括号内是属性定义，支持/**/注...
Qt设置按钮的图标的方法
热门推荐
fearlazy
04-28 1万+
原文链接：https://www.fearlazy.com/post/284.html 以QPushButton为例，设置按钮的图标可以使用函数setIcon，设置图标大小使用setIconSize。 测试代码： 效果: 也可以直接使用样式表的方式： qproperty-icon和qproperty-iconSize分别表示图标属性和图标大小属性，设置后显示效果同上。 这种方式有个缺点就是不能为不同的状态(如按下按钮)设置不同的图标，而且也没办法设置图标与文字...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

龚建波

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值