QSplitter显示两个小部件之间的分隔符或边距

QSplitter show a divider or a margin between the two widgets

本文关键字：之间 分隔符 小部 显示 两个 QSplitter      更新时间：2023-10-16

我有一个QSplitter和两个小部件，但我希望能够有一个边距，以便在两个小部件之间有一个清晰的过渡。我看了QSplitter和QSplitterHandle，但没有看到任何明确的方式这样做。

如何在两个小部件之间添加分隔符?

样式表是一种强大的机制，可以改变Qt中任何小部件的外观。

查看这里的快速教程，这里是参考指南。可以使用设计器中的编辑器分配样式表，或者使用setStylesheet(QString)作为字符串传递样式表。使用设计器当然更容易，因为这样你就可以在运行小部件之前看到它的样子。

现在，针对你的具体问题。一个QSplitter本质上是一个QFrame。但它也包括一个句柄，如你所知。这就是典型的样式

例如，你可以这样写:

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

为拆分器句柄提供图像。这有点类似于Motif下的操作，其中总是显示一个小矩形手柄，用户可以单击该手柄来移动拆分器。

通过一些实验，你可以为你的手柄创建一个很酷的分隔线。

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，和宽度，如果我们改变垂直分条器需要不同。

希望这对你有帮助。一旦开始使用样式表，乐趣就真正开始了。

不用深入讨论样式表的所有细节，我可以给你几个选择:

1)你可以在你的分配器中布局几个qframe，给它们布局，然后把你的小部件放在那些框架中。你可以使用布局的间距选项(参见QLayout::setContentsMargin())在你的小部件周围添加一些间距。

2)样式表的方法(在我看来是更好的方法)是为您的小部件设置一些样式表。举个简单的例子，你可以对分配器中的小部件做如下操作:

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

如果你正在用Qt做任何类型的GUI设计，我强烈建议你学习所有关于样式表的知识，它们是你的朋友。

QSplitter有一个可以设置的handleWidth属性。

相关文章：