Qt5.9中QVBoxLayout、QHBoxLayout、QStackedLayout、QWidget综合用法

本博客主要总结用QVBoxLayout、QHBoxLayout、QStackedLayout、QWidget综合起来设计一个界面，目的是为了熟悉布局管理器与widget界面结合用法。

 

主要设计思路是写一个界面，该界面主要用一个垂直布局管理器QVBoxLayout，然后在垂直布局管理器上，先添加一个水平布局管理器QHBoxLayout，再添加第二个堆布局管理器QStackedLayout。然后分别在水平布局管理器添加一个QWidget页面，在QStackedLayout布局管理器添加两个QWidget页面。下面将实现这种布局！

1.1新建一个widget工程，创建工程过程中，取消勾选ui界面，然后分别在widget.h，widget.cpp，main.cpp文件添加如下代码：

widget.h

 

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QStackedLayout>
#include <QPushButton>
#include <QLabel>
#include <QLineEdit>

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = 0);

    void createView();
    void createTopLayout();
    void createCenterLayout();
    void createStackedLayout();
    void AddTopForm();                     //添加顶端页面控件
    void createFirstPageLayout();
    void createSecondPageLayout();

private slots:
    void On_firstPageSlot();
    void On_secondPageSlot();

private:
    QVBoxLayout *mainLayout;            //主布局管理器
    QVBoxLayout *topMianLayout;         //顶端布局管理器
    QStackedLayout *centerMainLayout;   //中央布局管理器
    QHBoxLayout *topWidgetLayout;       //顶端布局管理器
    QHBoxLayout *firstPageLayout;           //stackedLayout的第一页
    QHBoxLayout *secondPageLayout;          //stackedLayout的第二页

    QWidget *topWidget;                 //顶端页面
    QWidget *firstPageWidget;           //stackedLayout的第一页
    QWidget *secondPageWidget;          //stackedLayout的第二页
    QPushButton *firstPageBtn;
    QPushButton *secondPageBtn;
    QLabel *firstPageLbl;
    QLabel *secondPageLbl;
    QLineEdit *firstPageLEdt;
    QLineEdit *secondPageLEdt;


};

#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include <QDebug>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    createView();                               //创建界面
}

void Widget::createView()
{
    mainLayout = new QVBoxLayout(this);
    mainLayout->setMargin(0);                   //设置控件与窗口边缘距离
    mainLayout->setSpacing(0);                  //设置控件之间距离

    createTopLayout();                          //创建顶端布局
    createCenterLayout();                       //创建中央布局
}

void Widget::createTopLayout()
{
    //顶端布局设计
    topMianLayout = new QVBoxLayout;

    AddTopForm();                               //添加顶端控件
    mainLayout->addLayout(topMianLayout);       //添加到主布局
}

void Widget::createCenterLayout()
{
    //中央布局设计
    centerMainLayout = new QStackedLayout;

    createStackedLayout();                      //创建QStackedLayout布局（多窗口布局）
    mainLayout->addLayout(centerMainLayout);    //添加到主布局
}

void Widget::createStackedLayout()
{
    createFirstPageLayout();                    //创建第一页界面
    createSecondPageLayout();                   //创建第二页界面
}

void Widget::AddTopForm()
{
    topWidget = new QWidget;
    topWidgetLayout = new QHBoxLayout;
    topWidget->setStyleSheet("background-color:rgb(50,50,50);color:rgb(255,255,255);");
    topWidget->setFixedHeight(100);

    topMianLayout->addWidget(topWidget);
    topWidget->setLayout(topWidgetLayout);

    topWidgetLayout->setMargin(30);
    topWidgetLayout->setSpacing(30);

    //添加控件
    firstPageBtn = new QPushButton(QIcon::fromTheme("go-next", QIcon(":/new/prefix1/next.png")),"&第一页");
    firstPageBtn->setStyleSheet("background-color:rgb(100,150,230);");
    firstPageBtn->setMinimumHeight(50);
    secondPageBtn = new QPushButton(tr("第二页"));
    secondPageBtn->setStyleSheet("background-color:rgb(100,150,230);");
    secondPageBtn->setMinimumHeight(50);

    topWidgetLayout->addWidget(firstPageBtn);
    topWidgetLayout->addWidget(secondPageBtn);
    topWidgetLayout->addStretch();

    connect(firstPageBtn,SIGNAL(clicked(bool)),this,SLOT(On_firstPageSlot()));
    connect(secondPageBtn,SIGNAL(clicked(bool)),this,SLOT(On_secondPageSlot()));
}

void Widget::createFirstPageLayout()
{
    //设计第一页界面
    firstPageWidget = new QWidget;
    firstPageLayout = new QHBoxLayout;

    firstPageWidget->setLayout(firstPageLayout);
    firstPageWidget->setStyleSheet("background-color:rgb(255,150,230);color:rgb(255,255,255);");

    //添加控件
    firstPageLbl = new QLabel(tr("第一页内容："));
    firstPageLEdt = new QLineEdit;
    firstPageLayout->addWidget(firstPageLbl,0,Qt::AlignLeft);
    firstPageLayout->addWidget(firstPageLEdt);
    firstPageLayout->setSpacing(10);

    centerMainLayout->addWidget(firstPageWidget);
    centerMainLayout->setCurrentIndex(0);
}

void Widget::createSecondPageLayout()
{
    //设计第二页的界面
    secondPageWidget = new QWidget;
    secondPageLayout = new QHBoxLayout;

    secondPageWidget->setLayout(secondPageLayout);
    secondPageWidget->setStyleSheet("background-color:rgb(100,255,230);color:rgb(255,255,255);");

    //添加控件
    secondPageLbl = new QLabel(tr("第二页内容："));
    secondPageLEdt = new QLineEdit;
    secondPageLayout->addWidget(secondPageLbl,0,Qt::AlignLeft);
    secondPageLayout->addWidget(secondPageLEdt);
    secondPageLayout->setSpacing(10);

    centerMainLayout->addWidget(secondPageWidget);
}

void Widget::On_firstPageSlot()
{
    centerMainLayout->setCurrentIndex(0);
}

void Widget::On_secondPageSlot()
{
    centerMainLayout->setCurrentIndex(1);
}

main.cpp

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

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget mainWidget;              //实例一个窗口对象
    mainWidget.resize(960,640);     //设置窗口大小
    mainWidget.setWindowTitle(QString::fromUtf8("综合布局应用程序v1.0"));  //设置窗口标题
    mainWidget.show();              //默认非模态窗口

    return a.exec();                //执行窗口应用程序
}

 

1.2程序运行后，结果如下图所示：

 

 

由以上结果可知，只要综合利用好布局管理器QVBoxLayout、QHBoxLayout、QStackedLayout和界面QWidget，就可以做出很好的界面架构。当然，如果想要做得更好，还需要深入研究QSS和其余控件详细用法。

 

 

参考内容：

https://blog.csdn.net/naibozhuan3744/article/details/80752683

https://blog.csdn.net/naibozhuan3744/article/details/80728783

https://blog.csdn.net/naibozhuan3744/article/details/80705442