手把手教你實(shí)現(xiàn)漂亮的Qt?登錄界面
前言
最近在使用Qt5，Qt Creator做一個(gè)管理系統(tǒng)類的項(xiàng)目，自然需要用到登錄界面，故記錄一下登錄界面的制作。其中一些功能的實(shí)現(xiàn)也得益于之前Qt5基礎(chǔ)視頻不規(guī)則窗口部分的學(xué)習(xí)。
手把手教你實(shí)現(xiàn)漂亮的登錄界面
首先看一下成品。
第一步、新建一個(gè)Qwidget項(xiàng)目
沒(méi)必要用qmainwindow,不需要那些菜單，一般用qwidget就可以，注意勾選ui。
第二步、添加界面組件
1、添加容器
調(diào)整容器為合適大小，同時(shí)調(diào)整整個(gè)畫布為合適大小。
2、添加按鈕，標(biāo)簽，文字組件
構(gòu)思：
賬號(hào)密碼部分使用Input Widgets：Line Edit
Logo和忘記密碼使用兩個(gè)Display Widgets：TextLabel
是否記住我選擇一個(gè)Buttons：CheckBox
登錄按鈕使用Buttons:PushButton
3、修改組件名稱
首先修改Line Edit默認(rèn)文本屬性，分別點(diǎn)擊兩個(gè)LineEdit修改文本屬性為Username和Password。
然后其他的按鈕文本標(biāo)簽直接雙擊修改名稱即可。
以上兩步之后，可以得到這個(gè)樣子（這里統(tǒng)一在Wighets右邊的菜單里修改過(guò)字體，一會(huì)可以通過(guò)樣式表統(tǒng)一去改）。
4、添加樣式表
類似于css，Qt具有Qss，最為關(guān)鍵的一步就是添加樣式表。在Frame容器外 畫布內(nèi) 右鍵改變樣式表，輸入以下代碼。
*{
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;
}
背景部分找“度娘”就可以。
應(yīng)用樣式表后展示。
第三步、實(shí)現(xiàn)最小化窗口和關(guān)閉窗口功能
1、添加最小化和關(guān)閉窗口按鈕
按鈕選擇Buttons:Tool Button,最小化采用-，關(guān)閉窗口采用x。
2、按鈕轉(zhuǎn)到槽
將兩個(gè)按鈕都轉(zhuǎn)到槽。
3、代碼示例
轉(zhuǎn)到槽之后，只需要在相應(yīng)的函數(shù)里添加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();
}
調(diào)整畫布到合適大小
展示如下:
這個(gè)時(shí)候我們還需要把Widget自帶的上邊框去掉，并且去掉背景。
第四步、隱藏widget窗口邊框和背景
widget.cpp文件中添加如下兩句代碼即可。
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
//去窗口邊框
setWindowFlags(Qt::FramelessWindowHint | windowFlags());
//把窗口背景設(shè)置為透明;
setAttribute(Qt::WA_TranslucentBackground);
}
第五步、實(shí)現(xiàn)界面可移動(dòng)
需要添加一個(gè)鼠標(biāo)移動(dòng)和鼠標(biāo)按下事件。以*e來(lái)獲取鼠標(biāo)移動(dòng)或按下。
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);//鼠標(biāo)移動(dòng)
void mousePressEvent(QMouseEvent *e);//鼠標(biāo)按下移動(dòng)
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());
//把窗口背景設(shè)置為透明;
setAttribute(Qt::WA_TranslucentBackground);
}
Widget::~Widget()
{
delete ui;
}
void Widget::mousePressEvent(QMouseEvent *e)
{
if(e->button() == Qt::LeftButton)
{
//求坐標(biāo)差值
//當(dāng)前點(diǎn)擊坐標(biāo)-窗口左上角坐標(biāo)
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
到此這篇關(guān)于手把手教你實(shí)現(xiàn)漂亮的Qt 登錄界面的文章就介紹到這了,更多相關(guān)Qt 登錄界面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Qt在vs2019中使用及設(shè)置方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了C++中簡(jiǎn)單使用HP-Socket，HP-Socket 是一套通用的高性能 TCP/UDP /HTTP 通信 框架 ，包含服務(wù)端組件、客戶端組件和 Agent 組件，廣泛適用于各種不同應(yīng)用場(chǎng)景的 TCP/UDP /HTTP 通信系統(tǒng)，下面來(lái)看看更具體的介紹吧2021-11-11
C語(yǔ)言strlen函數(shù)實(shí)現(xiàn)讀取字符串長(zhǎng)度詳解
這篇文章主要介紹了用C語(yǔ)言的strlen函數(shù)來(lái)實(shí)現(xiàn)讀取字符串長(zhǎng)度的過(guò)程，strlen所作的是一個(gè)計(jì)數(shù)器的工作，它從內(nèi)存的某個(gè)位置開(kāi)始掃描，直到碰到第一個(gè)字符串結(jié)束符'\0'為止2022-04-04
這篇文章主要和大家介紹12個(gè)C語(yǔ)言中必背的實(shí)例，文中的示例代碼講解詳細(xì)，對(duì)我們了解和掌握C語(yǔ)言有一定的幫助，感興趣的小伙伴快跟隨小編一起了解一下2022-11-11
C語(yǔ)言實(shí)現(xiàn)食堂就餐管理系統(tǒng)(帶鏈表)
這篇文章主要為大家詳細(xì)介紹了C語(yǔ)言實(shí)現(xiàn)食堂就餐管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要為大家詳細(xì)介紹了C++實(shí)現(xiàn)消消樂(lè)游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了C++ lambda 捕獲模式與右值引用的使用,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了KMP 算法實(shí)例詳解的相關(guān)資料,MP的關(guān)鍵是求出next的值、先預(yù)處理出next的值，需要的朋友可以參考下2017-07-07
本篇文章是對(duì)C++大數(shù)模板的程序代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-05-05
Qt實(shí)現(xiàn)一個(gè)簡(jiǎn)單的word文檔編輯器
本文主要介紹了Qt實(shí)現(xiàn)一個(gè)簡(jiǎn)單的word文檔編輯器，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07