vs环境下qt中按钮切换页面

3 篇文章 0 订阅

 搜索切换qt页面,网上大都给出的是不同窗口之间的切换,做登录界面时可以用这种,但是当我们在主界面做的按钮比较多时,

切换界面总是比较麻烦,而且项目中大多使用Stacked Widget,下面我们来看看怎么实现。

首先在ui界面拖出几个按钮,在按钮下面拖出Stacked Widget,并把Stacked Widget拉大一点,在Stacked Widget中拖出label记为页面1。



右击Stacked Widget,插入页面并拖入相应的label,分别命名为页面2、3、4、5。


按下F4,点击切换按钮1,添加信号与槽,信号选择clicked()。


在右边框选择编辑,添加以下槽函数。把5个按钮连接相应的槽函数,连接完成按F3回到编辑窗口部件状态。



此时ui界面就完成了,后面在头文件添加槽函数声明

#ifndef USER_H
#define USER_H

#include <QtWidgets/QWidget>
#include "ui_user.h"

class User : public QWidget
{
	Q_OBJECT

public:
	User(QWidget *parent = 0);
	~User();

private:
	Ui::UserClass ui;

	//槽函数声明
private slots:
	void btn1click();
	void btn2click();
	void btn3click();
	void btn4click();
	void btn5click();
};
#endif // USER_H

在.cpp中定义槽函数

#include "user.h"

User::User(QWidget *parent)
	: QWidget(parent)
{
	ui.setupUi(this);
}

User::~User()
{
		
}
//定义按钮槽函数
void User::btn1click()
{
	ui.stackedWidget->setCurrentIndex(0);
}
void User::btn2click()
{
	ui.stackedWidget->setCurrentIndex(1);
}
void User::btn3click()
{
	ui.stackedWidget->setCurrentIndex(2);
}
void User::btn4click()
{
	ui.stackedWidget->setCurrentIndex(3);
}
void User::btn5click()
{
	ui.stackedWidget->setCurrentIndex(4);
}

 


之后编译运行,效果如下。










Qt,要实现按钮点击后跳转页面,可以使用QStackedWidget、QStackedLayout或QTabWidget来管理多个页面。下面是一个简单的示例: 1. 创建两个页面的QWidget子类,比如Page1和Page2。 ```cpp // page1.h #ifndef PAGE1_H #define PAGE1_H #include <QWidget> class Page1 : public QWidget { Q_OBJECT public: explicit Page1(QWidget *parent = nullptr); signals: void goToPage2(); private slots: void onButtonClicked(); }; #endif // PAGE1_H // page1.cpp #include "page1.h" #include <QPushButton> #include <QVBoxLayout> Page1::Page1(QWidget *parent) : QWidget(parent) { QPushButton *button = new QPushButton("Go to Page 2", this); connect(button, &QPushButton::clicked, this, &Page1::onButtonClicked); QVBoxLayout *layout = new QVBoxLayout(this); layout->addWidget(button); setLayout(layout); } void Page1::onButtonClicked() { emit goToPage2(); } ``` ```cpp // page2.h #ifndef PAGE2_H #define PAGE2_H #include <QWidget> class Page2 : public QWidget { Q_OBJECT public: explicit Page2(QWidget *parent = nullptr); signals: void goToPage1(); private slots: void onButtonClicked(); }; #endif // PAGE2_H // page2.cpp #include "page2.h" #include <QPushButton> #include <QVBoxLayout> Page2::Page2(QWidget *parent) : QWidget(parent) { QPushButton *button = new QPushButton("Go back to Page 1", this); connect(button, &QPushButton::clicked, this, &Page2::onButtonClicked); QVBoxLayout *layout = new QVBoxLayout(this); layout->addWidget(button); setLayout(layout); } void Page2::onButtonClicked() { emit goToPage1(); } ``` 2. 创建一个主窗口的QWidget子类,比如MainWindow,使用QStackedWidget作为主要的页面管理器。 ```cpp // mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QStackedWidget> class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow(QWidget *parent = nullptr); ~MainWindow(); private slots: void goToPage2(); void goToPage1(); private: QStackedWidget *stackedWidget; }; #endif // MAINWINDOW_H // mainwindow.cpp #include "mainwindow.h" #include "page1.h" #include "page2.h" MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) { stackedWidget = new QStackedWidget(this); setCentralWidget(stackedWidget); Page1 *page1 = new Page1(this); Page2 *page2 = new Page2(this); stackedWidget->addWidget(page1); stackedWidget->addWidget(page2); connect(page1, &Page1::goToPage2, this, &MainWindow::goToPage2); connect(page2, &Page2::goToPage1, this, &MainWindow::goToPage1); } MainWindow::~MainWindow() { } void MainWindow::goToPage2() { stackedWidget->setCurrentIndex(1); // 切换页面2 } void MainWindow::goToPage1() { stackedWidget->setCurrentIndex(0); // 切换页面1 } ``` 3. 在main函数创建并显示MainWindow。 ```cpp #include "mainwindow.h" #include <QApplication> int main(int argc, char *argv[]) { QApplication a(argc, argv); MainWindow w; w.show(); return a.exec(); } ``` 以上代码演示了如何通过点击按钮在两个页面跳转。Page1和Page2作为两个不同的QWidget子类,通过信号和槽机制实现按钮点击后的页面切换。MainWindow则使用QStackedWidget作为央部件,将Page1和Page2添加进去,并连接按钮点击信号和页面切换槽函数。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值