October 19, 2011

Oexal Oexal
Lab Rat
2 posts

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:

Tab order example

11 replies

October 19, 2011

Gerolf Gerolf
Robot Herder
3253 posts

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?

 Signature 

Nokia Certified Qt Specialist.
Programming Is Like Sex: One mistake and you have to support it for the rest of your life. (Michael Sinz)

October 19, 2011

Oexal Oexal
Lab Rat
2 posts

will try that!

super thank’s :D

October 20, 2011

p-himik p-himik
Lab Rat
263 posts

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

October 20, 2011

Andre Andre
Robot Herder
6395 posts

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

October 20, 2011

Gerolf Gerolf
Robot Herder
3253 posts

p-himik,

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

 Signature 

Nokia Certified Qt Specialist.
Programming Is Like Sex: One mistake and you have to support it for the rest of your life. (Michael Sinz)

October 20, 2011

p-himik p-himik
Lab Rat
263 posts

TabWidget.h

  1. class TabWidget : public QTabWidget
  2. {
  3.     Q_OBJECT
  4.  
  5.     QWidget* leftShadow_;
  6.     QWidget* rightShadow_;
  7.  
  8.     void showEvent( QShowEvent* event );
  9.  
  10. public:
  11.     explicit TabWidget( QWidget* parent = 0 );
  12.  
  13. private slots:
  14.     void tabChanged( int tabNumber );
  15. };

TabWidget.cpp

  1. TabWidget::TabWidget( QWidget* parent ) :
  2.     QTabWidget( parent ),
  3.     leftShadow_( new QWidget( this ) ),
  4.     rightShadow_( new QWidget( this ) )
  5. {
  6.     connect( this,
  7.              SIGNAL( currentChanged( int ) ),
  8.              SLOT( tabChanged( int ) ) );
  9.     leftShadow_->setObjectName( "leftshadow" ); // with object name you can easily assign a stylesheet
  10.     leftShadow_->setFixedWidth( 10 ); // don't remeber why i did this constant. I think it should be in the stylesheet
  11.     leftShadow_->setFixedHeight( tabBar()->height() );
  12.     rightShadow_->setObjectName( "rightshad--ow" );
  13.     rightShadow_->setFixedWidth( 10 );
  14.     rightShadow_->setFixedHeight( tabBar()->height() );
  15. }
  16.  
  17.  
  18. void TabWidget::tabChanged( int tabNumber )
  19. {
  20.     const QTabBar* tabBar = this->tabBar();
  21.     const QRect tabRect = tabBar->tabRect( tabNumber );
  22.     if( tabNumber == 0 )
  23.     {
  24.         leftShadow_->hide();
  25.     }
  26.     else
  27.     {
  28.         QPoint leftPos = tabBar->mapTo( this, tabRect.bottomLeft() );
  29.         leftShadow_->setFixedHeight( tabRect.height() - 4 ); // this '4' is the difference between heights of selected and unselected tabs
  30.         leftShadow_->move( leftPos.x() - leftShadow_->width(),
  31.                           leftPos.y() - leftShadow_->height() + 1  );
  32.         leftShadow_->show();
  33.     }
  34.     if( tabNumber == ( count() - 1 ) )
  35.     {
  36.         rightShadow_->hide();
  37.     }
  38.     else
  39.     {
  40.         QPoint rightPos = tabBar->mapTo( this, tabRect.bottomRight() );
  41.         rightShadow_->setFixedHeight( tabRect.height() - 4 );
  42.         rightShadow_->move( rightPos.x(),
  43.                            rightPos.y() - rightShadow_->height() + 1  );
  44.         rightShadow_->show();
  45.     }
  46. }
  47.  
  48.  
  49. void TabWidget::showEvent ( QShowEvent * event )
  50. {
  51.     Q_UNUSED( event )
  52.     tabChanged( currentIndex() );
  53. }

October 20, 2011

p-himik p-himik
Lab Rat
263 posts

Gerolf, ok. I’ll do it today.
And here is the stylesheet:

  1. #leftshadow
  2. {
  3.     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));
  4. }
  5. #rightshadow
  6. {
  7.     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));
  8. }

October 20, 2011

Gerolf Gerolf
Robot Herder
3253 posts

Hi p-himik:

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

 Signature 

Nokia Certified Qt Specialist.
Programming Is Like Sex: One mistake and you have to support it for the rest of your life. (Michael Sinz)

October 20, 2011

p-himik p-himik
Lab Rat
263 posts

Here
TabWidget
The left is a standard QTabWidget promoted to TabWidged and the right is a fancy one.

October 20, 2011

p-himik p-himik
Lab Rat
263 posts

Here is the snippet [developer.qt.nokia.com] in the wiki.

October 20, 2011

Scylla Scylla
Lab Rat
238 posts

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

 
  ‹‹ Missing meta object information with ActiveQt server      disabling/hiding a directory from QTreeView ››

You must log in to post a reply. Not a member yet? Register here!