How to use qss on a custom widget plugin - qt

Question

I followed the guide of the Qt documentation and completed a custom widget plugin. And now it can run successfully in QtDesigner.
This is the example I refer to:
https://doc.qt.io/qt-5/designer-creating-custom-widgets.html
This is a clock widget with three hands.
I want to change the color of the hands through qss, just like this:
Clock {
hour-hand: #333333;
minute-hand: #f7f7f7;
second-hand: #cccccc;
}
I read the document about QStyle, the document about QStyleOption, and the document about QStylePlugin. But I haven't figured out the relationship between them well, and I don't know what Class should be used to solve my problem.

Answer 1

Qt StyleSheet is dedicated to painting predefined widgets since its implementation is a QStyle of Qt's private API, therefore new properties cannot be predefined. But within the Qt StyleSheet properties there is a qproperty-foo that can be used in this case, for example to set the color of the hour hand, and for this you must create a 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);
}
}
and then you can use:
AnalogClock {
qproperty-hourColor: #333333;
}
Note: By default the QProperty have the DESIGNABLE in true so you can also modify the hourColor property from the Property editor: