CODEWITHSUNDEEP
qtqt4qt4.8
daisy
daisy

Reputation: 23501

Set background color only partially with stylesheets

How can I set the background color for a part of the background like in the following image:

enter image description here

Of course, without border frames, I want to set only the cyan color.

I need to set the length of the left part (cyan) as the percentage of the widget length, e.g 30%.

Upvotes: 5

Views: 1838

Answers (2)

felixgaal
felixgaal

Reputation: 2423

If you want it hard-coded in the application, you can overload the paintEvent function in a widget. Something like this:

void MyWidget::paintEvent(QPaintEvent *event)
{
  QPainter painter(this);
  QPen pen(Qt::NoPen);
  painter.setPen(pen);
  painter.fillRect(0, 0, width(), height(), Qt::white);
  painter.fillRect(0, 0, 0.3*width(), height(), Qt::cyan);
  ...
}

Upvotes: 2

Kamil Klimek
Kamil Klimek

Reputation: 13130

With css I would hack qlineargradient a little bit. Note that edge of cyan may be a little blurry.

QFrame
{
        background-color: qlineargradient(x1:0, x2: 1, stop: 0 cyan, stop: 0.29 cyan, stop: 0.2901 white, stop: 1 white);
}

Upvotes: 6

Related Questions