当前位置：首页 > article >正文

基于Qt的qss登录界面优化

article 2025/1/2 3:37:23

目标

在登录界面的登录取消按钮进行以下设置：

使用手动连接，将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中，在自定义的槽函数中调用关闭函数。

将登录按钮使用qt5版本的连接到自定义的槽函数中，在槽函数中判断ui界面上输入的账号是否为"admin"，密码是否为"123456",如果账号密码匹配成功，则输出“登录成功”，并关闭该界面，弹出另一个界面。如果匹配失败，则输出登录失败，并将密码框中的内容清空。

代码及实现效果

界面一qss

*{
	background-color: rgb(255, 255, 255);
}
QFrame#frame{
	
	border-image: url(:/picture/kda-poster-02.8ba864.jpg);
	border-radius:20px;
}
#frame_2{
	
	background-color: rgba(100, 100, 100, 50);
	border-radius:20px;
}
QLabel#label{
	
	background-color: rgba(100, 100, 100, 140);
	border-radius:20px;
}
#label_2{
	
	font: 25 12pt "微软雅黑";
	background:transparent;
	
	color: rgba(255, 255, 255, 200);
}
QLineEdit{
	background:transparent;
	border:none;
	color: rgba(255, 255, 255, 200);
	border-bottom:1px solid rgba(255, 255, 255, 200);
}
QPushButton{
	
	font: 10pt "微软雅黑";
	color: rgb(255, 255, 255);
	background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1, stop:0 rgba(186, 33, 198, 255), stop:1 rgba(179, 215, 255, 255));
	border-radius:5px;
}
QPushButton:hover{/*鼠标移动*/
	
	font: 10pt "微软雅黑";
	color: rgb(255, 255, 255);
	background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1, stop:0 rgba(200, 33, 198, 255), stop:1 rgba(179, 215, 255, 255));
	border-radius:5px;
}
QPushButton:pressed{/*鼠标按下*/
	font: 10pt "微软雅黑";
	color: rgb(255, 255, 255);
	background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1, stop:0 rgba(186, 33, 198, 255), stop:1 rgba(179, 215, 255, 255));
	border-radius:5px;
	padding-top:5px;
	padding-left:5px;
}

界面一头文件

#ifndef WIDGET_H
#define WIDGET_H
#include <QDebug>
#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT
public slots:
    void my_close();
public:
    Widget(QWidget *parent = nullptr);
    ~Widget();
signals:
    void my_log();
private slots:
    void on_logbutt_clicked();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

界面二头文件

#ifndef LOGWINDOW_H
#define LOGWINDOW_H

#include <QWidget>
#include <Qicon>
namespace Ui {
class logwindow;
}

class logwindow : public QWidget
{
    Q_OBJECT
public slots:
    void log_in();
public:
    explicit logwindow(QWidget *parent = nullptr);
    ~logwindow();

private:
    Ui::logwindow *ui;
};

#endif // LOGWINDOW_H

界面一功能函数

#include "widget.h"
#include "ui_widget.h"

void Widget::my_close()
{
    close();
}

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    this->setWindowIcon(QIcon(":/picture/lol.webp"));
    this->setWindowTitle("英雄联盟");
    ui->setupUi(this);
    this->setWindowFlag(Qt::FramelessWindowHint);
    this->setAttribute(Qt::WA_TranslucentBackground);
    connect(ui->cbutt,SIGNAL(clicked()),this,SLOT(my_close()));
}

Widget::~Widget()
{
    delete ui;
}


void Widget::on_logbutt_clicked()
{
    if((ui->namelet->text()=="admin")||(ui->passwordle->text()=="123456")){
        this->close();
        emit my_log();
        qDebug()<<"登录成功"<<endl;
    }else{
        qDebug()<<"登录失败"<<endl;
        ui->passwordle->setText("");
    }
}

界面二功能函数

#include "logwindow.h"
#include "ui_logwindow.h"



logwindow::logwindow(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::logwindow)
{
    ui->setupUi(this);
    this->setWindowIcon(QIcon(":/picture/lol.webp"));
    this->setWindowTitle("英雄联盟");
}

logwindow::~logwindow()
{
    delete ui;
}

void logwindow::log_in()
{
    this->show();
}

主函数

#include "widget.h"
#include "logwindow.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();
    logwindow l;
    QObject::connect(&w,&Widget::my_log,&l,&logwindow::log_in);
    return a.exec();
}