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.
Forum Updated to NodeBB v4.3 + New Features

Customizing tab created with QTabWidget.

Scheduled Pinned Locked Moved Unsolved General and Desktop
qtabwidgetqwidgetqmlcustom
8 Posts 4 Posters 1.7k Views 1 Watching
  • 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