首页 > 代码库 > 第54课 Qt 中的多页面切换组件

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

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的预定义信号能够实现程序中的高级功能

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