Qt：QTabWidget 样式

Question

我正在使用 Qt，并且在 Qt Designer 编辑器中设置了 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 - cjhuit 建议的解决方案。我真的很喜欢让选项卡展开的想法，但无法让它工作。

在 Qt Designer 编辑器中，我右键单击 QTabWidget->“升级到...”并选择“基类名称”：QTabWidget “升级类名称”：ExpandableTabWidget 然后我点击添加，然后点击推广。

在保存我的 QTabWidget 的小部件的 init 方法中，我设置了

ui.tabWidget->SetTabsExpanding(true);

一切都构建良好，但 QTabbar 没有展开。

我做错了什么吗？

谢谢！

Answer 1

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

对于扩展选项卡，可以将样式表应用于选项卡，将其宽度设置为

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

Answer 2

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

用颜色填充背景：

利用选项卡小部件该部分的透明度。

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

类型并在代码中设置扩展值。如果您选择进行促销，您将不会在设计器中看到您想要的结果，但在运行程序时您会看到。

Answer 3

在 qt 4.5 上，有一个控制选项卡小部件渲染的新属性，称为 documentMode。只需调用

tabWidget->setDocumentMode(true)

并使用样式表设置 QTabBar 的背景颜色即可。

来自 Qt 文档：

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

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

Answer 4

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

Answer 5

替代选项：
将各个选项卡的宽度设置为 230%

QTabBar::tab {
宽度：234%；
}