Qt: Styling 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?

EDIT: Я пробовал решение, предложенное Caleb Huitt-cjhuitt ниже. Мне очень нравится идея расширения вкладок, но я не могу заставить ее работать.

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

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

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