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

Question

我有一个 QSplitter 和两个小部件在两侧，但我希望能够有一个边距，这样两个小部件之间就有一个清晰的过渡。我查看了 QSplitter 和 QSplitterHandle，但没有找到任何明确的方法来实现这一点。

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

- Nick

---

你尝试过使用样式表来为QSplitter设置样式吗？ - Liz

不，我不知道它是什么。 - Nick

https://dev59.com/8HE85IYBdhLWcg3w64EA#59951077 - francek

Answer 1

样式表是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;
}

对于最后一个问题，我们特意只覆盖了水平分隔器，因为一些属性 - 如上下边距和宽度 - 如果我们更改垂直分隔器，这些属性将需要不同的值。

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

- Liz

---

谢谢，这对我今天很有帮助。它应该响应悬停属性吗？我希望当用户悬停时它变黑，但是 QSplitter::handle:hover 似乎行不通。 - Phlucious

Answer 2

不必深入讨论样式表的所有细节，我可以给你几个选项：

1）您可以在分裂器中布置几个QFrames，为它们提供布局，然后将您的小部件放在这些框架内。 您可以使用布局的间距选项（请参见QLayout :: setContentsMargin（））在您的小部件周围添加一些间距。

2）样式表的方式（在我看来是更好的方式）是为您的小部件设置一些样式表。 举个简单的例子，您可以在分裂器中的小部件上执行以下操作：

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

如果你正在使用Qt进行任何类型的GUI设计，我强烈建议你学习所有关于样式表的知识，它们会成为你的好朋友。请参阅Qt样式表参考以获取一些文档资料。

- Chris

Answer 3

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

- Arnold Spence

---

这并不能实际绘制任何东西，它只是使不可见的手柄变宽。 - Michael Mrozek