Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to set the QTabWidget background image when there is not any widget page
QtWS25 Last Chance

How to set the QTabWidget background image when there is not any widget page

Scheduled Pinned Locked Moved Solved General and Desktop
18 Posts 7 Posters 1.1k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • H Offline
    H Offline
    Hanson
    wrote on 29 May 2023, 08:20 last edited by
    #1

    Hi,guys!I want to set the background image when first show QTabWidget that there is no widgets.
    Any help is appreciated!
    fe3cb121-8613-4335-b98e-95e0b91b3ca6-image.png

    “Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.”
    —— Martin Golding

    J 1 Reply Last reply 29 May 2023, 08:27
    0
    • H Offline
      H Offline
      Hanson
      wrote on 30 May 2023, 01:43 last edited by Hanson
      #15

      Thanks to everyone who answered.You really help me a lot.And Finally I found a solution what I want.
      I found that the empty QTabWidget contains a QStackedWidget.

      QList<QWidget*> widgets = ui->tabWidget_2->findChildren<QWidget*>();
      for (auto wid : widgets)
      {
      	auto meta = wid->metaObject();
      	qDebug() << meta->className();
      	qDebug() << wid->objectName();
      	qDebug() << "==============";
      }
      

      And there is the output

      QStackedWidget
      "qt_tabwidget_stackedwidget"
      ==============
      QTabBar
      "qt_tabwidget_tabbar"
      ==============
      QToolButton
      ""
      ==============
      QToolButton
      ""
      ==============
      

      So I write a qss like this, and it really works.

      QTabWidget>QStackedWidget#qt_tabwidget_stackedwidget
      {
      background-image: url(:/img/background.png);
      }
      

      With @Bonnie suggestion, it works perfectly.

      @Bonnie said in How to set the QTabWidget background image when there is not any widget page:

      for every widget added to the tabwidget, set autoFillBackground to true.

      “Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.”
      —— Martin Golding

      1 Reply Last reply
      0
      • H Hanson
        29 May 2023, 08:20

        Hi,guys!I want to set the background image when first show QTabWidget that there is no widgets.
        Any help is appreciated!
        fe3cb121-8613-4335-b98e-95e0b91b3ca6-image.png

        J Online
        J Online
        JonB
        wrote on 29 May 2023, 08:27 last edited by
        #2

        @Hanson
        "No widgets" where? Do you mean that each Tab is supposed to show widgets on itself? And if there are none then the frame to the right should show an image (bit not if the current tab has any widgets)? Or, do you mean something about that right-hand frame should show widgets (from where)?

        H 1 Reply Last reply 29 May 2023, 08:47
        0
        • J JonB
          29 May 2023, 08:27

          @Hanson
          "No widgets" where? Do you mean that each Tab is supposed to show widgets on itself? And if there are none then the frame to the right should show an image (bit not if the current tab has any widgets)? Or, do you mean something about that right-hand frame should show widgets (from where)?

          H Offline
          H Offline
          Hanson
          wrote on 29 May 2023, 08:47 last edited by
          #3

          @JonB said in How to set the QTabWidget background image when there is not any widget page:

          And if there are none then the frame to the right should show an image (bit not if the current tab has any widgets)?

          Yes!There none and the tabwidget show an image.

          “Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.”
          —— Martin Golding

          J 1 Reply Last reply 29 May 2023, 08:54
          0
          • H Hanson
            29 May 2023, 08:47

            @JonB said in How to set the QTabWidget background image when there is not any widget page:

            And if there are none then the frame to the right should show an image (bit not if the current tab has any widgets)?

            Yes!There none and the tabwidget show an image.

            J Online
            J Online
            JonB
            wrote on 29 May 2023, 08:54 last edited by
            #4

            @Hanson
            So just put a slot on signal void QTabWidget::currentChanged(int index) which looks whether the new current tab has any child widgets/page or not and set the right-hand frame's background image on or off accordingly.

            H 1 Reply Last reply 29 May 2023, 09:29
            1
            • J JonB
              29 May 2023, 08:54

              @Hanson
              So just put a slot on signal void QTabWidget::currentChanged(int index) which looks whether the new current tab has any child widgets/page or not and set the right-hand frame's background image on or off accordingly.

              H Offline
              H Offline
              Hanson
              wrote on 29 May 2023, 09:29 last edited by
              #5

              @JonB Emm, I think you misunderstood my thought.The right widget is the QTabWidget that has no any page,and I want to show the background image when this QTabWidget show first time and without any page.
              8e3eed4c-8e85-4bb9-8a73-ba7bcbd706f2-image.png

              “Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.”
              —— Martin Golding

              H J 2 Replies Last reply 29 May 2023, 09:30
              0
              • H Hanson
                29 May 2023, 09:29

                @JonB Emm, I think you misunderstood my thought.The right widget is the QTabWidget that has no any page,and I want to show the background image when this QTabWidget show first time and without any page.
                8e3eed4c-8e85-4bb9-8a73-ba7bcbd706f2-image.png

                H Offline
                H Offline
                Hanson
                wrote on 29 May 2023, 09:30 last edited by
                #6

                @JonB And the left side QTabWidget has nothing to do with this question.

                “Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.”
                —— Martin Golding

                J 1 Reply Last reply 29 May 2023, 11:20
                0
                • H Hanson
                  29 May 2023, 09:30

                  @JonB And the left side QTabWidget has nothing to do with this question.

                  J Online
                  J Online
                  JonB
                  wrote on 29 May 2023, 11:20 last edited by
                  #7

                  @Hanson said in How to set the QTabWidget background image when there is not any widget page:

                  @JonB And the left side QTabWidget has nothing to do with this question.

                  That's really helpful to say now, it's as clear as mud! I previously asked for clarification.

                  So, I don't know, did you try setting the QTabWidget itself's background instead of that for any "pages"?

                  A H 2 Replies Last reply 29 May 2023, 11:57
                  3
                  • J JonB
                    29 May 2023, 11:20

                    @Hanson said in How to set the QTabWidget background image when there is not any widget page:

                    @JonB And the left side QTabWidget has nothing to do with this question.

                    That's really helpful to say now, it's as clear as mud! I previously asked for clarification.

                    So, I don't know, did you try setting the QTabWidget itself's background instead of that for any "pages"?

                    A Offline
                    A Offline
                    Axel Spoerl
                    Moderators
                    wrote on 29 May 2023, 11:57 last edited by
                    #8

                    An empty tab doesn’t show anything, neither does an empty widget, as @JonB said.
                    If you want to show an image to represent an empty default, populate the empty tab with a label that shows the desired image.

                    Software Engineer
                    The Qt Company, Oslo

                    J 1 Reply Last reply 29 May 2023, 12:04
                    0
                    • A Axel Spoerl
                      29 May 2023, 11:57

                      An empty tab doesn’t show anything, neither does an empty widget, as @JonB said.
                      If you want to show an image to represent an empty default, populate the empty tab with a label that shows the desired image.

                      J Online
                      J Online
                      JonB
                      wrote on 29 May 2023, 12:04 last edited by JonB
                      #9

                      @Axel-Spoerl said in How to set the QTabWidget background image when there is not any widget page:

                      populate the empty tab

                      My impression is that OP is saying the QTabWidget has 0 tabs.
                      In that situation I'm not even sure what area the QTabWidget occupies, it may not even be the red frame area shown in the pic?

                      C 1 Reply Last reply 29 May 2023, 13:07
                      1
                      • J JonB
                        29 May 2023, 12:04

                        @Axel-Spoerl said in How to set the QTabWidget background image when there is not any widget page:

                        populate the empty tab

                        My impression is that OP is saying the QTabWidget has 0 tabs.
                        In that situation I'm not even sure what area the QTabWidget occupies, it may not even be the red frame area shown in the pic?

                        C Offline
                        C Offline
                        CPPUIX
                        wrote on 29 May 2023, 13:07 last edited by
                        #10

                        @JonB I thought the same thing, so I made this MRE based on what I guess OP needs:

                        //this is a container widget
                        QWidget *w = new QWidget();
                        QVBoxLayout *l = new QVBoxLayout(w);
                        
                        QPushButton *b = new QPushButton("add",w);
                        QPushButton *b1 = new QPushButton("remove",w);
                        QTabWidget *t = new QTabWidget(w);
                        
                        //here I'm setting QTableWidget background image before it is displayed
                        t->setStyleSheet("background-image: url(:/green.png);");
                        
                        l->addWidget(b);
                        l->addWidget(b1);
                        l->addWidget(t);
                        
                        //here I'm making it detect when all tabs are removed so It can set a background image when it's empty
                        t->connect(t,&QTabWidget::currentChanged, [=]()
                        {
                            if(t->currentIndex()==-1)
                                t->setStyleSheet("background-image: url(:/green.png);");
                            else
                                t->setStyleSheet("");
                        });
                        //these are just buttons I used to add and remove tabs
                        b->connect(b,&QPushButton::clicked, [=]()
                        {
                            t->addTab(new QWidget(),"Tab");
                        });
                        
                        b1->connect(b1,&QPushButton::clicked, [=]()
                        {
                            t->removeTab(t->count()-1);
                        });
                        
                        w->show();
                        

                        Here's how it functions:

                        qtabwidgetback.gif

                        @Hanson could you take a look at it, and answer the previous questions to clarify what you need?

                        H 1 Reply Last reply 30 May 2023, 01:01
                        2
                        • H Hanson
                          29 May 2023, 09:29

                          @JonB Emm, I think you misunderstood my thought.The right widget is the QTabWidget that has no any page,and I want to show the background image when this QTabWidget show first time and without any page.
                          8e3eed4c-8e85-4bb9-8a73-ba7bcbd706f2-image.png

                          J Offline
                          J Offline
                          JoeCFD
                          wrote on 29 May 2023, 14:15 last edited by JoeCFD
                          #11

                          @Hanson I guess Tab1 and Tab2 are QTabWidget.

                          auto page2 = new QWidget( this );
                          tabWidget->addTab( page2, QString( "Tab2" ) );
                          You create a widget and set it as Tab2.

                          If you have created page2,
                          auto page2 = tabWidget->widget( 1 );

                          Then set a picture with stylesheet for icon_name.
                          page2->setStyleSheet(QStringLiteral("border-image: url(:/resources/images/%1)").arg( icon_name ) );

                          1 Reply Last reply
                          0
                          • S Offline
                            S Offline
                            shottercleve
                            wrote on 29 May 2023, 15:23 last edited by
                            #12
                            This post is deleted!
                            1 Reply Last reply
                            0
                            • J JonB
                              29 May 2023, 11:20

                              @Hanson said in How to set the QTabWidget background image when there is not any widget page:

                              @JonB And the left side QTabWidget has nothing to do with this question.

                              That's really helpful to say now, it's as clear as mud! I previously asked for clarification.

                              So, I don't know, did you try setting the QTabWidget itself's background instead of that for any "pages"?

                              H Offline
                              H Offline
                              Hanson
                              wrote on 30 May 2023, 00:59 last edited by
                              #13

                              @JonB Yes!I just want to set the QTabWidget itself's background instead of that for any "pages".

                              “Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.”
                              —— Martin Golding

                              1 Reply Last reply
                              0
                              • C CPPUIX
                                29 May 2023, 13:07

                                @JonB I thought the same thing, so I made this MRE based on what I guess OP needs:

                                //this is a container widget
                                QWidget *w = new QWidget();
                                QVBoxLayout *l = new QVBoxLayout(w);
                                
                                QPushButton *b = new QPushButton("add",w);
                                QPushButton *b1 = new QPushButton("remove",w);
                                QTabWidget *t = new QTabWidget(w);
                                
                                //here I'm setting QTableWidget background image before it is displayed
                                t->setStyleSheet("background-image: url(:/green.png);");
                                
                                l->addWidget(b);
                                l->addWidget(b1);
                                l->addWidget(t);
                                
                                //here I'm making it detect when all tabs are removed so It can set a background image when it's empty
                                t->connect(t,&QTabWidget::currentChanged, [=]()
                                {
                                    if(t->currentIndex()==-1)
                                        t->setStyleSheet("background-image: url(:/green.png);");
                                    else
                                        t->setStyleSheet("");
                                });
                                //these are just buttons I used to add and remove tabs
                                b->connect(b,&QPushButton::clicked, [=]()
                                {
                                    t->addTab(new QWidget(),"Tab");
                                });
                                
                                b1->connect(b1,&QPushButton::clicked, [=]()
                                {
                                    t->removeTab(t->count()-1);
                                });
                                
                                w->show();
                                

                                Here's how it functions:

                                qtabwidgetback.gif

                                @Hanson could you take a look at it, and answer the previous questions to clarify what you need?

                                H Offline
                                H Offline
                                Hanson
                                wrote on 30 May 2023, 01:01 last edited by
                                #14

                                @Abderrahmene_Rayene Yes.This is what I want.But can you set the background image when the QTabWidget show first without any pages.

                                “Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.”
                                —— Martin Golding

                                1 Reply Last reply
                                0
                                • H Offline
                                  H Offline
                                  Hanson
                                  wrote on 30 May 2023, 01:43 last edited by Hanson
                                  #15

                                  Thanks to everyone who answered.You really help me a lot.And Finally I found a solution what I want.
                                  I found that the empty QTabWidget contains a QStackedWidget.

                                  QList<QWidget*> widgets = ui->tabWidget_2->findChildren<QWidget*>();
                                  for (auto wid : widgets)
                                  {
                                  	auto meta = wid->metaObject();
                                  	qDebug() << meta->className();
                                  	qDebug() << wid->objectName();
                                  	qDebug() << "==============";
                                  }
                                  

                                  And there is the output

                                  QStackedWidget
                                  "qt_tabwidget_stackedwidget"
                                  ==============
                                  QTabBar
                                  "qt_tabwidget_tabbar"
                                  ==============
                                  QToolButton
                                  ""
                                  ==============
                                  QToolButton
                                  ""
                                  ==============
                                  

                                  So I write a qss like this, and it really works.

                                  QTabWidget>QStackedWidget#qt_tabwidget_stackedwidget
                                  {
                                  background-image: url(:/img/background.png);
                                  }
                                  

                                  With @Bonnie suggestion, it works perfectly.

                                  @Bonnie said in How to set the QTabWidget background image when there is not any widget page:

                                  for every widget added to the tabwidget, set autoFillBackground to true.

                                  “Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.”
                                  —— Martin Golding

                                  1 Reply Last reply
                                  0
                                  • H Hanson has marked this topic as solved on 30 May 2023, 01:44
                                  • H Hanson has marked this topic as unsolved on 30 May 2023, 01:44
                                  • H Hanson has marked this topic as solved on 30 May 2023, 01:45
                                  • H Hanson has marked this topic as unsolved on 30 May 2023, 02:16
                                  • H Offline
                                    H Offline
                                    Hanson
                                    wrote on 30 May 2023, 02:17 last edited by
                                    #16

                                    Oh no!I found the qss also affect all the pages in the QTabWidget :(

                                    “Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.”
                                    —— Martin Golding

                                    B 1 Reply Last reply 30 May 2023, 02:44
                                    0
                                    • H Hanson
                                      30 May 2023, 02:17

                                      Oh no!I found the qss also affect all the pages in the QTabWidget :(

                                      B Offline
                                      B Offline
                                      Bonnie
                                      wrote on 30 May 2023, 02:44 last edited by Bonnie
                                      #17

                                      @Hanson One way to solve this: for every widget added to the tabwidget, set autoFillBackground to true.
                                      Or you can just dynamically set the qss, when there's no widget, clear the qss, when there's any, set the qss.

                                      H 1 Reply Last reply 30 May 2023, 03:47
                                      1
                                      • B Bonnie
                                        30 May 2023, 02:44

                                        @Hanson One way to solve this: for every widget added to the tabwidget, set autoFillBackground to true.
                                        Or you can just dynamically set the qss, when there's no widget, clear the qss, when there's any, set the qss.

                                        H Offline
                                        H Offline
                                        Hanson
                                        wrote on 30 May 2023, 03:47 last edited by
                                        #18

                                        @Bonnie Nice!It works.Thank you very much!

                                        “Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.”
                                        —— Martin Golding

                                        1 Reply Last reply
                                        0
                                        • H Hanson has marked this topic as solved on 30 May 2023, 03:50
                                        • J JonB referenced this topic on 10 Aug 2024, 17:24

                                        9/18

                                        29 May 2023, 12:04

                                        • Login

                                        • Login or register to search.
                                        9 out of 18
                                        • First post
                                          9/18
                                          Last post
                                        0
                                        • Categories
                                        • Recent
                                        • Tags
                                        • Popular
                                        • Users
                                        • Groups
                                        • Search
                                        • Get Qt Extensions
                                        • Unsolved