Question

我遵循了Qt文档的指南，并完成了一个自定义小部件插件。现在，它可以在QtDesigner中成功运行。这是我引用的示例：

https://doc.qt.io/qt-5/designer-creating-custom-widgets.html

这是三个指针的时钟小部件。

clock image

我想通过qss更改指针的颜色，就像这样：

Clock {
  hour-hand: #333333;
  minute-hand: #f7f7f7;
  second-hand: #cccccc;
}

我阅读了有关QStyle的文档，有关QStyleOption的文档以及有关QStylePlugin的文档。但是我还没有弄清楚它们之间的关系，也不知道应该使用哪个类来解决我的问题。

Answer 1

Qt StyleSheet专用于绘制预定义的小部件，因为其实现是Qt专用API的QStyle，因此无法预定义新属性。但是在Qt StyleSheet属性中，有一个qproperty-foo可在这种情况下使用，例如，设置时针的颜色，为此，您必须创建一个QProperty：

analogclock.h

#ifndef ANALOGCLOCK_H
#define ANALOGCLOCK_H

#include <QWidget>
#include <QtUiPlugin/QDesignerExportWidget>

class QDESIGNER_WIDGET_EXPORT AnalogClock : public QWidget
{
    Q_OBJECT
    Q_PROPERTY(QColor hourColor READ hourColor WRITE setHourColor)
public:
    explicit AnalogClock(QWidget *parent = nullptr);
    QColor hourColor() const;
    void setHourColor(QColor hourColor);
protected:
    void paintEvent(QPaintEvent *event) override;
private:
    QColor m_hourColor;
};

#endif

analogclock.cpp

#include "analogclock.h"

#include <QMouseEvent>
#include <QPainter>
#include <QTime>
#include <QTimer>

AnalogClock::AnalogClock(QWidget *parent)
    : QWidget(parent), m_hourColor(QColor(127, 0, 127))
{
    QTimer *timer = new QTimer(this);
    connect(timer, &QTimer::timeout, this, QOverload::of(&QWidget::update));
    timer->start(1000);

    setWindowTitle(tr("Analog Clock"));
    resize(200, 200);
}

QColor AnalogClock::hourColor() const
{
    return m_hourColor;
}

void AnalogClock::setHourColor(QColor hourColor)
{
    if (m_hourColor == hourColor)
        return;
    m_hourColor = hourColor;
    update();
}

void AnalogClock::paintEvent(QPaintEvent *)
{
    static const QPoint hourHand[3] = {
        QPoint(7, 8),
        QPoint(-7, 8),
        QPoint(0, -40)
    };
    static const QPoint minuteHand[3] = {
        QPoint(7, 8),
        QPoint(-7, 8),
        QPoint(0, -70)
    };

    QColor minuteColor(0, 127, 127, 191);

    int side = qMin(width(), height());
    QTime time = QTime::currentTime();

    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.translate(width() / 2, height() / 2);
    painter.scale(side / 200.0, side / 200.0);

    painter.setPen(Qt::NoPen);
    painter.setBrush(m_hourColor);

    painter.save();
    painter.rotate(30.0 * ((time.hour() + time.minute() / 60.0)));
    painter.drawConvexPolygon(hourHand, 3);
    painter.restore();

    painter.setPen(m_hourColor);

    for (int i = 0; i < 12; ++i) {
        painter.drawLine(88, 0, 96, 0);
        painter.rotate(30.0);
    }

    painter.setPen(Qt::NoPen);
    painter.setBrush(minuteColor);

    painter.save();
    painter.rotate(6.0 * (time.minute() + time.second() / 60.0));
    painter.drawConvexPolygon(minuteHand, 3);
    painter.restore();

    painter.setPen(minuteColor);

    for (int j = 0; j < 60; ++j) {
        if ((j % 5) != 0)
            painter.drawLine(92, 0, 96, 0);
        painter.rotate(6.0);
    }
}

然后您可以使用：

AnalogClock {
  qproperty-hourColor: #333333;
}

注意：默认情况下，QProperty的DESIGNABLE值为true，因此您还可以从属性编辑器修改hourColor属性：

如何在自定义小部件插件上使用qss

1 个答案: