第54课 Qt 中的多页面切换组件

Posted 2020-08-19

1. 多页面切换组件（QTabWidget）

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

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

2. QTabWidget的使用方式

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

（2）将其他QWidget对象加入该对象中。但QTabWidget对象每次只能加入一个QWidget对象，同时将成生成一个新的页面。

（3）将多个组件加入到同一个QTabWidget页面的解决方案

　　①创建容器类型的组件对象

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

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

 

（4）QTabWidget组件的基本用法

//设置QTabWidget对象在父组件中的位置和大小
m_tabWidget.setParent(this);
m_tabWidget.move(10, 10);
m_tabWidget.resize(200, 200);

//创建子组件
QPushButton* btn = new QPushButton(&m_tabWidget);
btn->setText("You‘re welcome!");

//加入QTabWidget对象生成新页面
m_tabWidget.addTab(btn, "lst");

3. QTabWidget组件的高级用法

（1）常用的高级用法

　　①设置Tab标签的位置（North、South、 West、 East）

　　②设置Tab的外观（Rounded、 Triangular）

　　③设置Tab的可关闭模式

（2）QTabWidget组件中预定义的信号

　　①void currentChange(int index)：当前显示的页面发生变化，index为新页面下标。

　　②void tabCloseRequest(int index)：位置为index页面的关闭按钮被点击发出关闭请求。

【思考】如何让文本编辑器项目支持多文档操作（利用QTabWidget组件来实现）

【编程实验】QTabWidget组件的初探及高级用法

//main.cpp

#include "Widget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();

    return a.exec();
}

//Widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QTabWidget>

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)
{
    m_tabWidget.setParent(this);
    m_tabWidget.move(10, 10);
    m_tabWidget.resize(200, 200);
    m_tabWidget.setTabPosition(QTabWidget::South); //标签的位置
    m_tabWidget.setTabShape(QTabWidget::Triangular); //标签的外观
    m_tabWidget.setTabsClosable(true); //可关闭标签

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

    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("2nd Tab Page");
    lbl->setAlignment(Qt::AlignCenter);

    btn->setText("2nd Tab Page");

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

    widget->setLayout(layout);

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

    m_tabWidget.setCurrentIndex(1); //设置第2个标签页为当前页面

    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()
{

}

4. 小结

（1）Qt平台中提供了功能强大的多页面组件

（2）QTabWidget组件每次只能加入一个组件

（3）加入多个组件时通过容器组件和布局管理器完成

（4）QTabWidget能够定制页面标签的外观和位置

（5）QTabWidget的预定义信号能够实现程序中的高级功能