background gradient with stylesheets

[martinn]

Hi,

Im trying to accomplish something that I think is quite easy but I can't figure out how to use the gradients in the right way. What I'm trying to do is style a QPushButton background with stylesheets so it looks like the image below.

This is what I want:



This is the code I'm using but I never get the sharp line in the middle, it just fade over..

background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 0.5, x3: 0 y3: 1,
                                     stop: 0 #ABCD44, stop: 0.5 #ABCD44,
                                     stop: 0.5 #A1C72E, stop: 1.0 #9CC322);

background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 0.5, x3: 0 y3: 1,
                                     stop: 0 #ABCD44, stop: 0.5 #ABCD44,
                                     stop: 0.5 #A1C72E, stop: 1.0 #9CC322);

To copy to clipboard, switch view to plain text mode 

I know I'm just doing something wrong when building the style but I'm not totally sure how to use the gradients.. Thanks!

[Lykurg]

you have to use something like that:

background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
  stop: 0 #ABCD44, 
  stop: 0.5 #ABCD44,
  stop: 0.51 #A1C72E,
  stop: 0.54 #A1C72E,
  stop: 1.0 #9CC322);

background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
  stop: 0 #ABCD44, 
  stop: 0.5 #ABCD44,
  stop: 0.51 #A1C72E,
  stop: 0.54 #A1C72E,
  stop: 1.0 #9CC322);

To copy to clipboard, switch view to plain text mode 

If you want a clear line you have to reimp the paint event and do the drawing yourself,

[martinn]

Thanks very much now I got the background working! One thing though, when I select the button when running the app in the Symbian Emulator I get this white inner border like in this picture:

Why is that and can I get rid of it?

[Lykurg]

I don't see a image, but it is because the button gets the focus and you see the focus rectangle. For that you have to alter the paint event and remove the flag has_focus from the option and then let Qt draw the button. Search the forum on that topic. It has been handled several times.

EDIT: the correct flag is QStyle::State_HasFocus.

[Lykurg]

A possible paintEvent would look like:

void MyPushButton::paintEvent(QPaintEvent* event)
{
    Q_UNUSED(event);
    QStylePainter painter(this);
    QStyleOptionButton option;
    initStyleOption(&option);
    option.state &= ~QStyle::State_HasFocus;
    painter.drawControl(QStyle::CE_PushButton, option);
}

void MyPushButton::paintEvent(QPaintEvent* event)
{
    Q_UNUSED(event);
    QStylePainter painter(this);
    QStyleOptionButton option;
    initStyleOption(&option);
    option.state &= ~QStyle::State_HasFocus;
    painter.drawControl(QStyle::CE_PushButton, option);
}

To copy to clipboard, switch view to plain text mode 

Or try to use style sheet with ":focus":

QPushButton:focus{
  border: 0;
}

QPushButton:focus{
  border: 0;
}

To copy to clipboard, switch view to plain text mode 

[martinn]

Hi again,

aha, thats why! The rectangle shows up for many of the widgets when they have focus and I'm using stylesheets to style my app and it seems like a mass of work if I need to alter the paint event for each QPushbutton, QTabbar, QListWidgetItem and so on to get rid of this rectangle? Can I use stylesheets instead in some way? Setting the border of QPushButton:focus, didn't seem to solve it..

[martinn]

Seems like setFocusPolicy(Qt::NoFocus) got rid of the rectangle but now the button wouldn't accept my stylesheet for:
Code:

QPushButton:selected {
background: red;
}

So I can choose between having the ugly rectangle and be able to style the button when selected OR no rectangle but also no style when selected at all? Or am I doing something wrong here?