QSplitter显示两个小部件之间的分隔线或边距 [英] QSplitter show a divider or a margin between the two widgets

问题描述

我在每侧都有一个QSplitter和两个小部件，但是我希望能够有一个空白，以便在两个小部件之间有一个清晰的过渡.我查看了QSplitter和QSplitterHandle，但没有看到任何明确的方法.

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?

推荐答案

样式表是一种强大的机制，可用于更改Qt中任何小部件的外观.

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.

现在，针对您的特定问题. QSplitter本质上是一个QFrame.但它也包括一个手柄-如您所知.所以通常就是通常的样式.

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);
     }

为分离器手柄提供图像.这有点类似于在Motif下进行的操作，在Motif下总是显示一个小的矩形手柄，用户可以单击它来移动分离器.

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);
     }

或更像这样的东西.

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;
}

对于最后一个，我们特地只覆盖了水平分割器，因为某些属性-例如margin-top和bottom和width，如果我们要更改垂直分割器，则宽度必须有所不同.

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.

这篇关于QSplitter显示两个小部件之间的分隔线或边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！