QSplitter show a divider or a margin between the two widgets

Question

I have a QSplitter and two widgets on either side, but I want to be able to have a margin, so that there is a clear transition between the two widgets. I looked in QSplitter and QSplitterHandle but dont see any explicit way of doing this.

How do I add a divider between the two widgets?

Answer 1

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

See here for a quick tutorial, and here for a reference guide. Style sheets can be assigned using an editor in the Designer, or passed as a string using setStylesheet(QString). It is certainly easier using the Designer because then you can see what your widget will look like before running it.

Now, for your specific problem. A QSplitter is essentially a QFrame. But it also includes a handle - as you know. So typically that is what is usually styled.

So, for example you can do this:

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

Which provides an image for the splitter handle. This is a bit similar to what is done under Motif, where there is a little rectangular handle always shown that the user can click on to move the splitter.

With a little experimentation you can create a cool separation line for your handle.

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 drawn like this one.

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 one, we specifically only override the horizontal splitter, because of some of the properties - like margin-top and bottom, and width that would need to be different if we were changing the vertical splitter.

Hope this helps. Once you start playing with Style sheets the fun really begins.

Answer 2

The QSplitter has a handleWidth property you can set.

Answer 3

Without going into all the gory details of style sheets I can give you a couple of options:

1) You can layout a couple of QFrames in your splitter, give them layouts and the put your widgets inside of those frames. You can use the layouts' spacing options (see QLayout::setContentsMargin()) to add some spacing around your widgets.

2) The style-sheet way (and in my opinion superior way) is to setup some style sheets for your widgets. For a brief example you can do something like this on your widgets that are in your splitter:

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

If you're doing any kind of GUI design with Qt, I highly recommend you learn all about style sheets, they are your friend. See the Qt style sheets reference for some documentation.