Qt:Стилизация QTabWidget

Question

Я использую Qt, и у меня есть настройка QTabWidget в редакторе Qt Designer, вы можете видеть это на рисунке 1.

Как вы можете видеть, после Tab4 остается пустое пространство до самого правого края, каким-то образом мне нужно заполнить это пространство цветом, как на рисунке 2 (лучше всего было бы иметь возможность установить исчезающий цвет).Или другое решение заключалось бы в том, что вкладки всплывают и занимают весь экран.

Прямо сейчас я использую следующую таблицу стилей:

QTabWidget::tab-bar {

 }

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

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

Есть ли способ установить цвет фона QTabBar с помощью таблиц стилей Qt?Или я могу вывести вкладки на край, используя таблицы стилей Qt?

Редактировать:Я пробовал решение, которое Калеб Хьюитт - джуитт предложил ниже.Мне действительно нравится идея расширить вкладки, но я не могу заставить ее работать.

В редакторе Qt Designer я щелкаю правой кнопкой мыши на моем QTabWidget-> "Продвинуть в ..." и выбираю "Имя базового класса".:QTabWidget "Расширенное имя класса":Расширяемый TabWidget и затем я нажимаю добавить, а затем Продвигать.

В методе init виджета, который содержит мой QTabWidget, я устанавливаю

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 полностью оранжевым, но поскольку большая часть виджета tab будет отображаться поверх виджета bg, вы увидите оранжевый цвет только там, где виджет tab не отображается.

Чтобы заставить вкладки расширяться:

Я думал, что это будет проще, чем есть на самом деле, но вам в основном нужно создать подкласс 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 создайте класс в плагине и используйте его в конструкторе, или вы могли бы сделать свой виджет tab похожим на ExpandableTabWidget и установите расширяющееся значение в коде.Если вы решите провести рекламную акцию, вы не увидите желаемых результатов в designer, но увидите их при запуске своей программы.

Answer 3

В qt 4.5 появилось новое свойство, управляющее отображением виджета tab, называемое Режим документирования.Просто позвони tabWidget->setDocumentMode(true) и установите цвет фона QTabBar с помощью таблиц стилей.

Из документации Qt:

Это свойство определяет, отображается ли виджет tab в режиме, подходящем для страниц документа.Это то же самое , что и режим документа в Mac OS X.

Когда это свойство установлено, рамка виджета tab не отображается.Этот режим полезен для отображения страниц типа документа, где страница занимает большую часть области виджета вкладки.

Answer 4

Некоторое время назад у меня была такая же проблема.Я добился этого, сделав "большую" верхнюю границу и переместив панель вкладок с полями