Qt: Styling QTabWidget

Question

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

picture 1 http://i40.tinypic.com/1109ba1.jpg

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

picture 2 http://i41.tinypic.com/zwmijr.jpg

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

QTabWidget::tab-bar { 

} 

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

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

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

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

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

В методе инициализации виджета, который держит мой 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

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

Answer 4

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

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

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

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