Z-order of QTab in a QTabWidget



  • Hi. I'm trying to change the Z-order of a tabs in a QTabWidget.

    The selected QTab is on top of the other tabs, but from left to right, the tabs goes from under to the top. I Mean, the first tab is under the second tab, that is under the third tab, etc.. We can see this order if we are using a negative margin to get the tabs overlapping each other.

    I need to change this order to get my first tab over the second one and the second one over the third one.. so an order from top to under..

    I tried the css z-index properties without success and i did'nt find any documentation on how to change this z-order. Is somebody having an idea how to change that?

    I also tried to change the creating order of these tabs and also the way they are added to the QTabWidget with a insert (QTabWidget.insertTab()) at position 0 instead of just adding tabs with QTabWidget.addTab().. always the same thing..

    here a picture that explain the problem:

    !http://i.imgur.com/Wo35D.png(Tab order example)!



  • I'm not sure if that is possible.
    As the sigle tab items are no widgets, they have no z-order.
    perhaps you can subclass QTabBar and reimplement the painting to achieve that?



  • will try that!

    super thank's :D



  • I've written a class to add to QTabWidget shadows on each size of a tab. If you want i'll post relevant code.



  • Sounds like an interesting class, I'd love to see it!



  • p-himik,

    you could make a wiki codesnippet out of it, couldn't you?



  • TabWidget.h
    @
    class TabWidget : public QTabWidget
    {
    Q_OBJECT

    QWidget* leftShadow_;
    QWidget* rightShadow_;
    
    void showEvent( QShowEvent* event );
    

    public:
    explicit TabWidget( QWidget* parent = 0 );

    private slots:
    void tabChanged( int tabNumber );
    };@

    TabWidget.cpp
    @
    TabWidget::TabWidget( QWidget* parent ) :
    QTabWidget( parent ),
    leftShadow_( new QWidget( this ) ),
    rightShadow_( new QWidget( this ) )
    {
    connect( this,
    SIGNAL( currentChanged( int ) ),
    SLOT( tabChanged( int ) ) );
    leftShadow_->setObjectName( "leftshadow" ); // with object name you can easily assign a stylesheet
    leftShadow_->setFixedWidth( 10 ); // don't remeber why i did this constant. I think it should be in the stylesheet
    leftShadow_->setFixedHeight( tabBar()->height() );
    rightShadow_->setObjectName( "rightshad--ow" );
    rightShadow_->setFixedWidth( 10 );
    rightShadow_->setFixedHeight( tabBar()->height() );
    }

    void TabWidget::tabChanged( int tabNumber )
    {
    const QTabBar* tabBar = this->tabBar();
    const QRect tabRect = tabBar->tabRect( tabNumber );
    if( tabNumber == 0 )
    {
    leftShadow_->hide();
    }
    else
    {
    QPoint leftPos = tabBar->mapTo( this, tabRect.bottomLeft() );
    leftShadow_->setFixedHeight( tabRect.height() - 4 ); // this '4' is the difference between heights of selected and unselected tabs
    leftShadow_->move( leftPos.x() - leftShadow_->width(),
    leftPos.y() - leftShadow_->height() + 1 );
    leftShadow_->show();
    }
    if( tabNumber == ( count() - 1 ) )
    {
    rightShadow_->hide();
    }
    else
    {
    QPoint rightPos = tabBar->mapTo( this, tabRect.bottomRight() );
    rightShadow_->setFixedHeight( tabRect.height() - 4 );
    rightShadow_->move( rightPos.x(),
    rightPos.y() - rightShadow_->height() + 1 );
    rightShadow_->show();
    }
    }

    void TabWidget::showEvent ( QShowEvent * event )
    {
    Q_UNUSED( event )
    tabChanged( currentIndex() );
    }
    @



  • Gerolf, ok. I'll do it today.
    And here is the stylesheet:
    @#leftshadow
    {
    background-color: qlineargradient(spread:pad,x1:0.312,y1:0.419545,x2:1,y2:0,stop:0 rgba(0, 0, 0, 0),stop:0.817778 rgba(80, 80, 80, 193),stop:1 rgba(80, 80, 80, 255));
    }
    #rightshadow
    {
    background-color: qlineargradient(spread:pad,x1:0.680,y1:0.419545,x2:0,y2:0,stop:0 rgba(0, 0, 0, 0),stop:0.817778 rgba(80, 80, 80, 193),stop:1 rgba(80, 80, 80, 255));
    }@



  • Hi p-himik:

    a good idea would be to includ esome image to show, how it looks like :-)



  • Here
    !http://db.tt/NQA6ogZW(TabWidget)!
    The left is a standard QTabWidget promoted to TabWidged and the right is a fancy one.





  • Hey, this looks very nice ;-)
    Thank you for sharing this.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.