qt 6.7 版本 ,QStackedLayout布局中添两个QWidget,每个QWidget都有一个按钮,点击后分别显示另一个布局,两个QWidget做成自定义控件

1.演示代码和说明

1.代码

为了将两个QWidget做成自定义控件,并在QStackedLayout中使用它们,我们需要先定义两个自定义的QWidget类。以下是一个示例,其中创建了两个自定义控件CustomWidget1CustomWidget2,并在主窗口中使用QStackedLayout来切换这两个自定义控件。

首先是两个自定义控件的头文件:

CustomWidget1.h

#ifndef CUSTOMWIDGET1_H  
#define CUSTOMWIDGET1_H  
  
#include <QWidget>  
#include <QPushButton>  
#include <QVBoxLayout>  
  
class CustomWidget1 : public QWidget {  
    Q_OBJECT  
  
public:  
    explicit CustomWidget1(QWidget *parent = nullptr);  
  
signals:  
    void switchRequested();  
  
private slots:  
    void onButtonClicked();  
  
private:  
    QPushButton *button;  
};  
  
#endif // CUSTOMWIDGET1_H

CustomWidget2.h

#ifndef CUSTOMWIDGET2_H  
#define CUSTOMWIDGET2_H  
  
#include <QWidget>  
#include <QPushButton>  
#include <QVBoxLayout>  
  
class CustomWidget2 : public QWidget {  
    Q_OBJECT  
  
public:  
    explicit CustomWidget2(QWidget *parent = nullptr);  
  
signals:  
    void switchRequested();  
  
private slots:  
    void onButtonClicked();  
  
private:  
    QPushButton *button;  
};  
  
#endif // CUSTOMWIDGET2_H

接下来是自定义控件的源文件:

CustomWidget1.cpp

#include "CustomWidget1.h"  
  
CustomWidget1::CustomWidget1(QWidget *parent) : QWidget(parent) {  
    QVBoxLayout *layout = new QVBoxLayout(this);  
    button = new QPushButton("Switch to Widget 2", this);  
    layout->addWidget(button);  
    connect(button, &QPushButton::clicked, this, &CustomWidget1::onButtonClicked);  
}  
  
void CustomWidget1::onButtonClicked() {  
    emit switchRequested();  
}

CustomWidget2.cpp

#include "CustomWidget2.h"  
  
CustomWidget2::CustomWidget2(QWidget *parent) : QWidget(parent) {  
    QVBoxLayout *layout = new QVBoxLayout(this);  
    button = new QPushButton("Switch to Widget 1", this);  
    layout->addWidget(button);  
    connect(button, &QPushButton::clicked, this, &CustomWidget2::onButtonClicked);  
}  
  
void CustomWidget2::onButtonClicked() {  
    emit switchRequested();  
}

最后是主窗口的头文件和源文件,它使用QStackedLayout来管理这两个自定义控件:

MainWindow.h

#ifndef MAINWINDOW_H  
#define MAINWINDOW_H  
  
#include <QWidget>  
#include <QStackedLayout>  
#include "CustomWidget1.h"  
#include "CustomWidget2.h"  
  
class MainWindow : public QWidget {  
    Q_OBJECT  
  
public:  
    MainWindow(QWidget *parent = nullptr);  
  
private slots:  
    void switchToWidget1();  
    void switchToWidget2();  
  
private:  
    QStackedLayout *stackedLayout;  
    CustomWidget1 *customWidget1;  
    CustomWidget2 *customWidget2;  
};  
  
#endif // MAINWINDOW_H

MainWindow.cpp

#include "MainWindow.h"  
  
MainWindow::MainWindow(QWidget *parent) : QWidget(parent) {  
    customWidget1 = new CustomWidget1();  
    customWidget2 = new CustomWidget2();  
  
    connect(customWidget1, &CustomWidget1::switchRequested, this, &MainWindow::switchToWidget2);  
    connect(customWidget2, &CustomWidget2::switchRequested, this, &MainWindow::switchToWidget1);  
  
    stackedLayout = new QStackedLayout;  
    stackedLayout->addWidget(customWidget1);  
    stackedLayout->addWidget(customWidget2);  
  
    QVBoxLayout *mainLayout = new QVBoxLayout;  
    mainLayout->addLayout(stackedLayout);  
    setLayout(mainLayout);  
}  
  
void MainWindow::switchToWidget1() {  
    stackedLayout->setCurrentIndex(0);  
}  
  
void MainWindow::switchToWidget2() {  
    stackedLayout->setCurrentIndex(1);  
}

main.cpp 保持不变:

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

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    MainWindow window;
    window.show();
    return app.exec();
}

2.运行结果

堆栈布局演示

2.参考资料记录

1.qt 堆栈布局 

在 Qt 中,堆栈布局(Stacked Layout)允许你在同一个位置堆叠多个窗口或控件,但每次只显示一个。这种布局特别有用,当你需要在不同的视图或控件之间切换时,而不需要重新排列或调整其他控件。

Qt 的 QStackedLayout 类提供了这种功能。以下是如何使用 QStackedLayout 的基本步骤:

  1. 创建 QStackedLayout

首先,你需要创建一个 QStackedLayout 对象。这可以通过在代码中直接实例化或通过 Qt Designer 来完成。
2. 添加控件到堆栈

使用 addWidget() 方法将控件添加到堆栈布局中。你可以添加任意数量的控件。
3. 切换控件

使用 setCurrentIndex() 方法来切换当前显示的控件。例如,stackedLayout->setCurrentIndex(1); 会显示堆栈中的第二个控件。
4. 与信号和槽结合

你可以将 QStackedLayout 的 currentChanged(int) 信号连接到适当的槽函数,以便在当前显示的控件更改时执行某些操作。

以下是一个简单的示例代码,展示了如何使用 QStackedLayout

#include <QApplication>  
#include <QWidget>  
#include <QPushButton>  
#include <QLabel>  
#include <QStackedLayout>  
#include <QVBoxLayout>  
  
int main(int argc, char *argv[]) {  
    QApplication app(argc, argv);  
  
    QWidget window;  
    QVBoxLayout *mainLayout = new QVBoxLayout(&window);  
  
    QStackedLayout *stackedLayout = new QStackedLayout();  
    QLabel *label1 = new QLabel("Label 1");  
    QLabel *label2 = new QLabel("Label 2");  
    stackedLayout->addWidget(label1);  
    stackedLayout->addWidget(label2);  
  
    QPushButton *button = new QPushButton("Switch");  
    QObject::connect(button, &QPushButton::clicked, [&](){  
        int currentIndex = stackedLayout->currentIndex();  
        stackedLayout->setCurrentIndex((currentIndex + 1) % stackedLayout->count());  
    });  
  
    mainLayout->addWidget(button);  
    mainLayout->addLayout(stackedLayout);  
  
    window.show();  
    return app.exec();  
}

在这个示例中,我们创建了一个包含两个标签的堆栈布局。当用户点击“Switch”按钮时,当前显示的标签会在两个标签之间切换。

2.QStackedLayout 布局内的各Widget是透明的吗

 

在 QStackedLayout 布局中,各个 QWidget 并不是默认设置为透明的。它们的透明性取决于每个 QWidget 的样式和属性设置。默认情况下,QWidget 是不透明的,它们会显示自己的背景。

如果你想要 QStackedLayout 中的 QWidget 是透明的,你需要对每个 QWidget 进行相应的设置。这通常涉及到设置窗口的透明属性和背景样式。例如,你可以通过设置 Qt::WA_TranslucentBackground 属性来使窗口的背景透明,并且可能还需要通过样式表(QSS)来调整控件的外观以达到透明效果。

以下是一个示例,展示了如何设置 QWidget 为透明:

QWidget *widget = new QWidget();
widget->setAttribute(Qt::WA_TranslucentBackground); // 设置透明背景属性
widget->setStyleSheet("background:transparent;"); // 设置样式表为透明

请注意,使窗口或控件透明可能会影响性能和视觉体验,特别是当控件重叠或在不同层级上时。此外,不是所有的平台和窗口系统都支持完全的透明度。

在使用 QStackedLayout 时,通常不需要将内部的 QWidget 设置为透明,因为每次只有一个 QWidget 是可见的,其他的 QWidget 在堆栈中是隐藏的。但如果你确实需要透明效果,就需要对每个 QWidget 进行上述的设置。

 3.qt 6.7 版本 ,QStackedLayout布局中添两个QWidget,每个QWidget都有一个按钮,且点击后分别显示另一个布局。

在 Qt 6.7 中,如果你想在 QStackedLayout 布局中添加两个 QWidget,并且每个 QWidget 中都有一个按钮,点击按钮后切换到另一个布局,你可以按照以下步骤来实现:

  1. 创建主窗口和布局
    • 创建一个主窗口或对话框。
    • 在主窗口中添加一个 QStackedLayout
  2. 添加两个 QWidget 到 QStackedLayout
    • 创建两个 QWidget 对象,并将它们添加到 QStackedLayout 中。
  3. 在每个 QWidget 中添加按钮
    • 在每个 QWidget 中添加一个按钮。
    • 连接按钮的 clicked() 信号到一个槽函数,该函数将改变 QStackedLayout 的当前索引以显示另一个布局。
  4. 实现布局切换逻辑
    • 在槽函数中,根据当前显示的 QWidget 切换到另一个 QWidget

下面是一个简单的代码示例,展示了如何实现这一功能:

 
#include <QApplication>  
#include <QWidget>  
#include <QPushButton>  
#include <QStackedLayout>  
#include <QVBoxLayout>  
#include <QLabel>  
  
class MainWindow : public QWidget {  
    Q_OBJECT  
public:  
    MainWindow(QWidget *parent = nullptr) : QWidget(parent) {  
        // 创建两个 QWidget 和对应的布局  
        QWidget *widget1 = new QWidget(this);  
        QWidget *widget2 = new QWidget(this);  
        QVBoxLayout *layout1 = new QVBoxLayout(widget1);  
        QVBoxLayout *layout2 = new QVBoxLayout(widget2);  
  
        // 在每个 QWidget 中添加一个按钮和一个标签  
        QPushButton *button1 = new QPushButton("Switch to Layout 2", this);  
        QPushButton *button2 = new QPushButton("Switch to Layout 1", this);  
        QLabel *label1 = new QLabel("This is Layout 1", this);  
        QLabel *label2 = new QLabel("This is Layout 2", this);  
  
        layout1->addWidget(button1);  
        layout1->addWidget(label1);  
        layout2->addWidget(button2);  
        layout2->addWidget(label2);  
  
        // 创建 QStackedLayout 并添加两个 QWidget  
        QStackedLayout *stackedLayout = new QStackedLayout(this);  
        stackedLayout->addWidget(widget1);  
        stackedLayout->addWidget(widget2);  
  
        // 连接按钮信号到槽函数  
        connect(button1, &QPushButton::clicked, this, [=]() {  
            stackedLayout->setCurrentIndex(1); // 切换到第二个布局  
        });  
        connect(button2, &QPushButton::clicked, this, [=]() {  
            stackedLayout->setCurrentIndex(0); // 切换到第一个布局  
        });  
  
        // 设置主布局为 QStackedLayout  
        this->setLayout(stackedLayout);  
    }  
};  
  
int main(int argc, char *argv[]) {  
    QApplication app(argc, argv);  
    MainWindow window;  
    window.show();  
    return app.exec();  
}  
  
#include "main.moc"

在这个示例中,MainWindow 类创建了两个 QWidget,每个都包含一个按钮和一个标签。点击按钮时,会触发槽函数来切换 QStackedLayout 中的当前显示布局。注意,这个示例使用了 C++11 的 lambda 表达式来简化信号和槽的连接。确保你的编译器支持 C++11 或更高版本的标准。

4.qt 6.7 版本 ,QStackedLayout布局中添两个QWidget,每个QWidget都有一个按钮,且点击后分别显示另一个布局。将头文件和源文件分开 

在Qt 6.7中,如果你想要将QStackedLayout布局中包含两个QWidget,并且每个QWidget都有一个按钮,点击按钮后显示另一个布局,同时希望将头文件(.h)和源文件(.cpp)分开,你可以按照以下方式组织你的代码:

首先是头文件(例如 MainWindow.h):

#ifndef MAINWINDOW_H  
#define MAINWINDOW_H  
  
#include <QWidget>  
#include <QPushButton>  
#include <QLabel>  
#include <QStackedLayout>  
  
class MainWindow : public QWidget {  
    Q_OBJECT  
  
public:  
    MainWindow(QWidget *parent = nullptr);  
    ~MainWindow();  
  
private slots:  
    void switchToLayout1();  
    void switchToLayout2();  
  
private:  
    QWidget *createWidgetWithButtonAndLabel(const QString &buttonText, const QString &labelText);  
  
    QStackedLayout *stackedLayout;  
    QWidget *widget1;  
    QWidget *widget2;  
};  
  
#endif // MAINWINDOW_H

接下来是源文件(例如 MainWindow.cpp):

#include "MainWindow.h"  
#include <QVBoxLayout>  
  
MainWindow::MainWindow(QWidget *parent) : QWidget(parent) {  
    // 创建两个带有按钮和标签的小部件  
    widget1 = createWidgetWithButtonAndLabel("Switch to Layout 2", "This is Layout 1");  
    widget2 = createWidgetWithButtonAndLabel("Switch to Layout 1", "This is Layout 2");  
  
    // 创建堆栈布局并添加小部件  
    stackedLayout = new QStackedLayout(this);  
    stackedLayout->addWidget(widget1);  
    stackedLayout->addWidget(widget2);  
  
    // 设置主布局为堆栈布局  
    this->setLayout(stackedLayout);  
}  
  
MainWindow::~MainWindow() {  
}  
  
QWidget *MainWindow::createWidgetWithButtonAndLabel(const QString &buttonText, const QString &labelText) {  
    QWidget *widget = new QWidget;  
    QVBoxLayout *layout = new QVBoxLayout(widget);  
  
    QPushButton *button = new QPushButton(buttonText);  
    QLabel *label = new QLabel(labelText);  
  
    layout->addWidget(button);  
    layout->addWidget(label);  
  
    if (buttonText == "Switch to Layout 2") {  
        connect(button, &QPushButton::clicked, this, &MainWindow::switchToLayout2);  
    } else {  
        connect(button, &QPushButton::clicked, this, &MainWindow::switchToLayout1);  
    }  
  
    return widget;  
}  
  
void MainWindow::switchToLayout1() {  
    stackedLayout->setCurrentIndex(0);  
}  
  
void MainWindow::switchToLayout2() {  
    stackedLayout->setCurrentIndex(1);  
}

在这个例子中,MainWindow 类有一个私有方法 createWidgetWithButtonAndLabel,它负责创建一个包含按钮和标签的小部件,并根据按钮的文本连接相应的槽函数以切换布局。MainWindow 的构造函数中调用了这个方法两次,以创建两个小部件,并将它们添加到 QStackedLayout 中。点击按钮时,会触发相应的槽函数(switchToLayout1 或 switchToLayout2),从而改变堆栈布局中显示的页面。

5.qt 6.7 版本 ,QStackedLayout布局中添两个QWidget,每个QWidget都有一个按钮,且点击后分别显示另一个布局。将头文件和源文件分开,需要完整代码 

为了提供一个完整的示例,以下是一个简单的Qt应用程序,它使用了QStackedLayout来切换两个布局。这个例子将头文件和源文件分开,展示了如何在Qt 6.7中实现这一功能。

首先是头文件(mainwindow.h):

#ifndef MAINWINDOW_H  
#define MAINWINDOW_H  
  
#include <QWidget>  
#include <QPushButton>  
#include <QLabel>  
#include <QStackedLayout>  
#include <QVBoxLayout>  
  
class MainWindow : public QWidget {  
    Q_OBJECT  
  
public:  
    MainWindow(QWidget *parent = nullptr);  
    ~MainWindow();  
  
private slots:  
    void onButton1Clicked();  
    void onButton2Clicked();  
  
private:  
    QStackedLayout *stackedLayout;  
    QPushButton *button1;  
    QPushButton *button2;  
    QWidget *widget1;  
    QWidget *widget2;  
};  
  
#endif // MAINWINDOW_H

接下来是源文件(mainwindow.cpp):

#include "mainwindow.h"  
  
MainWindow::MainWindow(QWidget *parent) : QWidget(parent) {  
    // 创建两个QWidget和对应的布局  
    widget1 = new QWidget;  
    widget2 = new QWidget;  
  
    QVBoxLayout *layout1 = new QVBoxLayout(widget1);  
    QVBoxLayout *layout2 = new QVBoxLayout(widget2);  
  
    // 创建按钮和标签,并添加到布局中  
    button1 = new QPushButton("Switch to Layout 2");  
    QLabel *label1 = new QLabel("This is Layout 1");  
    layout1->addWidget(button1);  
    layout1->addWidget(label1);  
  
    button2 = new QPushButton("Switch to Layout 1");  
    QLabel *label2 = new QLabel("This is Layout 2");  
    layout2->addWidget(button2);  
    layout2->addWidget(label2);  
  
    // 创建QStackedLayout并添加两个QWidget  
    stackedLayout = new QStackedLayout;  
    stackedLayout->addWidget(widget1);  
    stackedLayout->addWidget(widget2);  
  
    // 设置信号与槽  
    connect(button1, &QPushButton::clicked, this, &MainWindow::onButton1Clicked);  
    connect(button2, &QPushButton::clicked, this, &MainWindow::onButton2Clicked);  
  
    // 设置主布局为QStackedLayout  
    QVBoxLayout *mainLayout = new QVBoxLayout(this);  
    mainLayout->addLayout(stackedLayout);  
}  
  
MainWindow::~MainWindow() {  
}  
  
void MainWindow::onButton1Clicked() {  
    stackedLayout->setCurrentIndex(1); // 切换到第二个布局  
}  
  
void MainWindow::onButton2Clicked() {  
    stackedLayout->setCurrentIndex(0); // 切换到第一个布局  
}

最后是main.cpp文件,用于启动应用程序:

#include <QApplication>  
#include "mainwindow.h"  
  
int main(int argc, char *argv[]) {  
    QApplication app(argc, argv);  
    MainWindow window;  
    window.show();  
    return app.exec();  
}

这个例子中,MainWindow类包含了两个QWidgetwidget1widget2),每个都含有一个按钮和一个标签。点击按钮时,会触发相应的槽函数来切换QStackedLayout中的当前显示布局。注意,这个示例中使用了Qt的信号和槽机制来连接按钮点击事件和布局切换的逻辑。

6.qt 6.7 版本 ,QStackedLayout布局中添两个QWidget,每个QWidget都有一个按钮,且点击后分别显示另一个布局。将头文件和源文件分开,需要完整代码,两个QWidget做成自定义控件 

为了将两个QWidget做成自定义控件,并在QStackedLayout中使用它们,我们需要先定义两个自定义的QWidget类。以下是一个示例,其中创建了两个自定义控件CustomWidget1CustomWidget2,并在主窗口中使用QStackedLayout来切换这两个自定义控件。

首先是两个自定义控件的头文件:

CustomWidget1.h

#ifndef CUSTOMWIDGET1_H  
#define CUSTOMWIDGET1_H  
  
#include <QWidget>  
#include <QPushButton>  
#include <QVBoxLayout>  
  
class CustomWidget1 : public QWidget {  
    Q_OBJECT  
  
public:  
    explicit CustomWidget1(QWidget *parent = nullptr);  
  
signals:  
    void switchRequested();  
  
private slots:  
    void onButtonClicked();  
  
private:  
    QPushButton *button;  
};  
  
#endif // CUSTOMWIDGET1_H

CustomWidget2.h

#ifndef CUSTOMWIDGET2_H  
#define CUSTOMWIDGET2_H  
  
#include <QWidget>  
#include <QPushButton>  
#include <QVBoxLayout>  
  
class CustomWidget2 : public QWidget {  
    Q_OBJECT  
  
public:  
    explicit CustomWidget2(QWidget *parent = nullptr);  
  
signals:  
    void switchRequested();  
  
private slots:  
    void onButtonClicked();  
  
private:  
    QPushButton *button;  
};  
  
#endif // CUSTOMWIDGET2_H

接下来是自定义控件的源文件:

CustomWidget1.cpp

#include "CustomWidget1.h"  
  
CustomWidget1::CustomWidget1(QWidget *parent) : QWidget(parent) {  
    QVBoxLayout *layout = new QVBoxLayout(this);  
    button = new QPushButton("Switch to Widget 2", this);  
    layout->addWidget(button);  
    connect(button, &QPushButton::clicked, this, &CustomWidget1::onButtonClicked);  
}  
  
void CustomWidget1::onButtonClicked() {  
    emit switchRequested();  
}

CustomWidget2.cpp

#include "CustomWidget2.h"  
  
CustomWidget2::CustomWidget2(QWidget *parent) : QWidget(parent) {  
    QVBoxLayout *layout = new QVBoxLayout(this);  
    button = new QPushButton("Switch to Widget 1", this);  
    layout->addWidget(button);  
    connect(button, &QPushButton::clicked, this, &CustomWidget2::onButtonClicked);  
}  
  
void CustomWidget2::onButtonClicked() {  
    emit switchRequested();  
}

最后是主窗口的头文件和源文件,它使用QStackedLayout来管理这两个自定义控件:

MainWindow.h

#ifndef MAINWINDOW_H  
#define MAINWINDOW_H  
  
#include <QWidget>  
#include <QStackedLayout>  
#include "CustomWidget1.h"  
#include "CustomWidget2.h"  
  
class MainWindow : public QWidget {  
    Q_OBJECT  
  
public:  
    MainWindow(QWidget *parent = nullptr);  
  
private slots:  
    void switchToWidget1();  
    void switchToWidget2();  
  
private:  
    QStackedLayout *stackedLayout;  
    CustomWidget1 *customWidget1;  
    CustomWidget2 *customWidget2;  
};  
  
#endif // MAINWINDOW_H

MainWindow.cpp

#include "MainWindow.h"  
  
MainWindow::MainWindow(QWidget *parent) : QWidget(parent) {  
    customWidget1 = new CustomWidget1();  
    customWidget2 = new CustomWidget2();  
  
    connect(customWidget1, &CustomWidget1::switchRequested, this, &MainWindow::switchToWidget2);  
    connect(customWidget2, &CustomWidget2::switchRequested, this, &MainWindow::switchToWidget1);  
  
    stackedLayout = new QStackedLayout;  
    stackedLayout->addWidget(customWidget1);  
    stackedLayout->addWidget(customWidget2);  
  
    QVBoxLayout *mainLayout = new QVBoxLayout;  
    mainLayout->addLayout(stackedLayout);  
    setLayout(mainLayout);  
}  
  
void MainWindow::switchToWidget1() {  
    stackedLayout->setCurrentIndex(0);  
}  
  
void MainWindow::switchToWidget2() {  
    stackedLayout->setCurrentIndex(1);  
}

main.cpp 保持不变:

#include <QApplication>  
#include "MainWindow.h"  
  
int main(int argc

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值