Qt：样式化 QTabWidget

Posted 2023-02-21

【中文标题】Qt：样式化 QTabWidget

【英文标题】：Qt: Styling QTabWidget

【发布时间】：2011-01-29 15:52:30

【问题描述】：

我正在使用 Qt，我在 Qt Designer Editor 中有一个 QTabWidget 设置，您可以在图 1 中看到它。

正如您在 Tab4 之后看到的那样，一直到右边缘都有一个空白空间，在某种程度上我需要用颜色填充该空间，如图 2 所示（最好的办法是能够设置一个褪色）。或者另一种解决方案是选项卡浮动以覆盖整个屏幕。

我现在使用以下样式表：

QTabWidget::tab-bar 

 

 QTabBar::tab 
  background: gray;
  color: white;
  padding: 10px;
 

 QTabBar::tab:selected 
  background: lightgray;
 

有没有办法使用 Qt 样式表设置 QTabBar 的背景颜色？或者我可以使用 Qt 样式表让选项卡浮动到边缘吗？

编辑： 我一直在尝试 Caleb Huitt - cjhuitt 下面建议的解决方案。我真的很喜欢让选项卡展开但无法正常工作的想法。

在 Qt Designer Editor 中，我右键单击我的 QTabWidget->“Promote To ...”并选择“Base class name”：QTabWidget “升级类名”：ExpandableTabWidget 然后我点击添加，然后点击提升。

在包含我设置的 QTabWidget 的小部件的 init 方法中

ui.tabWidget->SetTabsExpanding(true);

一切正常，但 QTabbar 没有展开。

我做错了吗？

谢谢！

【问题讨论】：

你试过给标签栏设置背景色吗？结果如何？

是的，测试过，但什么也没发生。有什么想法吗？

谢谢！但这就是我迄今为止一直在玩的东西，但没有结果。这不可能吗？

Q_PROPERTY 行可能只会在您将扩展选项卡小部件制作成插件时对您有所帮助。否则，如果它正在生成警告，您可以将其删除。

另外，关于扩展标签小部件，我假设这会起作用，我自己从来没有做过。如果它不起作用，您可以很容易地创建自己的选项卡小部件，在 QFrame 上方使用 QTabBar，在 QFrame 内部使用 QStackedWidget。当然，您需要添加一些逻辑来处理切换。不过，我会多花点时间尝试找出标签没有展开的原因。

【参考方案1】：

在我看来，您有两种选择，具体取决于您想做什么。

用颜色填充背景：

利用标签小部件该部分的透明度。

QWidget *bg = new QWidget( parent );
bg->setAutoFillBackground( true );
QPalette bg_palette = bg->palette();
bg_palette.setColor( QPalette::Window, QColor( "orange" ) );
bg->setPalette( bg_palette );

QHBoxLayout layout = new QHBoxLayout();
layout->setMargin( 0, 0, 0, 0 );
layout->setSpacing( 0 );
bg->setLayout( layout );

QTabWidget *tab_widget = new QTabWidget();
// set up tab_widget however you want...
layout->addWidget( tab_widget );

这会使 bg 小部件全为橙色，但由于大多数选项卡小部件将绘制在 bg 小部件上，因此您只会看到选项卡小部件未绘制的橙色。

使标签展开：

我认为这会比现在更容易，但您基本上必须继承 QTabWidget 才能访问它使用的标签栏小部件。

class ExpandableTabWidget : public QTabWidget

    Q_OBJECT;
    Q_PROPERTY( bool expanding_tabs READ Expanding WRITE SetExpanding );

public:
    ExpandableTabWidget( QWidget *parent = NULL ) : QTabWidget( parent )
    
    

    bool Expanding() const
    
        return tabBar()->expanding();
    

    void SetTabsExpanding( bool expanding = true )
    
        tabBar()->setExpanding( expanding );
    
;

然后您需要将您的 ExpandableTabWidget 类变成一个插件并在设计器中使用它，或者您可以将您的选项卡小部件提升为 ExpandableTabWidget 类型并在代码中设置扩展值。如果您选择进行促销，您将不会在设计器中看到您想要的结果，但在您运行程序时会看到。

【讨论】：

非常感谢您的想法！我用一些关于扩展解决方案的问题更新了我上面的原始问题，你能看一下吗？再次感谢！

【参考方案2】：

我前段时间遇到了同样的问题。我通过制作“大”的顶部边框和移动带有边距的标签栏来实现它

【讨论】：

谢谢！但问题是我需要在我的背景上褪色，否则会起作用。

褪色是什么意思？您可以将渐变设置为边框颜色

这里是你可以用 Qt CSS 实现什么的例子：pl.tinypic.com/r/24lsn5v/5 这里是 CSS：QTabWidget::pane border: 0;边框顶部：30px 实心 qlineargradient(x1:0, y1:0, x2:0, y2:1, stop: 0 red, stop: 1 yellow);背景：黄色； QTabWidget::tab-bar top: 30px;

【参考方案3】：

扩展选项卡和为背景着色都可以使用样式表来完成。

对于扩展选项卡，可以将样式表应用于选项卡，将其宽度设置为QTabWidget 总宽度的一小部分。由于样式表需要在调整大小时更新，因此使用事件过滤器应用它。请参阅下面的第一个示例代码。

虽然可以设置标签栏的背景，但标签栏不会填满标签窗格上方的整个空间。它是正在显示的容器（或父小部件）。要控制该区域的颜色，请将QTabWidget 放入QWidget 并在容器上设置样式表。请参阅下面的第二个示例代码。

扩展标签：

#include <QtGui>

// Sets the style sheet of the QTabWidget to expand the tabs.
static void expandingTabsStyleSheet(QTabWidget *tw)

    tw->setStyleSheet(QString("QTabBar::tab  width: %1px;  ")
                      .arg(tw->size().width()/tw->count()));


// On resize events, reapply the expanding tabs style sheet
class ResizeFilter : public QObject

    QTabWidget *target;
public:
    ResizeFilter(QTabWidget *target) : QObject(target), target(target) 

    bool eventFilter(QObject *object, QEvent *event)
    
        if (event->type() == QEvent::Resize)
            expandingTabsStyleSheet(target);
        return false;
    
;


int main(int argc, char * argv[])

  QApplication app(argc, argv);

  QTabWidget *tw = new QTabWidget;
  tw->installEventFilter(new ResizeFilter(tw));
  tw->addTab(new QWidget, "Tab1");
  tw->addTab(new QWidget, "Tab2");
  tw->addTab(new QWidget, "Tab3");

  tw->show();

  return app.exec();

标签旁边的背景：

#include <QtGui>

int main(int argc, char * argv[])

  QApplication app(argc, argv);

  QWidget *container = new QWidget;
  container->setStyleSheet("background: qlineargradient( x1: 0, y1: 0, x2: 1, y2
: 0, stop: 0 black, stop: 1 blue);");

  QHBoxLayout *layout = new QHBoxLayout(container);
  layout->setContentsMargins(0, 0, 0, 0);

  QTabWidget *tw = new QTabWidget(container);
  layout->addWidget(tw);
  tw->setStyleSheet(
      "QTabBar::tab  background: gray; color: white; padding: 10px;  "
      "QTabBar::tab:selected  background: lightgray;  "
      "QTabWidget::pane  border: 0;  "
      "QWidget  background: lightgray;  ");
  tw->addTab(new QWidget, "Tab1");
  tw->addTab(new QWidget, "Tab2");
  tw->addTab(new QWidget, "Tab3");

  container->show();

  return app.exec();

【讨论】：

非常好的答案！在找到你的答案之前，我已经与这个问题作斗争了几个小时:-)

在 macOS 上尝试这个，我发现屏幕一直在扩大宽度，直到我在调试器中停止它！但是在 ios 上可以正常工作，非常感谢。

【参考方案4】：

在 qt 4.5 中，有一个新属性可以控制标签小部件的呈现，称为 documentMode。只需调用tabWidget->setDocumentMode(true) 并使用样式表设置QTabBar 的背景颜色。

来自 Qt 文档：

此属性保存选项卡小部件是否以适合文档页面的模式呈现。这与 Mac OS X 上的文档模式相同。

设置此属性时，不会呈现选项卡小部件框架。此模式对于显示页面覆盖大部分选项卡小部件区域的文档类型页面很有用。