嵌入式学习

笔记

作业

升级优化自己应用程序的登录界面。
     要求： 1. qss实现
                 2. 需要有图层的叠加 （QFrame）
                 3. 设置纯净窗口后，有关闭等窗口功能。
                 4. 如果账号密码正确，则实现登录界面关闭，另一个应用界面显示。

        登录界面代码：

widget.h文件：

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QTimer>
#include <QMouseEvent>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

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

signals:
    void my_signal_mul();//"X"  关闭窗口  的信号函数
    void my_signal_login();//登录按钮  对应的  信号函数
    void my_signal_cancel();//取消按钮  对应的  信号函数
    void my_jump();//第一个界面的信号


public slots:
    void my_slot_mul();//"X"  关闭窗口  的槽函数
    void my_slot_login();//登录按钮  对应的  槽函数
    void my_slot_cancel();//取消按钮  对应的  槽函数
    void my_slot_jump_back();//返回  登录页面  的槽函数

private:
    Ui::Widget *ui;

protected:
    //重写鼠标按下事件
    void mousePressEvent(QMouseEvent *event) override;
    //重写鼠标移动事件
    void mouseMoveEvent(QMouseEvent *event) override;

private:
    QPoint dragPosition;//声明一个坐标点
};
#endif // WIDGET_H

widget.cpp文件：

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

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    this->setWindowFlag(Qt::FramelessWindowHint);//设置纯净窗口

    this->setAttribute(Qt::WA_TranslucentBackground);//去掉空白部分

    connect(ui->btn_login, &QPushButton::clicked, this, &Widget::my_slot_login);//登录  按钮  连接槽函数
    connect(ui->btn_cancel, &QPushButton::clicked, this, &Widget::my_slot_cancel);//取消  按钮  连接槽函数
    connect(ui->btn_mul, &QPushButton::clicked, this, &Widget::my_slot_mul);//"X" 按钮  连接槽函数


}

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

//"X" 按钮  对应的  槽函数
void Widget::my_slot_mul()
{
    this->close();
}


//登录按钮  对应的  槽函数
void Widget::my_slot_login()
{
    if(ui->lineEdit_userame->text() == "admin" && ui->lineEdit_passwd->text() == "123456")
    {
        /*
        QLabel *lab_login_success = new QLabel("登录成功",this);//创建  “登录成功”  标签
        lab_login_success->resize(100,ui->lineEdit_userame->height());//设置标签大小，与登录按钮高度相同
        lab_login_success->setStyleSheet("background-color:rgb(220,220,220)");//设置标签颜色
        lab_login_success->show();//标签显示
        lab_login_success->setAlignment(Qt::AlignCenter);//设置标签中文本居中显示
        lab_login_success->move(ui->btn_login->x(),ui->btn_login->y()-lab_login_success->height());//设置标签位置在登录按钮上方

        //关闭标签
        QTimer::singleShot(3000,lab_login_success,SLOT(close()));//仅在3秒后关闭标签
        */
        this->close();//关闭窗口

        emit my_jump();//触发信号

    }else
    {
        QLabel *lab_login_failure = new QLabel("登陆失败",this);//创建  “登录失败”  标签
        lab_login_failure->resize(100,ui->lineEdit_userame->height());//设置标签大小，与登录按钮高度相同
        lab_login_failure->setStyleSheet("background-color:rgb(220,220,220)");//设置标签颜色
        lab_login_failure->show();//标签显示
        lab_login_failure->setAlignment(Qt::AlignCenter);//设置标签中文本居中显示
        lab_login_failure->move(ui->btn_login->x(),ui->btn_login->y()-lab_login_failure->height());//设置标签位置在登录按钮上方
        ui->lineEdit_passwd->clear();//清空  密码  行编辑器中的内容

        //关闭标签
        QTimer::singleShot(3000,lab_login_failure,SLOT(close()));//仅在3秒后关闭标签
    }
}


//取消按钮  对应的  槽函数
void Widget::my_slot_cancel()
{
    //清空  账户和密码  行编辑器中的内容
    ui->lineEdit_userame->clear();//清空  账户  行编辑器中的内容
    ui->lineEdit_passwd->clear();//清空  密码  行编辑器中的内容
}

//重写鼠标按下事件
void Widget::mousePressEvent(QMouseEvent *event) {
    // 当按下鼠标左键时记录当前位置
    if (event->button() == Qt::LeftButton) {
        dragPosition = event->globalPos();
        event->accept();
    }
}

void Widget::my_slot_jump_back()
{
    this->show();//显示当前页面
}


//重写鼠标移动事件
void Widget::mouseMoveEvent(QMouseEvent *event) {
    // 当移动鼠标时移动窗口
    if (event->buttons() & Qt::LeftButton) {
        move(this->x() + event->globalPos().x() - dragPosition.x(),
             this->y() + event->globalPos().y() - dragPosition.y());
        dragPosition = event->globalPos();
        event->accept();
    }
}

qss语句：

*{
	
	background-color: rgb(255, 255, 255);
}

QFrame#frame{  /*背景*/
	
	border-image: url(:/Logo/shanChuan.jpg);

	border-radius:10px
}

#frame_surface{
	
	background-color: rgba(190, 190, 190, 100);
}


QPushButton{
	color: rgb(255, 255, 255);

	background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1, stop:0 rgba(81, 81, 81, 120), stop:1 rgba(255, 255, 255, 255));

	border-radius:5px;
}

QPushButton:hover{
	color: rgb(255, 255, 255);

	background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1, stop:0 rgba(85, 81, 81, 120), stop:1 rgba(255, 255, 255, 255));

	border-radius:5px;
}

QPushButton:pressed{  /*鼠标按下*/
	color: rgb(255, 255, 255);

	background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1, stop:0 rgba(85, 81, 81, 120), stop:1 rgba(255, 255, 255, 255));

	border-radius:5px;

	padding-top:5px;
	padding-left:5px;
}

/*右上角三个按钮*/
QPushButton#btn_set,#btn_sub,#btn_mul{
	
	background-color: rgba(106, 102, 116, 0);

	/*color: rgb(255, 255, 255);*/

	border: none;
}


/*主题标签*/
QLabel#label_theme{
	
	background-color: rgba(81, 81, 81, 120);
	border-radius:5px;
}

/*头像标签*/
QLabel#label_head{
	
	border-image: url(:/QQ/head.png);
	background-color: rgba(255, 255, 255, 90);
	border-radius: 25px;
	
}

/*账号  密码*/
QLineEdit{
	background: transparent;
	border: none;
	border-bottom:1px solid rgba(255, 255, 255, 120);
	color: rgb(255, 255, 255, 120);
}

QPushButton#btn_login,#btn_cancel{
	background-color: rgba(81, 81, 81, 120);
	border-radius:5px;
}

        第二个界面：

second.h文件：

#ifndef SECOND_H
#define SECOND_H

#include <QWidget>
#include <QMovie>
#include <QMouseEvent>

namespace Ui {
class Second;
}

class Second : public QWidget
{
    Q_OBJECT

public:
    explicit Second(QWidget *parent = nullptr);
    ~Second();

signals:
    void my_signal_mul();//"X" 按钮  的信号函数
    void my_signal_back();//返回  按钮  的信号函数
    void my_signal_jump_back();//返回  登录页面  的信号函数

public slots:
    void jump_slot();//第二个界面准备的槽函数
    void my_slot_mul();//"X" 按钮  的槽函数
    void my_slot_back();//返回  按钮  的槽函数

private:
    Ui::Second *ui;


protected:
    //重写鼠标按下事件
    void mousePressEvent(QMouseEvent *event) override;
    //重写鼠标移动事件
    void mouseMoveEvent(QMouseEvent *event) override;

private:
    QPoint dragPosition;//声明一个坐标点
};

#endif // SECOND_H

second.cpp文件：

#include "second.h"
#include "ui_second.h"

Second::Second(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Second)
{
    ui->setupUi(this);

    this->setWindowFlag(Qt::FramelessWindowHint);//设置纯净窗口

    this->setAttribute(Qt::WA_TranslucentBackground);//去掉空白部分

    QMovie *mv = new QMovie(":/QQ/zz.gif");//设置一个动图对象接收动图
    ui->label_top->setMovie(mv);//将动图设置到顶部标签中
    mv->start();//让动图动起来
    ui->label_top->setScaledContents(true);//让图片自适应
    ui->label_top->setStyleSheet("border-radius:5px");//设置边框圆角

    connect(ui->btn_mul, &QPushButton::clicked, this, &Second::my_slot_mul);//"X" 按钮  连接  槽函数

    connect(ui->btn_back, &QPushButton::clicked, this, &Second::my_slot_back);//“返回”  按钮  连接  槽函数

}

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

void Second::jump_slot()
{
    this->show();//显示
}


//重写鼠标按下事件
void Second::mousePressEvent(QMouseEvent *event) {
    // 当按下鼠标左键时记录当前位置
    if (event->button() == Qt::LeftButton) {
        dragPosition = event->globalPos();
        event->accept();
    }
}


//重写鼠标移动事件
void Second::mouseMoveEvent(QMouseEvent *event) {
    // 当移动鼠标时移动窗口
    if (event->buttons() & Qt::LeftButton) {
        move(this->x() + event->globalPos().x() - dragPosition.x(),
             this->y() + event->globalPos().y() - dragPosition.y());
        dragPosition = event->globalPos();
        event->accept();
    }
}

// “X” 按钮对应的槽函数
void Second::my_slot_mul()
{
    this->close();//点击  “X”  按钮   关闭整个窗口
}

//“返回”  按钮  对应的  槽函数
void Second::my_slot_back()
{
    this->close();//关闭当前窗口
    emit my_signal_jump_back();//触发信号
}

 qss语句：

*{
	
	background-color: rgb(255, 255, 255);
}

QFrame#frame{
	border-radius:5px;
}

QPushButton{
	color: rgb(255, 255, 255);

	background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1, stop:0 rgba(81, 81, 81, 120), stop:1 rgba(255, 255, 255, 255));

	border-radius:5px;
}

QPushButton:hover{
	color: rgb(255, 255, 255);

	background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1, stop:0 rgba(85, 81, 81, 120), stop:1 rgba(255, 255, 255, 255));

	border-radius:5px;
}

QPushButton:pressed{  /*鼠标按下*/
	color: rgb(255, 255, 255);

	background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1, stop:0 rgba(85, 81, 81, 120), stop:1 rgba(255, 255, 255, 255));

	border-radius:5px;

	padding-top:5px;
	padding-left:5px;
}

QPushButton#btn_mul{
	background-color: rgba(106, 102, 116, 0);

	border: none;
}

        主函数：

main.c文件：

#include "widget.h"
#include "second.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();

    Second s;//实例化第二个界面

    QObject::connect(&w, &Widget::my_jump, &s, &Second::jump_slot);//登陆页面  跳转到  第二个页面

    QObject::connect(&s, &Second::my_signal_jump_back, &w, &Widget::my_slot_jump_back);//第二个页面  跳转到  登陆页面

    return a.exec();
}

实现效果：