1.Qt写简单的登录界面(c++)

  1.介绍    

Qt是我们设计界面最常用的方法，当然，Qt也可以画图等，所以Qt很常用，在这里首先介绍简单的界面设计。其实Qt也有其他语言的，前面我用Qt的designer做过python的简单界面设计，可以看博客4. designer建立关于目标检测的简单界面（python)_qt designer 目标检测-CSDN博客，今天在这里用vs的c++实现Qt的简单界面设计，qt在vs的环境配置可以看我的另一篇博客9.8 Visual Studio 2022安装Qt 和安装graphic-CSDN博客。

2.Qt的简单登录界面设计

        当vs搭建好Qt的环境后，我们首先打开vs新建项目，新建项目选择"Qt Widgets Application",如下图所示：

新建项目后，我们能得到如下文件目录：

        在这里可以看到两个文件：main.cpp 和Demo1.cpp，一个是主函数文件，我们接下来的代码在Demo1.cpp中完成简单的界面设计，然后我们再直接从main.cpp中完成简单的界面设计（如果我们能轻松在main.cpp中完成简单的界面设计，那么我们就可以根据项目需求任意写界面设计的函数通过主函数调用）。

2.1 Demo1.cpp完成简单的登录界面设计

具体的操作在代码中写的很详细，可以直接看代码，代码如下：

#include "Demo1.h"
#include <QLabel>
#include <QtWidgets>

//Demo1::Demo1(QWidget *parent)
//    : QMainWindow(parent)
//{
//    ui.setupUi(this);
//}
//
//Demo1::~Demo1()
//{}
Demo1::Demo1(QWidget* parent)
    : QMainWindow(parent)
{
    //ui.setupUi(this);
    // ---------------------窗口设置----------------------
    QMainWindow* window = new QMainWindow(this);
    this->setWindowTitle("The first UI display of wang");//设置窗口标题
    this->setWindowIcon(QIcon("D:\\AI\\vs\\ui\\Demo1\\Demo1\\buttonss\\ss.png"));//设置窗口图标
    //this->setWindowFlag(Qt::FramelessWindowHint);//设置纯净标题
    this->resize(800, 600);//设置大小
    this->setStyleSheet("background-color:white");//设置背景颜色

    // ---------------------标签设置----------------------
    //QLabel* labels = new QLabel(this);//设计一个标签
    //labels->setGeometry(350, 400, 120, 50);//标签的位置和大小
    //labels->setText("       come on!");  // 设置标签文本
    //labels->setStyleSheet("background-color:green");//设置背景为绿色
    QMovie* mv = new QMovie("D:\\AI\\vs\\ui\\Demo1\\Demo1\\buttonss\\ss.png");//实例化一个动图指针
    labels->setMovie(mv);//将动图设置到标签中
    mv->start();//动图动起来
    //labels->setScaledContents(true);//自适应大小


    QLabel* labels2 = new QLabel(this);//设计一个标签
    labels2->setGeometry(130, 230, 60, 60);//标签的位置和大小
    labels2->setStyleSheet("background-color:white");//设置背景为白色
    //labels2->move(125, 210);
    labels2->setPixmap(QPixmap("D:\\AI\\vs\\ui\\Demo1\\Demo1\\buttonss\\ss.png"));
    labels2->setScaledContents(true);
    
    QLabel* labels3 = new QLabel(this);//设计一个标签
    labels3->setGeometry(130, 300, 60, 60);//标签的位置和大小
    labels3->setStyleSheet("background-color:white");//设置背景为白色
    labels3->setPixmap(QPixmap("D:\\AI\\vs\\ui\\Demo1\\Demo1\\buttonss\\ss.png"));
    labels3->setScaledContents(true);

    // --------------------行编辑器设置-------------------
    QLineEdit* edit1 = new QLineEdit(this);//构造一个行编辑
    edit1->setGeometry(210, 230, 260, 60);
    edit1->setPlaceholderText("QQ/phone/email");//设置占位

    QLineEdit* edit2 = new QLineEdit(this);//构造一个行编辑
    edit2->setGeometry(210, 300, 260, 60);
    edit2->setPlaceholderText("password");//设置占位

    // --------------------按钮设置-------------------
    QPushButton* btn = new QPushButton(" register", this);
    btn->setGeometry(350, 400, 120, 50);
    btn->setStyleSheet("background-color:rgb(8,189,253);border-radius:5px;color:white");//设置背景，按钮样式,字体颜色
}

Demo1::~Demo1()
{
}

运行结果如下：

2.2 main.cpp完成简单的登录界面设计

具体的操作在代码中写的很详细，可以直接看代码，代码如下：

#include "Demo1.h"
#include <QtWidgets/QApplication>
#include <QLabel>
#include <QtWidgets>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    /*Demo1 w;
    w.show();*/
    QMainWindow* window = new QMainWindow();
    QIcon icon("D:\\AI\\vs\\ui\\Demo1\\Demo1\\buttonss\\ss.png");
    window->setWindowIcon(icon);
    window->resize(800, 600);//设置大小
    window->setStyleSheet("background-color:white");//设置背景颜色

    // ---------------------标签设置----------------------
    QLabel* labels2 = new QLabel(window);//设计一个标签
    labels2->setGeometry(130, 230, 60, 60);//标签的位置和大小
    labels2->setStyleSheet("background-color:white");//设置背景为白色
    //labels2->move(125, 210);
    labels2->setPixmap(QPixmap("D:\\AI\\vs\\ui\\Demo1\\Demo1\\buttonss\\ss.png"));
    labels2->setScaledContents(true);

    QLabel* labels3 = new QLabel(window);//设计一个标签
    labels3->setGeometry(130, 300, 60, 60);//标签的位置和大小
    labels3->setStyleSheet("background-color:white");//设置背景为白色
    labels3->setPixmap(QPixmap("D:\\AI\\vs\\ui\\Demo1\\Demo1\\buttonss\\ss.png"));
    labels3->setScaledContents(true);

    // --------------------行编辑器设置-------------------
    QLineEdit* edit1 = new QLineEdit(window);//构造一个行编辑
    edit1->setGeometry(210, 230, 260, 60);
    edit1->setPlaceholderText("QQ/phone/email");//设置占位

    QLineEdit* edit2 = new QLineEdit(window);//构造一个行编辑
    edit2->setGeometry(210, 300, 260, 60);
    edit2->setPlaceholderText("password");//设置占位

    // --------------------按钮设置-------------------
    QPushButton* btn = new QPushButton(" register", window);
    btn->setGeometry(350, 400, 120, 50);
    btn->setStyleSheet("background-color:rgb(8,189,253);border-radius:5px;color:white");//设置背景，按钮样式,字体颜色

    window->show();
    return a.exec();
}

运行结果同上。