Qt实现的自定义登录框连接MySQL(完整的实现过程)

一.开始创建项目

1.创建Qt窗口应用项目：

2.输入文件名、选择项目将要保存的地址

3.构造系统选择qmake

4.类名使用默认的就好，点击继续完成项目的创建

5.创建好的项目如下

二.创建一个资源管理文件

三.创建一个登录对话框窗口

1.选择一个ui界面类

2.选择Dialog without Buttons

4.命名如下

5.在loginButton里面放入两个lineEdit、一个PushButton、一个Label，并做如下布局

6.创建一个login.css文件在资源管理文件res文件下

        先在工程项目的文件里面创建一个新文件夹css，用来保存.css文件

创建css文件

7.在mian.cpp中写如下代码设置打开窗口时，运行程序时是logindialog窗口先打开

#include "mainwindow.h"
#include 
#include "logindialog.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    loginDialog login; //定义一个对话框窗口
    int ret = login.exec(); 
    if(QDialog::Accepted == ret){
        MainWindow w;
        w.show();
        return a.exec();
    }
    return ret;

}

 

四.设置登录框样式

1.在login.css文件中设置登录对话框的样式：

/*设置标题"账号登录"样式*/
QLabel#titleLabel{
    color:#12bb37; /*字体颜色*/
    font-size: 20px; /*字体大小*/
    font-family:Helvetica; /*字体集*/
}
/*设置登录按钮样式*/
QPushButton#loginButton{
    background:#12bb37; /*按钮颜色*/
    color:white; /*字体颜色*/
    border-radius:5px;/*按钮设置圆角*/
    border:none;  /*去掉按钮边框*/
    min-height:40px; /*设置按钮最小高度*/
    font-size:18px;/*设置字体大小*/
    font-family:Helvetica;/*字体集*/
}
/*设置单行编辑框样式*/
QLineEdit {
    color: #bfbfbf;  /*设置输入文本的颜色 */
    border-radius: 5px;/*按钮单行编辑框圆角*/
    min-height: 40px; /*设置单行编辑框最小高度*/
    border: 1px solid #eeeeee; /*设置单行编辑框边框大小为1px  无空隙 颜色为#eeeeee*/
    font-size: 14px; /*设置输入的字体大小*/
    font-family:Helvetica;/*字体集*/
}
/*设置单行编辑框焦点时样式*/
QLineEdit:focus {
    color: black;  /* 设置输入文本获取焦点后的颜色 */
    outline: none;
    border:none;
    border-width:0;
/*    border-style:outset;*/
    border: 1px solid #12bb37;
}

2.在logon.cpp文件中加载login.css样式表，初始化QLineEdit，并重写paintEvent函数绘制窗口圆角

//logindialog.h
#ifndef LOGINDIALOG_H
#define LOGINDIALOG_H

#include 

namespace Ui {
class loginDialog;
}

class loginDialog : public QDialog
{
    Q_OBJECT

public:
    explicit loginDialog(QWidget *parent = nullptr);
    ~loginDialog();
    void initEdit();
protected:
    void paintEvent(QPaintEvent *event) override;

private:
    Ui::loginDialog *ui;
};

#endif // LOGINDIALOG_H

//logindialog.cpp
#include "logindialog.h"
#include "ui_logindialog.h"
#include 
#include 
loginDialog::loginDialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::loginDialog)
{
    ui->setupUi(this);

    setWindowFlags(Qt::FramelessWindowHint); //设置窗口无边框
    setFixedSize(350,390); //固定登录对话框的窗口大小
    //加载css样式表
    QString qss;
    QFile file(":/css/login.css");
    if (file.open(QFile::ReadOnly)) {
        qss = QLatin1String(file.readAll());
        qApp->setStyleSheet(qss);
        file.close();
    }
    ui->usernameEdit->setAttribute(Qt::WA_MacShowFocusRect, 0); //去掉默认选中usernameEdit就会出现的蓝色边框
    ui->passwordEdit->setAttribute(Qt::WA_MacShowFocusRect, 0); //去掉默认选中passwordEdit就会出现的蓝色边框
    ui->passwordEdit->setEchoMode(QLineEdit::Password); //设置密码输入显示为圆点（并不是加密）
    setAttribute(Qt::WA_TranslucentBackground);  //设置窗口背景为透明，然后重绘窗口
    initEdit(); //初始化lineEdit
}


loginDialog::~loginDialog()
{
    delete ui;
}
//初始化lineEdit
void loginDialog::initEdit(){
    ui->usernameEdit->setPlaceholderText(" 请输入用户名"); //设置占位符文本提示用户输入用户名
    ui->usernameEdit->setFocusPolicy(Qt::ClickFocus); // 点击获得焦点
    ui->passwordEdit->setPlaceholderText(" 请输入密码"); //设置占位符文本，提示用户输入密码
    ui->passwordEdit->setFocusPolicy(Qt::ClickFocus); // 点击获得焦点
}
//重写绘画事件-重绘窗口并设置窗口圆角
void loginDialog::paintEvent(QPaintEvent *event){
    Q_UNUSED(event);
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing,true); //抗锯齿
    painter.setBrush(QColor(Qt::white));// 设置画刷颜色
    painter.setPen(QColor(Qt::white)); //设置画笔颜色
    painter.drawRoundedRect(rect(),12,12); //画圆角矩形
}

2.运行效果

五.实现登录框可移动和自定义关闭窗口按钮

1.重写对话框的鼠标按下(mousePressEvent)、鼠标移动(mouseMoveEvent)、鼠标释放(mouseReleaseEvent)事件，实现在对话框中按下鼠标左键后移动鼠标可以实现对话框在屏幕上进行拖