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. Customizing tab created with QTabWidget.
QtWS25 Last Chance

Customizing tab created with QTabWidget.

Scheduled Pinned Locked Moved Unsolved General and Desktop
qtabwidgetqwidgetqmlcustom
8 Posts 4 Posters 1.6k 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.
  • A Offline
    A Offline
    Asimo
    wrote on 5 Jan 2022, 11:54 last edited by
    #1

    I need to modify the tab created with QTabWidget. I want to add an additional button (besides the close button: setTabsClosable()).
    In Qt designer, as I understand it, this cannot be done. I tried to make it with QWidget (in cpp file with code) but I didn't succeed.
    Also:

    1. I have plenty of additional custom (not totally native) elements in my Windows application;
    2. and I want my app to have consistent design independently of version the of Windows (7, 10, 11).

    So questions are:

    1. how can I create the modified tab? Using QML?
    2. Should I create a whole application using QML or I can create separate UI elements with QML and implement them in QWidget application? What approach should I choose?
    A 1 Reply Last reply 5 Jan 2022, 12:20
    0
    • A Asimo
      5 Jan 2022, 11:54

      I need to modify the tab created with QTabWidget. I want to add an additional button (besides the close button: setTabsClosable()).
      In Qt designer, as I understand it, this cannot be done. I tried to make it with QWidget (in cpp file with code) but I didn't succeed.
      Also:

      1. I have plenty of additional custom (not totally native) elements in my Windows application;
      2. and I want my app to have consistent design independently of version the of Windows (7, 10, 11).

      So questions are:

      1. how can I create the modified tab? Using QML?
      2. Should I create a whole application using QML or I can create separate UI elements with QML and implement them in QWidget application? What approach should I choose?
      A Offline
      A Offline
      artwaw
      wrote on 5 Jan 2022, 12:20 last edited by artwaw 1 May 2022, 12:20
      #2

      @Asimo How do you create the existing tab?

      For more information please re-read.

      Kind Regards,
      Artur

      1 Reply Last reply
      0
      • A Offline
        A Offline
        Asimo
        wrote on 5 Jan 2022, 12:56 last edited by
        #3

        @artwaw my code for tabs is:

            QTabWidget *tabWidget = new QTabWidget;
            tabWidget->setTabsClosable(true);
        
            QWidget *testTab = new QWidget;
            QWidget *testTab2 = new QWidget;
            tabWidget->addTab(testTab, "Test tab");
            tabWidget->addTab(testTab2, "Test tab 2");
        
        A 1 Reply Last reply 5 Jan 2022, 13:04
        0
        • A Asimo
          5 Jan 2022, 12:56

          @artwaw my code for tabs is:

              QTabWidget *tabWidget = new QTabWidget;
              tabWidget->setTabsClosable(true);
          
              QWidget *testTab = new QWidget;
              QWidget *testTab2 = new QWidget;
              tabWidget->addTab(testTab, "Test tab");
              tabWidget->addTab(testTab2, "Test tab 2");
          
          A Offline
          A Offline
          artwaw
          wrote on 5 Jan 2022, 13:04 last edited by
          #4

          @Asimo Please take a look into QWidget documentation, section "Top-level and child widgets".

          All you need to do is to add layout to the widget and the button.
          Further reading regarding the layouts: https://doc.qt.io/qt-5/layout.html

          You will also find useful examples there.

          For more information please re-read.

          Kind Regards,
          Artur

          1 Reply Last reply
          0
          • A Offline
            A Offline
            Asimo
            wrote on 5 Jan 2022, 13:10 last edited by
            #5

            @artwaw Can you please clarify how can I reach such result using layout? Is it possible to replace a standard Tab with custom? I need to include "refresh" button:
            1bff006a-2eaa-40cb-a068-26d1fa754f18-image.png

            1 Reply Last reply
            0
            • C Offline
              C Offline
              ChrisW67
              wrote on 6 Jan 2022, 00:34 last edited by
              #6

              A quick look at the QTabWidget source code shows that it is hard-coded to use a QTabBar and QStackedWidget together. QTabBar is responsible for drawing the tab imagery. There is no way to replace this tab bar object with your own, customised version.

              Your widget-based option is to construct your own QTabWidget look-alike and use a QTabBar sub-class with customised paintEvent() along with a way to enable/disable the refresh button, enable disable animation of the icon, and a signal to indicate it has been clicked. You'll probably have to play with sizing logic as well. Quite a lot of fiddly work I expect.

              Alternatives:

              • Place a single refresh button as the cornerWidget of the standard QTabWidget and have it refresh the current tab
              • Place a single refresh button to the left/right of the QTabBar in your own QTabWidget look-alike.
              F 1 Reply Last reply 28 Feb 2024, 16:32
              2
              • A Offline
                A Offline
                Asimo
                wrote on 6 Jan 2022, 14:29 last edited by
                #7

                @ChrisW67 Thank you so much for your recommendations! I will try.

                1 Reply Last reply
                0
                • C ChrisW67
                  6 Jan 2022, 00:34

                  A quick look at the QTabWidget source code shows that it is hard-coded to use a QTabBar and QStackedWidget together. QTabBar is responsible for drawing the tab imagery. There is no way to replace this tab bar object with your own, customised version.

                  Your widget-based option is to construct your own QTabWidget look-alike and use a QTabBar sub-class with customised paintEvent() along with a way to enable/disable the refresh button, enable disable animation of the icon, and a signal to indicate it has been clicked. You'll probably have to play with sizing logic as well. Quite a lot of fiddly work I expect.

                  Alternatives:

                  • Place a single refresh button as the cornerWidget of the standard QTabWidget and have it refresh the current tab
                  • Place a single refresh button to the left/right of the QTabBar in your own QTabWidget look-alike.
                  F Offline
                  F Offline
                  Fractal_based
                  wrote on 28 Feb 2024, 16:32 last edited by
                  #8

                  @ChrisW67 What if I want to resize the tabs but index-based?

                  Similar to a web browser, I want to enable a button/tab-like interface. The first tab should, if possible, display only the icon and the last being a new tab option will display a varied interface.

                  1 Reply Last reply
                  0

                  • Login

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