Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Solved Unable to draw this kind of tabwidget in .ui?

    General and Desktop
    4
    13
    405
    Loading More Posts
    • 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
      aabdn last edited by

      Hello guys,
      I have a question to ask, I want to show two pages on single tab, if i press a button to choose a tab, it should show first page and if i press the same tab one more time, it should show other page (I mean two pages on one Qtab), let me share a photo of what i want to create. Please help me in this. thank you.

      10d35acb-b2fc-4832-a3b3-7dae593ab73f-1631171064(1).png

      The small option in the red circle, i dont know how to create tab like this, this tab contains two pages, for one time press show first page, for second time press shows other. I am creating user interface in Qt creator using from.ui.

      1 Reply Last reply Reply Quote 0
      • mrjj
        mrjj Lifetime Qt Champion last edited by mrjj

        Hi and welcome to the forums.

        Well you cannot do it directly in Designer, you have to use code.

        First, you need to use
        https://doc.qt.io//qt-5/qtabbar.html#setTabButton
        if you want to add your own tab button so it can show such a little arrow.
        QToolButton can show an arrow but not sure you can style it to be just in the corner

        alt text

        Then for the multiple page part.
        You could use a QStackedWidget as page instead of the plain Widget.
        Then it can have 1 or 2 pages as you wish.

        A 1 Reply Last reply Reply Quote 1
        • JoeCFD
          JoeCFD last edited by

          A customized tabbar button is needed here for the layout with text and the little icon.

          A 1 Reply Last reply Reply Quote 0
          • A
            aabdn @mrjj last edited by

            @mrjj Thank you so much for your quick response, I am following your instructions.

            1 Reply Last reply Reply Quote 0
            • A
              aabdn @JoeCFD last edited by

              @JoeCFD Thank you so much for your quick response, Let me also go with solution you have suggested.

              1 Reply Last reply Reply Quote 0
              • A
                aabdn last edited by

                Now I am able to create it, besides I have a question, I have added 3 pages in QstakedWidget which are being controlled by three push buttons, I want that a button should contain two pages, for example, if i click the button one time it should show page one, if i click the button second time it should show page two and if i click the button again (the third time) it should show page one. It should swipe page one and page two. Please let me know how can i do it. Thanks

                eyllanesc 1 Reply Last reply Reply Quote 0
                • eyllanesc
                  eyllanesc @aabdn last edited by eyllanesc

                  @aabdn I have implemented a demo not exactly with your requirement on purpose because I think you should. The demo makes that if the user presses the third tab for what will be the currentab and if he presses the third tab back then he will see that the page will change without changing the tab.

                  from PyQt5 import QtCore, QtWidgets
                  
                  
                  class TabWidget(QtWidgets.QTabWidget):
                      def __init__(self, parent=None):
                          super().__init__(parent)
                          self.addTab(
                              QtWidgets.QLabel(
                                  "Page1",
                                  alignment=QtCore.Qt.AlignCenter,
                                  styleSheet="background-color: rgb(10, 100, 10)",
                              ),
                              "Tab1",
                          )
                          self.addTab(
                              QtWidgets.QLabel(
                                  "Page2",
                                  alignment=QtCore.Qt.AlignCenter,
                                  styleSheet="background-color: rgb(100, 100, 10)",
                              ),
                              "Tab2",
                          )
                  
                          self.stackedwidget = QtWidgets.QStackedWidget()
                          self.page3_1 = QtWidgets.QLabel(
                              "Page3_1",
                              alignment=QtCore.Qt.AlignCenter,
                              styleSheet="background-color: rgb(10, 10, 100)",
                          )
                          self.page3_2 = QtWidgets.QLabel(
                              "Page3_2",
                              alignment=QtCore.Qt.AlignCenter,
                              styleSheet="background-color: rgb(100, 10, 100)",
                          )
                          self.stackedwidget.addWidget(self.page3_1)
                          self.stackedwidget.addWidget(self.page3_2)
                          self.addTab(self.stackedwidget, "Tab3")
                  
                          self.addTab(
                              QtWidgets.QLabel(
                                  "Page4",
                                  alignment=QtCore.Qt.AlignCenter,
                                  styleSheet="background-color: rgb(100, 100, 100)",
                              ),
                              "Tab4",
                          )
                  
                          self.tabBarClicked.connect(self.handle_tabbar_clicked)
                  
                      def handle_tabbar_clicked(self, index):
                          if index == 2 and self.stackedwidget.isVisible():
                              index = (self.stackedwidget.currentIndex() + 1) % self.stackedwidget.count()
                              self.stackedwidget.setCurrentIndex(index)
                  
                  
                  def main():
                      import sys
                  
                      app = QtWidgets.QApplication(sys.argv)
                  
                      w = TabWidget()
                      w.resize(640, 480)
                      w.show()
                  
                      sys.exit(app.exec())
                  
                  
                  if __name__ == "__main__":
                      main()
                  

                  If you want me to help you develop some work then you can write to my email: e.yllanescucho@gmal.com.

                  A 1 Reply Last reply Reply Quote 1
                  • A
                    aabdn @eyllanesc last edited by

                    @eyllanesc Is is possible if you can share c++ example code, I have created qstakedwidget pages and pushbuttons in mainwindow.ui, It will be a great help. c7a8fb86-b88c-4027-89ea-eb397c0dc883-1631329508(1).png

                    rightnow, when i press it shows 1st page but i want to set two pages via back and forth clicks (i.e. clicked: page 1, clicked: page 2, clicked: page 1, clicked: page 2,......). can you share an example code which i can write in on_pushButton_clicked()?

                    eyllanesc 1 Reply Last reply Reply Quote 0
                    • eyllanesc
                      eyllanesc @aabdn last edited by

                      @aabdn I'm not going to give you the solution code, I'll only give you hints. bye Bye.

                      If you want me to help you develop some work then you can write to my email: e.yllanescucho@gmal.com.

                      A 1 Reply Last reply Reply Quote 0
                      • A
                        aabdn @eyllanesc last edited by

                        @eyllanesc Really appreciate for your help, thanks, I was just wondering to see any example related to my case, not exact code.

                        eyllanesc 1 Reply Last reply Reply Quote 0
                        • eyllanesc
                          eyllanesc @aabdn last edited by

                          @aabdn C++ Demo:

                          #include <QApplication>
                          #include <QLabel>
                          #include <QStackedWidget>
                          #include <QTabWidget>
                          
                          
                          QLabel *buildLabel(const QString & text, const QColor & color){
                              QLabel *label = new QLabel(text);
                              label->setAlignment(Qt::AlignCenter);
                              label->setStyleSheet(QString("background-color: %1").arg(color.name()));
                              return label;
                          }
                          
                          class TabWidget: public QTabWidget
                          {
                          public:
                              TabWidget(QWidget *parent=nullptr):QTabWidget(parent){
                                  addTab(buildLabel("Page1", QColor(10, 100, 10)), "Tab1");
                                  addTab(buildLabel("Page2", QColor(10, 100, 10)), "Tab2");
                          
                                  stackedWidget = new QStackedWidget;
                                  stackedWidget->addWidget(buildLabel("Page3_1", QColor(10, 10, 10)));
                                  stackedWidget->addWidget(buildLabel("Page3_2", QColor(100, 10, 100)));
                                  addTab(stackedWidget, "Tab3");
                          
                                  addTab(buildLabel("Page4", QColor(100, 100, 100)), "Tab4");
                          
                                  connect(this, &QTabWidget::tabBarClicked, this, &TabWidget::handleTabbarClicked);
                              }
                          private:
                              void handleTabbarClicked(int index){
                                  if(index == 2 && stackedWidget->isVisible()){
                                      int new_index = (stackedWidget->currentIndex() + 1) % stackedWidget->count();
                                      stackedWidget->setCurrentIndex(new_index);
                                  }
                              }
                              QStackedWidget *stackedWidget;
                          };
                          
                          int main(int argc, char *argv[])
                          {
                              QApplication a(argc, argv);
                              TabWidget w;
                              w.resize(640, 480);
                              w.show();
                              return a.exec();
                          }
                          

                          In one part you ask for code: can you share an example code which i can write in on_pushButton_clicked() and in the other you say no: any example related to my case, not exact code, that's confusing.

                          If you want me to help you develop some work then you can write to my email: e.yllanescucho@gmal.com.

                          1 Reply Last reply Reply Quote 2
                          • A
                            aabdn last edited by

                            Thank you for helping me @eyllanesc , solved

                            1 Reply Last reply Reply Quote 1
                            • A
                              aabdn last edited by

                              @mrjj @JoeCFD Thank you

                              1 Reply Last reply Reply Quote 1
                              • First post
                                Last post