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

Posted 2023-03-06

【中文标题】QSplitter 显示两个小部件之间的分隔线或边距

【英文标题】：QSplitter show a divider or a margin between the two widgets

【发布时间】：2011-10-13 12:49:13

【问题描述】：

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

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

【问题讨论】：

您是否尝试过使用样式表设置 QSplitter 的样式？

不..我不知道它是什么..

***.com/a/59951077/3096593

【参考方案1】：

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

请参阅here 获取快速教程，here 获取参考指南。可以使用 Designer 中的编辑器分配样式表，或使用 setStylesheet(QString) 作为字符串传递。使用 Designer 肯定更容易，因为这样您就可以在运行之前查看小部件的外观。

现在，针对您的具体问题。 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;

对于最后一个，我们专门只覆盖水平分割器，因为某些属性 - 如顶部和底部边距，以及如果我们更改垂直分割器需要不同的宽度。

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

【讨论】：

感谢今天对我的帮助。它应该响应悬停属性吗？我希望当用户悬停时它会变黑，但QSplitter::handle:hover 似乎没有奏效。

【参考方案2】：

在不涉及样式表的所有血腥细节的情况下，我可以给你几个选择：

1) 您可以在拆分器中布局几个 QFrame，为它们提供布局并将您的小部件放入这些框架中。您可以使用布局的间距选项（参见 QLayout::setContentsMargin()）在小部件周围添加一些间距。

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

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

如果您正在使用 Qt 进行任何类型的 GUI 设计，我强烈建议您学习所有有关样式表的知识，它们是您的朋友。有关一些文档，请参阅 the Qt style sheets reference。

【参考方案3】：

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

【讨论】：

这对于真正让它绘制一些东西没有任何作用，它只是让不可见的手柄更宽