1.新建初始项目

2.修改UI格式

运行效果

3.创建登录界面

设计登录界面UI

设计布局

调整布局间距

往水平布局中拖入标签和文本输入框

更换控件名称并固定高度

添加窗口部件

往现有的资源文件中导入图片

添加水平布局

4.设置登陆界面为主窗口的核心组件

#pragma once

#include <QtWidgets/QMainWindow>
#include "ui_MainWindow.h"

class LoginWidget;

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    Ui::MainWindowClass ui;

private:
    LoginWidget* _LoginWidget;
};


#include "MainWindow.h"

#include "LoginWidget.h"


MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    ui.setupUi(this);
    _LoginWidget = new LoginWidget;
    setCentralWidget(_LoginWidget);
}

MainWindow::~MainWindow()
{}

5.创建注册界面

设计注册界面UI

设置整体布局为水平

添加StackWidget

设置stackedWidget整体垂直布局，子项也是垂直布局

重复创建登录界面的操作

6.切换界面

MainWindow

public:
    void BindSlots();

public slots:
    void ShowRegisterWidget();


MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    ui.setupUi(this);
    _LoginWidget = new LoginWidget;
    _RegisterWidget = new RegisterWidget;

    setCentralWidget(_LoginWidget);

    // 绑定槽函数
    BindSlots();
}

void MainWindow::BindSlots()
{
    connect(_LoginWidget, &LoginWidget::Register, this, &MainWindow::ShowRegisterWidget);
}


// 槽函数
// 显示注册界面
void MainWindow::ShowRegisterWidget()
{
    setCentralWidget(_RegisterWidget);
    _LoginWidget->hide();
    _RegisterWidget->show();
}

LoginWidget

signals:
	void Register();																				// 注册按钮被点击

private:
	Ui::LoginWidgetClass ui;

private:
	void BindSlots();




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

LoginWidget::~LoginWidget()
{}

void LoginWidget::BindSlots()
{
	connect(ui.Register_Btn, &QPushButton::clicked, this, &LoginWidget::Register);
}

7.创建样式表，并设置

导入资源文件中

QDialog#LoginWidget, #RegisterWidget
{
background-color:rgb(255,255,255)
}

#User_Label, #PassWord_Label
{
	color:balck;
}

#include "MainWindow.h"
#include <QtWidgets/QApplication>
#include <QFile>
#include <QDebug>

void LoadStyle(QApplication* app)
{
    QFile file(":/StyleSheet/StyleSheet/stylesheet.qss");
    if (file.open(QFile::ReadOnly))
    {
        QString style = QLatin1String(file.readAll());
        app->setStyleSheet(style);
        file.close();
        qDebug() << "Load Style Success";
    }
    else
    {
        qDebug() << "Load Style Failed";
    }
}

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    
    // 加载样式表
    LoadStyle(&a);
    MainWindow w;
    w.show();
    return a.exec();
}