2010-03-19 11 views
10

Ich bin mit Qt und ich habe eine QTabWidget Setup im Qt Designer-Editor, können Sie es im Bild sehen 1.Qt: Styling QTabWidget

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

Wie Sie nach Tab4 sehen dort eine ist leerer Platz bis zum rechten Rand, irgendwie muss ich diesen Raum mit einer Farbe füllen, wie in Bild 2 (das Beste wäre, eine verblassende Farbe einstellen zu können). Oder eine andere Lösung wäre, dass die Tabs herausschweben, um den ganzen Bildschirm abzudecken.

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

Ich benutze das folgende Stylesheet jetzt:

QTabWidget::tab-bar { 

} 

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

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

Gibt es eine Möglichkeit, die Hintergrundfarbe des QTabBar mit Qt Sheets zu setzen? Oder kann ich die Registerkarten mithilfe von Qt-Stylesheets an den Rand treiben?

EDIT: Ich habe versucht, die Lösung, die Caleb Huitt - cjhuitt unten vorgeschlagen. Ich mag die Idee, die Tabs zu erweitern, aber nicht funktionieren zu lassen.

In Qt Designer Editor ich direkt auf meine QTabWidget klicken -> „fördern ...“ und „Basisklassenname“ wählen: QTabWidget „Promoted Klassenname“: ExpandableTabWidget und dann fördern ich klicken Sie auf Hinzufügen und dann.

In der Init-Methode des Widgets, das mein QTabWidget hält stelle ich

ui.tabWidget->SetTabsExpanding(true); 

Alles baut in Ordnung, aber die QTabbar sich nicht ausdehnt.

Mache ich etwas falsch?

Danke!

+0

Haben Sie versucht, Tab-Bar eine Hintergrundfarbe zu geben? Was war das Ergebnis ? – smerlin

+0

Ja, getestet, aber nichts ist passiert. Irgendwelche Ideen? – Martin

+0

Ich kann Ihnen nicht viel helfen, aber rate Ihnen, einen Blick auf diese Webseite zu werfen, es sei denn, Sie haben bereits http://doc.trolltech.com/4.6/stylesheet-examples.html#customizing-qtabwidget-and-qtabbar –

Antwort

17

Beide erweitern Tabs und Färbung des Hintergrunds kann mithilfe von Stylesheets durchgeführt werden.

Zum Erweitern von Tabs kann ein Stylesheet auf die Tabs angewendet werden, das die Breite auf einen Bruchteil der Gesamtbreite des QTabWidget setzt. Da das Stylesheet beim Ändern der Größe aktualisiert werden muss, wird es mithilfe eines Ereignisfilters angewendet. Siehe ersten Beispielcode unten.

Obwohl der Hintergrund der Registerkartenleiste festgelegt werden kann, füllt die Registerkartenleiste nicht den gesamten Bereich über der Registerkartenleiste aus. Es ist der Container (oder das Eltern-Widget), der sich zeigt. Um die Färbung dieses Bereichs zu steuern, legen Sie die QTabWidget in eine QWidget und legen Sie das Stylesheet auf den Container. Siehe zweiten Beispielcode unten.

Expanding Registerkarten:

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

Hintergrund neben Registerkarten:

#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

Screenshots für Beispiele: http://img132.imageshack.us/i/expandingtabs.png/ http: //img121.imageshack. uns/i/colorbesidetabs.png/ – baysmith

+0

wirklich gute Antwort! Ich habe stundenlang mit diesem Problem gekämpft, bevor ich deine Antwort gefunden habe :-) –

+0

Ich glaube nicht, dass dies auf OSX funktioniert. – Volomike

3

Wie ich es sehe, haben Sie zwei Möglichkeiten, je nachdem, was Sie tun möchten.

Um den Hintergrund mit Farbe zu füllen:

Nutzen Sie die Transparenz des Teils des Lappens-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); 

Dies macht das bg-Widget alle orange, aber die meisten der Tab-Widget ziehen über das bg-Widget da, werden Sie nur die orangefarbene sehen, wo die Registerkarte Widget ziehen nicht.

Um den Tabs erweitern zu machen: sie nutzt

Ich dachte, das wäre einfacher, als es ist, aber Sie haben im Grunde QTabWidget zu erhalten, um den Zugriff auf die Tab-Leiste Widget Unterklasse.

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

Sie würden dann entweder benötigen ExpandableTabWidget Klasse in ein Plugin zu machen und es in Designer verwenden, oder Sie können Ihr Tab Widget Typ zu sein, in Code ExpandableTabWidget und stellen Sie den wachsenden Wert zu fördern. Wenn Sie sich entscheiden, die Aktion durchzuführen, werden die Ergebnisse, die Sie im Designer sehen möchten, nicht angezeigt, aber Sie werden dies tun, wenn Sie Ihr Programm ausführen.

+0

Vielen Dank für Ihre Ideen! Ich habe meine ursprüngliche Frage mit einigen Fragen bezüglich der erweiterten Lösung aktualisiert. Können Sie sich das bitte anschauen? Danke noch einmal! – Martin

+0

Ich glaube nicht, dass dies auf OSX funktioniert. – Volomike

0

Ich hatte das gleiche Problem vor einiger Zeit. Ich erreichte es, indem ich "großen" oberen Rand machte, und bewegliche Tab-Leiste mit Rand

+0

Danke! Aber die Sache ist, dass ich auf meinem backgroud verblassen muss, sonst wird das funktionieren. – Martin

+0

was meinst du mit verblassen?Sie können den Farbverlauf als Rahmenfarbe festlegen. –

+0

Hier ist ein Beispiel, was Sie mit Qt CSS erreichen können: http://pl.tinypic.com/r/24lsn5v/5 und hier ist CSS: QTabWidget :: pane {border: 0; border-top: 30px fester qlineargradient (x1: 0, y1: 0, x2: 0, y2: 1, Stop: 0 rot, Stop: 1 gelb); Hintergrund: gelb; } QTabWidget :: tab-bar {top: 30px; Hier} –

2

auf qt 4.5 gibt es eine neue Eigenschaft, die die Registerkarte Widget Rendering steuern, genannt documentMode. Rufen Sie einfach tabWidget->setDocumentMode(true) an und legen Sie die Hintergrundfarbe der QTabBar mithilfe der Stylesheets fest.

Von Qt Dokumentation:

Diese Eigenschaft enthält, ob die Registerkarte Widget in einem Modus, geeignet für Dokumentseiten gemacht wird. Dies ist mit dem Dokumentmodus unter Mac OS X identisch.

Wenn diese Eigenschaft festgelegt wird, wird der Registerkarten-Widget-Frame nicht gerendert. Dieser Modus ist nützlich, um Seiten vom Typ Dokument anzuzeigen, bei denen die Seite den größten Teil des Registerkarten-Widgetbereichs abdeckt.