QT系列教程(8) QT 布局学习

简介

Qt 中的布局有三种方式，水平布局，垂直布局，栅格布局。

通过ui设置布局

我们先创建一个窗口应用程序，程序名叫layout，基类选择QMainWindow。但我们不使用这个mainwindow，我们创建一个Qt应用程序类Login，Qt会为我们自动生成login.ui文件。我们进入ui文件编辑，添加一个label，提示改为用户: ， 在后边添加一个lineedit控件，按住ctrl鼠标依次点击这两个控件选中后，再点击工具栏的水平布局按钮就可以看到用户label和输入框处于同一水平线了。但是输入框会被拉长，而且label和输入框占满了整个水平空间。这时我们可以通过拖动左侧控件列表中的Horizonal Spacer，将其放入用户标签的左侧，再拖动一个Horizonal Spacer将其放在输入框的右侧，就可以看到用户标签和输入框被挤在中间了，并且两侧留有空间了。Spacer可以设置几种模式，包括fixed，expanding, maximum, minimum等模式。
依次类推，我们在添加密码标签和输入框，以及登录和注册按钮，通过ui界面的控件调整布局。

通过代码设置布局

上面我们通过ui设置了布局，接下来我们通过代码设置布局，设置注册界面的布局
注册类的声明如下

#ifndef REGISTER_H
#define REGISTER_H#include <QDialog>
#include <memory>
using namespace std;
class  Login;
namespace Ui {
class Register;
}class Register : public QDialog
{Q_OBJECTpublic:explicit Register(QWidget *parent = nullptr);~Register();void set_login(const  weak_ptr<Login> &_login);
private:Ui::Register *ui;weak_ptr<Login> _login;QPushButton* _reg_btn;
public slots:void ShowLogin();
};#endif // REGISTER_H

因为要实现登录和注册界面之间的切换，所以Register类包含了Login类的弱指针，Register类的具体实现如下

#include "register.h"
#include "ui_register.h"
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
#include <QSpacerItem>Register::Register(QWidget *parent) :QDialog(parent),ui(new Ui::Register)
{ui->setupUi(this);this->setMaximumSize(QSize(300,350));this->setMinimumSize(QSize(300,350));auto vbox_layout = new QVBoxLayout();auto verticalSpacer1 = new QSpacerItem(40,20, QSizePolicy::Minimum, QSizePolicy::Expanding);vbox_layout->addItem(verticalSpacer1);QSpacerItem *name_item1 = new QSpacerItem(40,20, QSizePolicy::Fixed, QSizePolicy::Minimum);QLabel * name_label = new QLabel();name_label->setText("邮箱:");QLineEdit * name_edit = new QLineEdit();auto name_layout = new QHBoxLayout();name_layout->addItem(name_item1);name_layout->addWidget(name_label);name_layout->addWidget(name_edit);QSpacerItem *name_item2 = new QSpacerItem(40,20, QSizePolicy::Fixed, QSizePolicy::Minimum);name_layout->addItem(name_item2);vbox_layout->addLayout(name_layout);QLabel * pwd_label = new QLabel();pwd_label->setText("密码:");QLineEdit * pwd_edit = new QLineEdit();auto verticalSpacer2 = new QSpacerItem(40,20, QSizePolicy::Maximum, QSizePolicy::Maximum);vbox_layout->addItem(verticalSpacer2);auto pwd_layout = new QHBoxLayout();QSpacerItem *pwd_item2 = new QSpacerItem(40,20, QSizePolicy::Fixed, QSizePolicy::Minimum);QSpacerItem *pwd_item1 = new QSpacerItem(40,20, QSizePolicy::Fixed, QSizePolicy::Minimum);pwd_layout->addItem(pwd_item1);pwd_layout->addWidget(pwd_label);pwd_layout->addWidget(pwd_edit);pwd_layout->addItem(pwd_item2);vbox_layout->addLayout(pwd_layout);auto verticalSpacer3 = new QSpacerItem(40,30, QSizePolicy::Fixed, QSizePolicy::Maximum);vbox_layout->addItem(verticalSpacer3);QSpacerItem* reg_btn_item1 = new QSpacerItem(150,20, QSizePolicy::Fixed, QSizePolicy::Minimum);_reg_btn = new QPushButton();_reg_btn->setText("注册");auto regbtn_layout = new QHBoxLayout();regbtn_layout->addItem(reg_btn_item1);regbtn_layout->addWidget(_reg_btn,5);QSpacerItem* reg_btn_item2 = new QSpacerItem(40,20, QSizePolicy::Fixed, QSizePolicy::Minimum);regbtn_layout->addItem(reg_btn_item2);vbox_layout->addLayout(regbtn_layout);auto verticalSpacer4 = new QSpacerItem(40,20, QSizePolicy::Fixed, QSizePolicy::Expanding);vbox_layout->addItem(verticalSpacer4);this->setLayout(vbox_layout);
}Register::~Register()
{delete ui;
}void Register::set_login(const  weak_ptr<Login> &login){_login = login;
}void Register::ShowLogin()
{}

Register的构造函数中用代码的方式创建了一个垂直布局，垂直布局中增加了两个spacer，分别是verticalSpacer1和verticalSpacer4，以及三个水平布局pwd_layout，name_layout以及regbtn_layout，然后分别用代码的方式在三个布局中添加spacer和控件。
Login类的声明如下

#ifndef LOGIN_H
#define LOGIN_H#include <QDialog>
#include <memory>
class Register;
using namespace std;
namespace Ui {
class Login;
}class Login : public QDialog, public std::enable_shared_from_this<Login>
{Q_OBJECTpublic:explicit Login(QWidget *parent = nullptr);~Login();void initSignals();private slots:void on_regBtn_clicked();private:Ui::Login *ui;std::shared_ptr<Register> _register;
};#endif // LOGIN_H

Login实现如下下

#include "ui_login.h"
#include <QBitmap>
#include <QPainter>
#include "register.h"Login::Login(QWidget *parent) :QDialog(parent),ui(new Ui::Login)
{ui->setupUi(this);
}void Login::initSignals(){_register = make_shared<Register>();//从本类转化为共享的智能指针给register类_register->set_login(shared_from_this());
}Login::~Login()
{delete ui;
}void Login::on_regBtn_clicked()
{this->close();_register->show();
}

main函数的实现如下

#include "login.h"
#include <QApplication>
#include <memory>
using namespace  std;
int main(int argc, char *argv[])
{QApplication a(argc, argv);std::shared_ptr<Login> w = make_shared<Login>();w->initSignals();w->show();return a.exec();
}

点击运行按钮，程序运行起来就可以从登录界面切换到注册界面了

总结

源码链接https://gitee.com/secondtonone1/qt-learning-notes