QSplitter shows separator or difference between two widgets

Question

I have a QSplitter and two widgets on both sides, but I want to have a difference so that there is a clear transition between the two widgets. I looked in QSplitter and QSplitterHandle, but I see no explicit way to do this.

How to add a separator between two widgets?

Answer 1

Style sheets are a powerful mechanism for changing the appearance of any widgets in Qt.

See here for a quick guide and here for a reference guide. Style sheets can be assigned using the editor in the constructor or passed as a string using setStylesheet (QString). This is certainly easier using the constructor, because then you can see how your widget will look before launching it.

Now, for your specific problem. QSplitter is essentially a QFrame. But it also includes a pen - as you know. Thus, this is usually a style.

So, for example, you can do this:

QSplitter::handle { image: url(:/images/splitter.png); } 

What provides the image for the separator descriptor. This is a bit like what was done in Motif, where there is a small rectangular handle, always showing that the user can click to move the divider.

With a little experimentation, you can create a cool dividing line for your descriptor.

 QSplitter::handle { background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(255, 255, 255, 0), stop:0.407273 rgba(200, 200, 200, 255), stop:0.4825 rgba(101, 104, 113, 235), stop:0.6 rgba(255, 255, 255, 0)); image: url(:/images/splitter.png); } 

Or something more painted like that.

 QSplitter::handle:horizontal { background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #eee, stop:1 #ccc); border: 1px solid #777; width: 13px; margin-top: 2px; margin-bottom: 2px; border-radius: 4px; } 

For this last, we specifically redefine only the horizontal splitter because of some properties - such as margin-top and bottom and width, which would have to be different if we changed the vertical separator.

Hope this helps. When you start playing with style lists, the fun really begins.

Answer 2

QSplitter has a handleWidth property that you can set.

Answer 3

Without going into all the details of the stylesheet, I can give you a couple of options:

1) You can place several QFrames in your separator, give them layouts and place your widgets inside these frames. You can use layout interpolation options (see QLayout :: setContentsMargin ()) to add a few spaces around your widgets.

2) A style style (and, in my opinion, a great way) is to set up some style sheets for your widgets. For a brief example, you can do something similar in your widgets that are in your separator:

 widget->setStyleSheet( "margin-left: 10px" ) 

If you are doing any GUI design with Qt, I highly recommend that you learn all about style sheets, they are your friend. See the Qt style sheet link for any documentation.