【QT】仿QQ样式写的登录界面样式半成品（持续更新）

#include "mywidget.h"

void MyWidget::my_slot()
{
    //属性版本消息对话框 实例化--->调用成员函数
    QMessageBox msg_close(QMessageBox::Warning,
                          "退出",
                          "是否退出登陆？",
                          QMessageBox::Yes | QMessageBox::No,
                          this);
    int ret = msg_close.exec();
    if(ret == QMessageBox::Yes)
    {
       this->close();
    }/*else
    {
        msg_close.close();
    }*/
}

void MyWidget::login_slot()
{
    //静态成员函数版本消息对话框
//    qDebug() << edit1->text();
//    qDebug() << edit2->text();
    QString username = edit1->text();
    QString password = edit2->text();
    if(username.compare("admin")==0 && password.compare("123456")==0)
    {
        int ret = QMessageBox::information(this,
                                 "提示",
                                 "是否确认登录",
                                 QMessageBox::Yes |QMessageBox::No
                                 );
        if(ret == QMessageBox::Yes)
        {
            qDebug() << "登录成功";
            this->close();
            emit jump_signal();
        }
        else
        {
            qDebug() << "用户未选择登录";
            //edit1->clear();
            //edit2->clear();
        }

    }else
    {
        QMessageBox::warning(this,
                             "登录失败",
                             "密码或者账号输入错误，请重新登录",
                             QMessageBox::Ok);
        qDebug() << "登录失败，账号或密码错误";
        edit1->clear();
        edit2->clear();
    }
}

void MyWidget::enable_slot()
{
    //设置账号或密码栏空的情况下登录按钮不可用
    if(edit1->text()==""||edit2->text()=="")
    {
        btn1->setEnabled(false);
        frame_btn1->show();
    }else
    {
        btn1->setEnabled(true);
        frame_btn1->hide();
    }
}

MyWidget::MyWidget(QWidget *parent)
    : QWidget(parent),
      edit1(new QLineEdit(this)),edit2(new QLineEdit(this)),
      btn1(new QPushButton("登录",this)),frame_btn1(new QFrame(btn1))
{
    //设置窗口的标题
    this->setWindowTitle("小咚咚的宠物贩卖乐园");
    //设置窗口的图标
    this->setWindowIcon(QIcon(":/img/DongDong.jpeg"));
    //设置窗口的颜色   薄荷绿158,211,193 青草绿153,255,153 橙色255,170,0
    this->setStyleSheet("background-color:rgb(237, 217, 153)");
    //重新设置窗口的大小
    this->resize(535,408);
    //固定窗口大小
    //this->setFixedSize(this->size());
    //设置纯净窗口 去掉头部
    this->setWindowFlag(Qt::FramelessWindowHint);

    /*设置最上边标签背景动图*/
    //创建标签
    QLabel *lab=new QLabel(this);
    //设置标签大小
    lab->resize(535,190);
    //创建动图
    QMovie *mv = new QMovie(":/img/dong6.gif");
    lab->setMovie(mv); //在标签里面添加动图
    mv->start();//让动图动起来
    //设置标签的图适应标签
    lab->setScaledContents(true);

    /*设置左上角的图片标签图*/
    //创建标签
    QLabel *lab_tu = new QLabel(lab);
    //设置标签大小
    lab_tu->resize(48,48);
    //移动位置
    lab_tu->move(0+5,0+5);
    //设置背景为透明
    lab_tu->setStyleSheet("background:transparent");
    //设置文字图片
    lab_tu->setPixmap(QPixmap(":/img/DongDong.jpeg"));
    //设置标签的图适应标签
    lab_tu->setScaledContents(true);
    //阴影
    QGraphicsDropShadowEffect *shadow_1=new QGraphicsDropShadowEffect();
//    shadow_1->setBlurRadius(effect);
//    shadow_1->setColor(color);
//    shadow_1->setOffset(offset);
    shadow_1->setOffset(1.5);
    lab_tu->setGraphicsEffect(shadow_1);//must use poniter

    /*设置左上角的文字标签图*/
    //创建标签
    QLabel *lab_zi = new QLabel(lab);
    //设置标签大小
    lab_zi->resize(172,48);
    //移动位置
    lab_zi->move(48+5,0+5);
    //设置背景为透明 边框
    lab_zi->setStyleSheet("background:transparent");
    //设置文字图片
    lab_zi->setPixmap(QPixmap(":/img/wenzi1.png"));
    //设置标签的图适应标签
    lab_zi->setScaledContents(true);
    //阴影
    QGraphicsDropShadowEffect *shadow_2=new QGraphicsDropShadowEffect();
    shadow_2->setOffset(2);
    lab_zi->setGraphicsEffect(shadow_2);//must use poniter


    /*创建第行编辑器:输入账号用*/
    //QLineEdit *edit1 = new QLineEdit(this);
    //设置占位字符
    edit1->setPlaceholderText("请输入咚咚号码");
    //调整位置
    edit1->move(144,213);
    //设置大小
    edit1->resize(280,35);
    //设置边框
    edit1->setStyleSheet("QLineEdit{border-width:0;border-style:outset;border-bottom:1px solid grey}");
    //设置文字居右
    edit1->setAlignment(Qt::AlignLeft);
    /*账号的右边的图片*/
    //创建第1个标签
    QLabel *lab1 = new QLabel(this);
    //设置大小
    lab1->resize(35,35);
    //移动
    lab1->move(114-5,213);
    //设置背景透明
    lab1->setStyleSheet("background:transparent;border-bottom:1px solid grey");
    //创建动图
    QMovie *mv1 = new QMovie(":/img/dong3.gif");
    lab1->setMovie(mv1); //在标签里面添加动图
    mv1->start();        //让动图动起来
    //设置标签的图适应标签
    lab1->setScaledContents(true);

    /*创建第行编辑器:输入密码用*/
    //QLineEdit *edit2 = new QLineEdit(this);
    //设置占位字符
    edit2->setPlaceholderText("请输入咚咚密码");
    //设置密码输入模式
    edit2->setEchoMode(QLineEdit::Password);
    //调整位置
    edit2->move(144,243+10);
    //设置大小
    edit2->resize(280,35);
    //设置边框
    edit2->setStyleSheet("QLineEdit{border-width:0;border-style:outset;border-bottom:1px solid grey}");
    //设置文字居右
    edit2->setAlignment(Qt::AlignLeft);
    /*密码的右边的图片*/
    //创建第2个标签
    QLabel *lab2 = new QLabel(this);
    //设置大小
    lab2->resize(35,35);
    //移动
    lab2->move(114-5,243+10);
    //设置背景透明 边框
    lab2->setStyleSheet("background:transparent;border-bottom:1px solid grey");
    //设置背景图片
    //lab2->setPixmap(QPixmap("D:\\Qt\\QtProject\\DongDongPets\\DongPets\\img\\password.png"));
    //创建动图
    QMovie *mv2 = new QMovie(":/img/dong1.gif");
    lab2->setMovie(mv2); //在标签里面添加动图
    mv2->start();        //让动图动起来
    //设置标签的图适应标签
    lab2->setScaledContents(true);

    /*设置登录按钮*/
//    QPushButton *btn1 = new QPushButton("登录",this);
    //设置背景颜色    194, 165, 132   设置倒角
    //btn1->setStyleSheet("background-color:rgb(176, 211, 146);color:white;border-radius:5px");
    btn1->setStyleSheet("QPushButton{background-color:rgb(194, 165, 132);color:white;border-radius:5px}"
                        "QPushButton:hover{background-color:rgb(131, 103, 83)}"
                        "QPushButton:pressed{padding-top:5px;padding-left:5px}");

    //移动
    btn1->move(120,342);
    //设置大小
    btn1->resize(300,45);
    //阴影
    QGraphicsDropShadowEffect *shadow_3=new QGraphicsDropShadowEffect();
    shadow_1->setBlurRadius(5);
    shadow_3->setColor("green");
    shadow_3->setOffset(1);
    btn1->setGraphicsEffect(shadow_3);//must use poniter
    //设置连接函数实现点击出现槽函数效果 ---------->qt5版本的连接函数
    connect(btn1,&QPushButton::clicked,this,&MyWidget::login_slot);
    //连接行编辑器和登录按钮的信号和槽
    //const QString test;
    btn1->setEnabled(false);//设置按钮为不可用状态
    connect(edit1,SIGNAL(textChanged(const QString &)),this,SLOT(enable_slot()));
    connect(edit2,SIGNAL(textChanged(const QString &)),this,SLOT(enable_slot()));
    //不可用蒙版的展示
    frame_btn1->setStyleSheet("background-color: rgba(155, 155, 155, 125);");
    frame_btn1->resize(btn1->size());
    frame_btn1->show();
    /*==============设置关闭按钮==============*/
    QPushButton *close_btn=new QPushButton(this);
    close_btn->resize(48,48);
    close_btn->setStyleSheet(
                "QPushButton{border-image:url(:/img/close.png);}}"
                "QPushButton{background-color: rgba(255, 255, 255, 0);}"
                "QPushButton:hover{background-color: rgba(255, 85, 127, 90);}");
    close_btn->move(this->width()-close_btn->width(),0);
    //阴影
    QGraphicsDropShadowEffect *shadow_4=new QGraphicsDropShadowEffect();
    shadow_4->setOffset(2);
    close_btn->setGraphicsEffect(shadow_4);//must use poniter
    //设置信号与槽函数来实现点击关闭的效果        ------->qt4版本的连接函数
    connect(close_btn,SIGNAL(clicked()),this,SLOT(my_slot()));
    /*======================================*/

}

MyWidget::~MyWidget()
{
    delete edit1;
    delete edit2;
}

思维导图