Qt 同一窗口下的两个页面切换（QStackedWidget）实现，没有切换闪烁

文章目录

前言

在基于Qt做一个界面应用时，往往会出现在一个窗口中切换不同显示内容的需求，在显示A界面后，点击A界面上的按钮button_1将切换到B界面，点击B界面上的按钮button_2将返回A界面。

有不少人通过窗体的A->hide()以及B->show()的手段进行切换，但这样做其实是新建了窗口，窗口的左上角的窗体名称发生变动，且由于窗口A的隐藏，以及窗口B的显示，会有一定程度的闪烁现象。
本篇博客通过QStackedWidget类实现的是在同一个窗口下显示内容的切换，没有窗口切换的闪烁现象，效果如下图所示。

演示效果

运行效果如下：在Qtcreator内点击运行按钮后，先显示第一页的内容，点击第一页左下角的“进入下一页”按钮，界面将切换到第二页，显示的内容切换，点击第二页左下角的“返回上一页”按钮，界面将切换到第一页。
移动窗口的位置，点击按钮，显示窗口的位置、尺寸并不会发生变化。

核心代码

主要思想，通过Qt Creator建立三个Qt设计师界面类，Class name分别命名为Page_1、Page_2以及widget，生成各自的.h .cpp以及.ui文件。
其中Page_1、Page_2内实现各自页面的内容，widget作为原始主界面用来放置QStackedWidget类。

通过Qt Designer设计各自的界面布局文件。

在Widget类的构造函数中，实例化两个页面窗口类，并将两个widget添加至widget布局中的stackedWidget中去。

    ui->setupUi(this);//实例化两个widget
    p1 =new Page_1;
    p2 =new Page_2;//将两个widget添加至stackedWidget
    ui->stackedWidget->addWidget(p1);
    ui->stackedWidget->addWidget(p2);//设置stackedWidget当前展示页面
    ui->stackedWidget->setCurrentIndex(0);

通过设置Page_1、Page_2上两个按钮的点击后发出的信号，以及Widget类中相应的切换操作，实现界面的切换。

//连接两个页面上的按钮信号与相关响应操作connect(p1,&Page_1::button1_pressed,[=](){//显示序号为1个界面
        ui->stackedWidget->setCurrentIndex(1);});connect(p2,&Page_2::button2_pressed,[=](){//显示序号为0个界面
        ui->stackedWidget->setCurrentIndex(0);});

Page_1界面类的实现如下所示，Page_2界面类的实现类似。

page_1.h

#ifndefPAGE_1_H#definePAGE_1_H#include<QWidget>namespace Ui {classPage_1;}classPage_1:publicQWidget{
    Q_OBJECT

public:explicitPage_1(QWidget *parent =nullptr);~Page_1();

signals://按钮按下的处理函数中发出的信号voidbutton1_pressed();private slots:voidon_pushButton_clicked();private:
    Ui::Page_1 *ui;};#endif// PAGE_1_H

page_1.cpp

#include"page_1.h"#include"ui_page_1.h"Page_1::Page_1(QWidget *parent):QWidget(parent),ui(new Ui::Page_1){
    ui->setupUi(this);}Page_1::~Page_1(){delete ui;}voidPage_1::on_pushButton_clicked(){//发出信号，在Widget类中进行信号、槽的绑定工作
    emit button1_pressed();}

widget.cpp

#include"widget.h"#include"ui_widget.h"Widget::Widget(QWidget *parent):QWidget(parent),ui(new Ui::Widget){
    ui->setupUi(this);//实例化两个widget
    p1 =new Page_1;
    p2 =new Page_2;//将两个widget添加至stackedWidget
    ui->stackedWidget->addWidget(p1);
    ui->stackedWidget->addWidget(p2);//设置stackedWidget当前展示页面
    ui->stackedWidget->setCurrentIndex(0);//连接两个页面上的按钮信号与相关响应操作connect(p1,&Page_1::button1_pressed,[=](){
        ui->stackedWidget->setCurrentIndex(1);});connect(p2,&Page_2::button2_pressed,[=](){
        ui->stackedWidget->setCurrentIndex(0);});}Widget::~Widget(){delete ui;}