Qt -- Multi-page Switching Component

Posted by False on Fri, 16 Aug 2019 10:15:36 +0200

I. Multi-page Switching Components

Multi-page switching in our daily use of software is very extensive, with good convenience, the following picture shows the convenience of multi-page use.

You can see that different page contents appear when you click on different titles with the mouse.
Multi-page switching component QTabWidget in A.Qt
Qt provides a special class of QTabWidget for the realization of multi-page switching. It can switch the content of different pages freely in the same window. It is also a container-type component, providing a friendly way of page switching. In the class of QTabWidget, it provides many practical functions in engineering, such as setting up The location of Tab tag void setTabPosition (North South West East), the appearance of Tab void setTabShape(), and the closable mode void setTabsClosable() of Tab are many functions used in practical applications. Specific functions can be queried by Qt assistant.
How to use the QTabWidget -- Create the object of the QTabWidget in the application of Qt, add other QWidget objects to the object (adding a component to the QabWidget object will generate a new page, and adding only one QWidget object to the QabWidget object at a time), but each page will be used in practice. There are many sub-components. At this time, we should create container-type building objects in engineering, lay out multiple sub-components in container objects, and finally add container objects to the QTabWidget to generate new pages.
1. Ability to switch content of different pages freely in the same window
2. It's a container-type component with friendly page switching

How to use QTabWidget
1. Create the object of the QTabWidget in the application
2. Adding other QWidget objects to the object
Implementation process
1. Creating Component Objects of Container Classes
2. Layout multiple subcomponents in container objects
3. Adding container objects to the QTabWidget to generate new pages

Basic usage of the QTabWidget component

Advanced usage of B.QTabWidget components
1. Setting the Tab Label Location
2. Setting the appearance of Tab
3. Setting Tab's Closable Mode
Predefined signals for the QTabWidget component
Void current change (int index) -- The page currently displayed sends a change, index is the subscript for the new page
Void tabCloseRequest (int index) -- The closing button located on the index page is clicked to issue a closing request
Code examples

Widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QTableWidget>

class Widget : public QWidget
{
    Q_OBJECT

    QTabWidget m_tabWidget;
protected slots:
    void onTabCurrentChanged(int index);
    void onTabCloseRequested(int index);
public:
    Widget(QWidget *parent = 0);
    ~Widget();
};

#endif // WIDGET_H

Widget.cpp
#include "Widget.h"
#include <QPlainTextEdit>
#include <QLabel>
#include <QPushButton>
#include <QVBoxLayout>
#include <QDebug>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    //Basic settings of QTabWidget
    m_tabWidget.setParent(this);
    m_tabWidget.move(10, 10);
    m_tabWidget.resize(200, 200);
    m_tabWidget.setTabPosition(QTabWidget::North);
    m_tabWidget.setTabShape(QTabWidget::Triangular);
    m_tabWidget.setTabsClosable(false);

    QPlainTextEdit* edit = new QPlainTextEdit(&m_tabWidget);
    edit->insertPlainText("Page 1");

    m_tabWidget.addTab(edit, "1st");

    QWidget* widget = new QWidget(&m_tabWidget);
    QVBoxLayout* layout = new QVBoxLayout();
    QLabel* lbl = new QLabel(widget);
    QPushButton* btn = new QPushButton(widget);

    lbl->setText("Page 2");
    lbl->setAlignment(Qt::AlignCenter);

    btn->setText("Page 2");

    layout->addWidget(lbl);
    layout->addWidget(btn);

    widget->setLayout(layout);

    m_tabWidget.addTab(widget, "2nd");

    m_tabWidget.setCurrentIndex(1);

    connect(&m_tabWidget, SIGNAL(currentChanged(int)), this, SLOT(onTabCurrentChanged(int)));
    connect(&m_tabWidget, SIGNAL(tabCloseRequested(int)), this, SLOT(onTabCloseRequested(int)));
}

void Widget::onTabCurrentChanged(int index)
{
    qDebug() << "Page change to: " << index;
}

void Widget::onTabCloseRequested(int index)
{
    m_tabWidget.removeTab(index);
}

Widget::~Widget()
{

}

The result of the operation is shown in the figure.

Topics: C++ Qt