手把手教你實現漂亮的Qt 登錄界面

Posted on by

前言

最近在使用Qt5，Qt Creator做一個管理系統類的項目，自然需要用到登錄界面，故記錄一下登錄界面的制作。其中一些功能的實現也得益於之前Qt5基礎視頻不規則窗口部分的學習。

手把手教你實現漂亮的登錄界面

首先看一下成品。

在這裡插入圖片描述

第一步、新建一個Qwidget項目

沒必要用qmainwindow,不需要那些菜單，一般用qwidget就可以，註意勾選ui。

在這裡插入圖片描述

第二步、添加界面組件

1、添加容器

在這裡插入圖片描述

調整容器為合適大小，同時調整整個畫佈為合適大小。

在這裡插入圖片描述

2、添加按鈕，標簽，文字組件

構思：
賬號密碼部分使用Input Widgets：Line Edit
Logo和忘記密碼使用兩個Display Widgets：TextLabel
是否記住我選擇一個Buttons：CheckBox
登錄按鈕使用Buttons:PushButton

在這裡插入圖片描述

3、修改組件名稱

首先修改Line Edit默認文本屬性，分別點擊兩個LineEdit修改文本屬性為Username和Password。

在這裡插入圖片描述

然後其他的按鈕文本標簽直接雙擊修改名稱即可。

在這裡插入圖片描述

以上兩步之後，可以得到這個樣子（這裡統一在Wighets右邊的菜單裡修改過字體，一會可以通過樣式表統一去改）。

在這裡插入圖片描述

4、添加樣式表

類似於css，Qt具有Qss，最為關鍵的一步就是添加樣式表。在Frame容器外 畫佈內 右鍵改變樣式表，輸入以下代碼。

*{
background:rgb(255, 255, 255);
font-size:15px;
font-style:MingLiU-ExtB;
}
QFrame{
border:sold 10px rgba(0,0,0);
background-image:url(H:/GUI_design/day04/image/Login_Blue5);//背景
}
QLineEdit{
color:#8d98a1;
background-color:#405361;
font-size:16px;
border-style:outset;
border-radius:10px;
font-style:MingLiU-ExtB;
}
QPushButton{
background:#ced1d8;
border-style:outset;
border-radius:10px;
font-style:MingLiU-ExtB;
}
QPushButton:pressed{
background-color:rgb(224,0,0);
border-style:inset;
font-style:MingLiU-ExtB;
}
QCheckBox{
background:rgba(85,170,255,0);
color:white;
font-style:MingLiU-ExtB;
}
QLabel{
background:rgba(85,170,255,0);
color:white;
font-style:MingLiU-ExtB;
font-size:14px;
}

背景部分找“度娘”就可以。

在這裡插入圖片描述

應用樣式表後展示。

在這裡插入圖片描述

第三步、實現最小化窗口和關閉窗口功能

1、添加最小化和關閉窗口按鈕

按鈕選擇Buttons:Tool Button,最小化采用-，關閉窗口采用x。在這裡插入圖片描述

2、按鈕轉到槽

將兩個按鈕都轉到槽。

在這裡插入圖片描述

3、代碼示例

轉到槽之後，隻需要在相應的函數裡添加close()和showMinimized()功能即可。具體的代碼如下。

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

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

private slots:
    void on_toolButton_clicked();

    void on_toolButton_2_clicked();

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

main.cpp

#include "widget.h"

#include <QApplication>

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

widget.cpp

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

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

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

//核心代碼就這幾行
void Widget::on_toolButton_clicked()
{
    close();
}

void Widget::on_toolButton_2_clicked()
{
    showMinimized();
}

調整畫佈到合適大小

在這裡插入圖片描述

展示如下:

在這裡插入圖片描述

這個時候我們還需要把Widget自帶的上邊框去掉，並且去掉背景。

第四步、隱藏widget窗口邊框和背景

widget.cpp文件中添加如下兩句代碼即可。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //去窗口邊框
        setWindowFlags(Qt::FramelessWindowHint | windowFlags());

    //把窗口背景設置為透明;
        setAttribute(Qt::WA_TranslucentBackground);
}

第五步、實現界面可移動

需要添加一個鼠標移動和鼠標按下事件。以*e來獲取鼠標移動或按下。
main.cpp

#include "widget.h"

#include <QApplication>

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

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

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

protected:

    void mouseMoveEvent(QMouseEvent *e);//鼠標移動
    void mousePressEvent(QMouseEvent *e);//鼠標按下移動

private slots:
    void on_close_clicked();

    void on_minimized_clicked();


private:
    Ui::Widget *ui;

     QPoint p;
};
#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include <QPainter>
#include <QMouseEvent>


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

    //去窗口邊框
        setWindowFlags(Qt::FramelessWindowHint | windowFlags());

    //把窗口背景設置為透明;
        setAttribute(Qt::WA_TranslucentBackground);

}

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


void Widget::mousePressEvent(QMouseEvent *e)
{
    if(e->button() == Qt::LeftButton)
    {
        //求坐標差值
        //當前點擊坐標-窗口左上角坐標
        p = e->globalPos() - this->frameGeometry().topLeft();
    }
}

void Widget::mouseMoveEvent(QMouseEvent *e)
{
    if(e->buttons() & Qt::LeftButton)
    {
        //移到左上角
        move(e->globalPos() - p);
    }

}

void Widget::on_close_clicked()
{
    close();
}
void Widget::on_minimized_clicked()
{
    showMinimized();
}

參考：

https://www.bilibili.com/video/BV1gb411W7WE?p=2

到此這篇關於手把手教你實現漂亮的Qt 登錄界面的文章就介紹到這瞭,更多相關Qt 登錄界面內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：