Three pushButtons in a shape of one

[Kenji_Takahashi]

Hi all,

It finally happened - I have a problem.
I want to make a custom QPushButton with three separated areas doing different actions. See the attachment for mock-up.
I managed to draw it (as you can see) and even implement the actions I want, but I'm stuck with the look, I have no idea how to change the state of just one part of the button.
So, the question is: How to create such button with the ability to change the state of each part, without actually splitting it into three (because it will look..weird)?

[wysota]

It depends what you want to do. You can easily shift the text when the appropriate part is pressed, that's for sure. It's really all about drawing. And you can always go the easy way and do this:

[Kenji_Takahashi]

Of course I know I can do it that way, but my way looks better and that's the only thing I really want to achieve.
As for the text shifting, I know it too, but I don't want this button to behave different than others.

[wysota]

So what do you want it to do?

[Kenji_Takahashi]

A graphical mock-up is always best right? Now I'm at home, so I managed do make one. The first one is hovered state and the second is pressed state.

[wysota]

And what is the problem?

[Kenji_Takahashi]

The problem is...I can't get it to work . Those above were just images made in GIMP.

[hkvm]

There's no reason why three separate buttons would look weird. Simply put them in layouts with layoutSpacing set to 0 and there won't be a space between them.

If you're still not happy with how this looks, you'd have to subclass QPushButton and reimplement the paintEvent and do all the drawing yourself, but without a lot of work it would probably look even more weird than this.

[Kenji_Takahashi]

Yes, I know I'll have to subclass QPushButton and I already started, but I'm stuck with those states. I have to change the look of just one part of the button and I don't know how to do this.
Maybe I'll have to take the gradient (or how it's called?) from the style and draw it above the actual button? I really don't know .

[wysota]

The problem is...I can't get it to work . Those above were just images made in GIMP.

I still don't get what the problem is. Use QPainter to draw the things you want drawn.

[hkvm]

I don't understand where you're stuck -- is drawing the problem, or knowing which part was pressed?

I guess you should reimplement QMouseEvent and handle mouse clicks/releases within the button, find out which part is being pressed (you know the cursor position) and in paintEvent respond by drawing the button accordingly.

How you draw the buttons is entirely up to you, you could draw the whole button and then paint over the pushed part like you suggested or draw them separately and do different drawing for the one that is pushed. There shouldn't be a problem here, it's just a matter of how you want it to look.

[Kenji_Takahashi]

I already reimplemented the mouse events (actions are working, as I wrote in first post).
I want it to have the look of current system style. It's actually one button and when I hover/press the "1/1" button it has to take "upper" part of the style and the "Submit" one has to take the "lower" part . Without changing the rest of the button, ofc.
I'll play with it again later, when I'll be back home.

[wysota]

But what is the problem? You don't know how to follow the look of the style? Use QStyle::draw*() methods.

[Kenji_Takahashi]

Uh, alright, you were assuring me so much that it should be easy, so after a long night and strange code flying around , I think I managed to do it the way I meant.

Anyway, thanks for your time and hope I won't have such strange problems anymore .