Qt:造型QTabWidget [英] Qt: Styling QTabWidget

问题描述

我正在使用Qt，并且在Qt Designer编辑器中有一个QTabWidget设置，您可以在图1中看到它.

I'm using Qt and I have a QTabWidget setup in the Qt Designer Editor, you can see it in picture 1.

如您所见，在Tab4之后，一直到右边缘都有一个空白空间，以某种方式，我需要用一种颜色填充该空间，如图2所示(最好的方法是设置一个褪色).或另一种解决方案是使选项卡浮出以覆盖整个屏幕.

As you can see after Tab4 there is an empty space all the way to the right edge, in someway I need to fill that space with a color, like in picture 2 (the best thing would be to be able to set a fading color). Or another solution would be that the tabs float out to cover the whole screen.

我现在使用以下样式表:

I use the following stylesheet right now:

QTabWidget::tab-bar {

 }

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

 QTabBar::tab:selected {
  background: lightgray;
 }

是否可以使用Qt样式表设置QTabBar的背景颜色?还是可以使用Qt样式表使选项卡浮动到边缘?

Is there a way to set the background color of the QTabBar using Qt stylesheets? Or can I get the tabs floating out to the edge using Qt stylesheets?

我一直在尝试Caleb Huitt-cjhuitt在下面提出的解决方案.我真的很喜欢使标签扩展的想法，但无法使其正常工作.

I have been trying the solution that Caleb Huitt - cjhuitt suggested below. I really like the idea of making the tabs expand but can't get it working.

在Qt Designer编辑器中，我右键单击QTabWidget->"Promote To ..."，然后选择"Base class name":QTabWidget 升级的类名":ExpandableTabWidget 然后单击添加，然后单击升级.

In Qt Designer Editor I right click on my QTabWidget->"Promote To ..." and choose "Base class name": QTabWidget "Promoted class name": ExpandableTabWidget and then I click add and then Promote.

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

In the init method of the widget that holds my QTabWidget I set

ui.tabWidget->SetTabsExpanding(true);

一切正常，但QTabbar不能扩展.

Everything is building fine but the QTabbar doesn't expand.

我做错什么了吗?

谢谢！

推荐答案

使用样式表可以完成选项卡的扩展和背景的着色.

Both expanding tabs and coloring the background can be accomplished using style sheets.

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

For expanding tabs, a style sheet can be applied to the tabs which sets their width to a fraction of the total width of the QTabWidget. Since the style sheet will need to be updated upon resize, it is applied using an event filter. See first example code below.

尽管可以设置选项卡栏的背景，但是选项卡栏不会填满选项卡窗格上方的整个空间.它是通过显示的容器(或父窗口小部件).要控制该区域的颜色，请将QTabWidget放在QWidget中，然后在容器上放置样式表.请参见下面的第二个示例代码.

Although the background of the tab bar can be set, the tab bar doesn't fill the entire space above the tab pane. It is the container (or parent widget) which is showing through. To control the coloring of that area, put the QTabWidget in a QWidget and set the style sheet on the container. See second example code below.

展开标签:

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

这篇关于Qt:造型QTabWidget的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！