Qt 同一窗口下的两个页面切换(QStackedWidget)实现,没有切换闪烁

文章目录

  • 前言
  • 演示效果
  • 核心代码
    • page_1.h
    • page_1.cpp
    • widget.cpp


前言

在基于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

#ifndef PAGE_1_H
#define PAGE_1_H

#include 

namespace Ui {
class Page_1;
}

class Page_1 : public QWidget
{
    Q_OBJECT

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

signals:
    //按钮按下的处理函数中发出的信号
    void button1_pressed();

private slots:
    void on_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;
}

void Page_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;
}

你可能感兴趣的:(Qt,qt,ui,开发语言)