Qt中的多页面切换组件

Qt 中的多页面切换组件 QTabWidget

能够在同一个窗口中自由切换不同页面的内容

是一个容器类型的组件，同时提供友好的页面切换方式

QTabWidget 的使用方式

在应用程序中创建 QTabWidget 的对象

将其他 QWidget 对象加入该对象中

小贴士：

• 1. 在 QTabWidget 对象中加入一个组件将生成一个新的页面
• 2. QTabWidget 对象每次只能加入一个 QWidget 对象

问题

如何将多个组件加入到 QTabWidget 页面中？

解决方案

1. 创建容器类型的组件对象

2. 将多个子组件在容器对象中布局

3. 将容器对象加入 QTabWidget 中生成新的页面

QTabWidget 组件的基本用法

QTabWidget 组件的高级用法

设置 Tab 标签的位置 (North，South，West，East)

设置 Tab 的外观 (Rounded，Triangular)

设置 Tab 的可关闭模式

QTabWidget 组件中预定义的信号

void currentChanged(int index)

• 当前显示的页面发生变化，index 为新页面下标

void tabCloseRequested(int index)

• 位置为 index 页面的关闭按钮被点击发出关闭请求

QTabWidget 组件示例

Widget.h

class Widget : public QWidget
{
    Q_OBJECT
private:
    QTabWidget m_tabWidget;

protected slots:
    void onTabCurrentChanged(int index);
    void onTabCloseRequest(int index);

public:
    Widget(QWidget* parent = nullptr);
    ~Widget();
};

Widget.cpp

Widget::Widget(QWidget* parent)
    : QWidget(parent)
{
    m_tabWidget.setParent(this);
    m_tabWidget.move(10, 10);
    m_tabWidget.resize(300, 300);

    m_tabWidget.setTabPosition(QTabWidget::South);
    m_tabWidget.setTabShape(QTabWidget::Triangular);
    m_tabWidget.setTabsClosable(true);

    QPlainTextEdit* edit = new QPlainTextEdit(&m_tabWidget);

    edit->insertPlainText("1st page");
    m_tabWidget.addTab(edit, "1st");

    QWidget* widget = new QWidget(&m_tabWidget);
    QLabel* label = new QLabel(widget);

    label->setText("2nd page");
    label->setAlignment(Qt::AlignCenter);

    QPushButton* button = new QPushButton(&m_tabWidget);
    button->setText("2nd page");

    QVBoxLayout* layout = new QVBoxLayout();

    layout->addWidget(label);
    layout->addWidget(button);

    widget->setLayout(layout);

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

    connect(&m_tabWidget, &QTabWidget::currentChanged, this, &Widget::onTabCurrentChanged);
    connect(&m_tabWidget, &QTabWidget::tabCloseRequested, this, &Widget::onTabCloseRequest);
}

void Widget::onTabCurrentChanged(int index)
{
    qDebug() << "Tab Changed to : " << index;
}

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

Widget::~Widget()
{
}

运行结果如下所示：