Qt：QTabWidget 样式

发布于 2024-08-25 15:46:44 字数 1129 浏览 9 评论 0原文

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

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

我现在使用以下样式表：

QTabWidget::tab-bar {

 }

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

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

Is there a way to set the background color of the QTabBar using Qt stylesheets?或者我可以使用 Qt 样式表让选项卡浮到边缘吗？

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

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

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

ui.tabWidget->SetTabsExpanding(true);

一切都构建良好，但 QTabbar 不会扩展。

我做错了什么吗？

谢谢！

原文

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

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

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?

EDIT:
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.

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.

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

ui.tabWidget->SetTabsExpanding(true);

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

Am I doing something wrong?

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

-柠檬树下少年和吉他 2024-09-01 15:46:44

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

对于展开选项卡，可以将样式表应用于选项卡，将其宽度设置为 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();
}

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

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.

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.

Expanding tabs:

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

Background beside tabs:

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

回复收藏 0 原文

阳光的暖冬 2024-09-01 15:46:44

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

用颜色填充背景：

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

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 类型并设置扩展值在代码中。如果您选择进行升级，您将不会在设计器中看到您想要的结果，但在运行程序时您会看到。

As I see it, you have two options, depending on what you want to do.

To fill the background with color:

Take advantage of the transparency of that portion of the tab widget.

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

This makes the bg widget all orange, but since most of the tab widget will draw over the bg widget, you'll only see the orange where the tab widget doesn't draw.

To make the tabs expand:

I thought this would be easier than it is, but you basically have to subclass QTabWidget in order to get access to the tab bar widget it uses.

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

You would then either need to make your ExpandableTabWidget class into a plugin and use it in designer, or you could promote your tab widget to be of type ExpandableTabWidget and set the expanding value in code. If you choose to do the promotion, you won't see the results you want in designer, but you will when you run your program.

回复收藏 0 原文