Qt: Styling QTabWidget

Question

sto usando Qt e ho una messa a punto QTabWidget nell'editor Designer Qt, si può vedere in figura 1.

Come si può vedere dopo TAB4 c'è uno spazio vuoto fino al bordo destro, in qualche modo ho bisogno di riempire quello spazio con un colore, come in figura 2 (la cosa migliore sarebbe quella di essere in grado di impostare un sbiadimento del colore). O un'altra soluzione sarebbe che le linguette galleggiante per coprire l'intero schermo.

Io uso il seguente foglio di stile in questo momento:

QTabWidget::tab-bar {

 }

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

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

C'è un modo per impostare il colore di sfondo del QTabBar utilizzando fogli di stile Qt? O posso ottenere le schede galleggiante verso il bordo utilizzando i fogli di stile Qt?

EDIT: Ho cercato la soluzione che Caleb Huitt - cjhuitt suggerito di seguito. Mi piace molto l'idea di fare le schede espandono ma non può farlo funzionare.

In Qt Designer Editor mi fate clic destro sul mio QTabWidget -> "Promuovere Per ..." e scegliere "il nome della classe di base": QTabWidget "Nome di classe Promosso": ExpandableTabWidget e poi clicco aggiungere e quindi promuovere.

Nel metodo init del widget che contiene il mio QTabWidget Ho impostato

ui.tabWidget->SetTabsExpanding(true);

Tutto sta costruendo bene, ma il QTabbar non si espande.

Sto facendo qualcosa di sbagliato?

Grazie!

Answer 1

Sia espansione schede e colorare lo sfondo può essere realizzato utilizzando fogli di stile.

Per schede espansione, un foglio di stile può essere applicato alle linguette che imposta la larghezza di una frazione della larghezza totale del QTabWidget. Dal momento che dovrà essere aggiornato sulla ridimensionamento del foglio di stile, viene applicato utilizzando un filtro eventi. Vedere il primo esempio di codice di seguito.

Anche se lo sfondo della barra delle schede può essere impostata, la barra delle schede non riempie tutto lo spazio al di sopra del riquadro della scheda. E 'il contenitore (o widget di genitore) che sta mostrando attraverso. Per controllare la colorazione di tale zona, mettere la QTabWidget in un QWidget e impostare il foglio di stile sul contenitore. Vedere secondo codice esempio riportato di seguito.

schede Espansione:

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

Sfondo accanto a schede:

#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

Come la vedo io, avete due opzioni, a seconda di cosa si vuole fare.

Per riempire lo sfondo con il colore:

Approfitta delle trasparenza di tale porzione del widget di scheda.

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

Questo rende il bg widget di tutto arancione, ma poiché la maggior parte del widget scheda trarrà sul widget bg, vedrete solo il colore arancione in cui il widget di scheda non pesca.

Per rendere le schede espandono:

Ho pensato che questo sarebbe stato più facile di quello che è, ma si deve fondamentalmente alla sottoclasse QTabWidget al fine di ottenere l'accesso al widget barra delle schede utilizza.

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

Si sarebbe quindi sia bisogno di rendere la vostra classe ExpandableTabWidget in un plugin e utilizzarlo in progettista, o si potrebbe promuovere il tuo widget di scheda per essere di tipo ExpandableTabWidget e impostare il valore in espansione nel codice. Se si sceglie di fare la promozione, non sarà possibile visualizzare i risultati desiderati in designer, ma si avrà quando si esegue il programma.

Answer 3

su Qt 4.5 c'è una nuova proprietà che controllano il rendering widget di scheda, denominata documentMode . Basta chiamare tabWidget->setDocumentMode(true) e impostare il colore del QTabBar sfondo utilizzando i fogli di stile.

Da documentazione Qt:

  

Questa struttura contiene o meno il widget di scheda è reso in un modo adatto per le pagine del documento. Questa è la stessa modalità documento su Mac OS X.

     

Quando questa proprietà è impostata non è reso telaio widget di scheda. Questa modalità è utile per mostrare le pagine del documento-tipo in cui la pagina copre la maggior parte della zona widget di scheda.

Answer 4

Ho avuto lo stesso problema qualche tempo fa. Ho realizzato che facendo "grande" bordo superiore, e in movimento barra delle schede con un margine