Qt 4.3 and Style Sheets

There’s been a tremendous amount of action in the Qt Style Sheet world for 4.3. I have been extremely busy managing the release, but now with 4.3.0 out, I have all the time to blog about the Style Sheet features we have added for 4.3 .

To start with, have you noticed Style Sheet documentation lately? 4.3 brings a whole new bunch of Pseudo States, Sub-controls. The widget documentation explains in detail how to style each and every widget. For 4.3.1, our doc team is working on a shiny new example and more detailed text in the documentation.

Over the coming weeks, I will go over each enhancement in detail. I will start with my personal favorite – specifying gradients in Style Sheets. Gradients are specified in ObjectBoundingMode (Thanks, Zack!).

Try this,

QPushButton {
border-radius: 6px;
border: 2px solid #8f8f91;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f6f7fa, stop: 1 #dadbde);
}

QPushButton:pressed {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #dadbde, stop: 1 #f6f7fa);
}


This is how it looks (default and pressed):

First thing to notice, the notorious border-radius bug is fixed. The background is now clipped when specifying a border-radius. Second, all colors are now Brushes. A Brush can be a color (as in 4.2) or gradients or a palette entry. It follows that we can specify the text color as a gradient too,


QGroupBox {
color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 lightblue, stop: 1 navy);
}


Since I am too lazy to take more screenshots , Here’ some more stuff to try,

QListWidget, QLineEdit {
selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 lightblue, stop: 1 navy);
}


No related posts.