QTreeView & QStyledItemDelegate & QPushButton/Checkbox etc?

raven-worx

@Dariusz
unfortunately thats only possible with a QWidget instance again, since only QWidgets get polished by styles.
Also read this.
So either you pass a QPushButton to the drawControl() method or use a QStylePainter instead. But which is impossible, since only 1 painter at the time can be active for a paint device (the viewport in this case).

Dariusz

That is a very strange thing that we can create a QStyleOptionButton and then NOT be able to use the styleSheet to style that button by default... ?

It seems if I do this :

            const QWidget *widget = option.widget;
            QStyle *style = widget ? widget->style() : QApplication::style();
            QApplication::style()->drawControl(QStyle::CE_PushButton, &button, painter, widget );

or even this:

            QApplication::style()->drawControl(QStyle::CE_PushButton, &button, painter, option.widget);

I get some "kind" of styling from my styleSheet, but the button doesn't look like button sadly. Once I pass parrent widget, it seems like he uses the right Palette but something breaks?

Then I tried this, which "kinda" does something but still not a button...

            QPushButton *b = new QPushButton();
            QStyleOptionButton button;
            button.initFrom(b);
            QApplication::style()->drawControl(QStyle::CE_PushButton, &button, painter, b);

Which is very strange, as I'm creating style based on a widget so why would it not look correct?

So it seems that I'm back to using a widget for my painting... which kinda seems counter "productive". Or perhaps I need to learn how to style each part of the button and just style them precisely by hand...

Right now I get this https://pasteboard.co/I7zYlPz.gif
with this method :

        QApplication::style()->drawControl(QStyle::CE_PushButton, &button, painter, option.widget);

If I wish to style this as a button - ie add the correct background color/bevels/round edges etc. Where do I do this ?

TIA

raven-worx

@Dariusz
of course it heavily depends how your stylesheet looks like.
The button from your screenshot looks like it is styled by stylesheet style. So you will rather think about your style rules.

Dariusz

Hmmm Ok I did more tests, it seems that my button does work as it should! I just didnt notice my style was so meh...

Ok so moving on.... kinda...
I now can style stuff the way I want via stylesheet... I'm slowly learning more and more about QStyle... something I wonder...

I know I can specify some custom qss commands, like widget name or something like that can apply to a specific widget... however I do wonder if there is a way to add a custom property/color?

Say I have a 3 flags for atext, on/off/danger, green/red/orange colors, Is there a way to somehow grab a property from styleSheet and then use it for color during my paint event? I know I could hard code the colors, but I would rather have a more "fancy" stylesheet here if I can.

I tried doing this :

qss.
QMagic{
qproperty-MAGIC : 10;
}

qDebug() << qApp->style()->property("qproperty-MAGIC");

But I'm fairly sure I did something wrong... was trying to follow : https://stackoverflow.com/questions/36125907/adding-new-stylesheet-parameters-for-custom-qt-widgets

Any help would be great.

TIA

raven-worx

@Dariusz
QWidgets do not get polished when a custom property changes.
So whenever you change a property in C++ which should affect the styling you need to call:

MyWidget::setMyColorProperty(QString value)
{
   mColor = QColor(value);
   this->update();
}
....
widget->setProperty("customPropertyName", "danger");
widget->style()->polish(widget);

In QSS:

MyWidget[customPropertyName="danger"] {
   qproperty-myColorProperty: "red";
}

Dariusz

@raven-worx Hmmmmmmm still somewhat lost...

It seems like its time for me to learn about Q_Property then :- )
https://wiki.qt.io/Qt_Style_Sheets_and_Custom_Painting_Example
and
https://wiki.qt.io/Dynamic_Properties_and_Stylesheets
I take this is needed for this to work ?

Feels a little...tricky... as I'm failing :- )... still failing... yeah cant get it to work o.O

So there is no way to just store a

myVariables{
someColor : red;
otherColor : blue;
ninja : black
}

and then be able to read it from any widget and set on that widget? A bit like repository of variables?

Regards
Dariusz
TIa

raven-worx

@Dariusz said in QTreeView & QStyledItemDelegate & QPushButton/Checkbox etc?:

and then be able to read it from any widget and set on that widget?

only if the widget has the property defined.

QWidget {
    qproperty-PROP: "red";
}

This will try to apply the property to all QWidget instances. But will also result in a warning IIRC, when the property isn't defined on the widget..

Dariusz

@raven-worx Hmmm the delegate is not a widget, can it even access that kind of data?

I'm quite surprised there is no way to just do styleSheet()->getObjectByType("mySomeClassType").getPropertyByName("nameProp") :- (

Edit. I kinda just realized something, I can just do object.styleSheet().getMyValMyselfInMyStyleParser() So I just have to figure out how to parse style sheet and then I can get data I want. I don't even have to use QT system for it except for styleSheet() to get string. Yay!

Dariusz

Right, so moving on... while I'm R&Ding css parser... ;- )

QCheckBox style of the check box indicator...

I'm struggling to get it to the right place, I'm guessing something in my style sheet messes up something or in my code...

Here is the paint I get : the checkbox is not aligned to my icon.png file... https://pasteboard.co/I7XmA8n.png

cpp.

            QStyleOptionButton opt;
            opt.rect = getCheckBoxrect(option);
            opt.state = option.state;
            if (index.data(enTreeCustomWidgetData)).toBool()) {
                opt.state |= QStyle::State_On;
            } else {
                opt.state |= QStyle::State_Off;
            }
            QApplication::style()->drawControl(QStyle::CE_CheckBox, &opt, painter, option.widget); /// need option.widget for style-look
            opt.text = "bvdfasbdfsbdfs";
            opt.state |= QStyle::State_Enabled;
            QRect r = option.rect;
            r.setTopLeft(opt.rect.topRight() + QPoint(5, -5));
            opt.rect = r;
            QApplication::style()->drawControl(QStyle::CE_CheckBoxLabel, &opt, painter, option.widget);

getRect.cpp

    QStyleOptionButton opt_button;
    opt_button.QStyleOption::operator=(option);
    QRect sz = QApplication::style()->subElementRect(QStyle::SE_ItemViewItemCheckIndicator, &opt_button, option.widget);
    QRect r = option.rect;
    r.setTopLeft(r.topLeft() + QPoint(5, 5));
    r.setWidth(sz.width());
    r.setHeight(sz.height());
    return r;

Style:


QTreeView::indicator:checked,
QListView::indicator:checked {
    image: url(:/qss_icons/rc/checkbox_checked.png);
}

QTreeView::indicator:unchecked,
QListView::indicator:unchecked {
    image: url(:/qss_icons/rc/checkbox_unchecked.png);
}

QTreeView::indicator:checked:hover,
QTreeView::indicator:checked:focus,
QTreeView::indicator:checked:pressed,
QListView::indicator:checked:hover,
QListView::indicator:checked:focus,
QListView::indicator:checked:pressed {
    image: url(:/qss_icons/rc/checkbox_checked_focus.png);
}

QTreeView::indicator:unchecked:hover,
QTreeView::indicator:unchecked:focus,
QTreeView::indicator:unchecked:pressed,
QListView::indicator:unchecked:hover,
QListView::indicator:unchecked:focus,
QListView::indicator:unchecked:pressed {
    image: url(:/qss_icons/rc/checkbox_unchecked_focus.png);
}

QTreeView::indicator:indeterminate:hover,
QTreeView::indicator:indeterminate:focus,
QTreeView::indicator:indeterminate:pressed,
QListView::indicator:indeterminate:hover,
QListView::indicator:indeterminate:focus,
QListView::indicator:indeterminate:pressed {
    image: url(:/qss_icons/rc/checkbox_indeterminate_focus.png);
}

QTreeView::indicator:indeterminate,
QListView::indicator:indeterminate {
    image: url(:/qss_icons/rc/checkbox_indeterminate.png);
}

QListView,
QTreeView,
QTableView,
QColumnView {
    background-color: #19232D;
    border: 1px solid #32414B;
    color: #F0F0F0;
    gridline-color: #32414B;
    border-radius: 4px;
}

What did I break here? :- )

TIA

Ok I cant get it through properly...
Went all the way to > https://code.woboq.org/qt5/qtbase/src/widgets/styles/qcommonstyle.cpp.html#2219
as well as

    qDebug() << "SE_CheckBoxIndicator " << QApplication::style()->subElementRect(QStyle::SE_CheckBoxIndicator, &opt_button, option.widget);
    qDebug() << "SE_CheckBoxContents  " << QApplication::style()->subElementRect(QStyle::SE_CheckBoxContents, &opt_button, option.widget);
    qDebug() << "SE_CheckBoxFocusRect " << QApplication::style()->subElementRect(QStyle::SE_CheckBoxFocusRect, &opt_button, option.widget);
    qDebug() << "SE_CheckBoxClickRect " << QApplication::style()->subElementRect(QStyle::SE_CheckBoxClickRect, &opt_button, option.widget);
    qDebug() << "SE_ItemViewItemCheckIndicator " << QApplication::style()->subElementRect(QStyle::SE_ItemViewItemCheckIndicator, &opt_button, option.widget);

None of them returns the correct size of my image that I use in my styleSheet... Something keeps messing up the look of the checkbox.

Ok I gave up on that styleSheet thing with checkbox... ended up with :

                case Qt::Checked: {
                    opt.state |= QStyle::State_On;
                    if ((opt.state & QStyle::State_MouseOver) || (opt.state & QStyle::State_Selected)) {
                        map.load(":/qss_icons/rc/checkbox_checked_focus.png");
                    } else if (opt.state & QStyle::State_Selected) {

                    } else {
                        map.load(":/qss_icons/rc/checkbox_checked.png");
                    }
                    break;
                }
                case Qt::PartiallyChecked: {
                    opt.state |= QStyle::State_NoChange;
                    map.load(":/qss_icons/rc/checkbox_indeterminate.png");
                    break;
                }
                case Qt::Unchecked: {
                    opt.state |= QStyle::State_Off;
                    map.load(":/qss_icons/rc/checkbox_unchecked.png");
                    break;
                }
            }
            painter->drawPixmap(opt.rect, map);

But now I've preloaded it in to map and I'm loading it form map.

In any case... I do wonder however, if I have a widget... can I get it styleSheet parameter? Say I'd like a style of checkbox in QCheckBox of the image for checkbox indicator... can I get the path from Qt ? This way I can use the stylesheet instead of fixed image paths in code... ?

Dariusz

Hey

Got a follow up question in regards to styling...

How can I get QComboBox focus indicator/rect ? So that I can set correct color for the outline of comboBox to paint?

I tried using

            QRect r = QApplication::style()->subElementRect(QStyle::SE_ComboBoxLayoutItem, &option, mWidgetList[ComboBox]);

and

           QRect  r = QApplication::style()->subElementRect(QStyle::SE_ComboBoxFocusRect, &option, mWidgetList[ComboBox]);

But neither return correct rect to use as paint target... Only the large square one around item in tree view.

Any hints?

Same for QPushButton, and pretty much any button/combo like widget I think o.O

TIA.