欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

手把手教你實(shí)現(xiàn)漂亮的Qt?登錄界面

 更新時(shí)間：2021年11月26日 11:31:19   作者：擒拿一只咸魚(yú)干  
最近在使用Qt5，Qt?Creator做一個(gè)管理系統(tǒng)類的項(xiàng)目，需要用到登錄界面，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

最近在使用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è)畫(huà)布為合適大小。

在這里插入圖片描述

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容器外 畫(huà)布內(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)整畫(huà)布到合適大小

在這里插入圖片描述

展示如下:

在這里插入圖片描述

這個(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)文章

  • C++符號(hào)優(yōu)先級(jí)(詳細(xì)整理)

    C++符號(hào)優(yōu)先級(jí)(詳細(xì)整理)

    C++符號(hào)優(yōu)先級(jí)，我詳細(xì)整理了一下。需要的朋友可以過(guò)來(lái)參考下。希望對(duì)大家有所幫助
    2013-10-10
  • c++實(shí)現(xiàn)跳躍表（Skip List）的方法示例

    c++實(shí)現(xiàn)跳躍表（Skip List）的方法示例

    跳表（skiplist）是一個(gè)非常優(yōu)秀的數(shù)據(jù)結(jié)構(gòu)，實(shí)現(xiàn)簡(jiǎn)單，插入、刪除、查找的復(fù)雜度均為O(logN)，下面這篇文章主要介紹了c++實(shí)現(xiàn)跳躍表（Skip List）的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-09-09
  • C語(yǔ)言編程入門(mén)之程序頭文件的簡(jiǎn)要解析

    C語(yǔ)言編程入門(mén)之程序頭文件的簡(jiǎn)要解析

    這篇文章主要介紹了C語(yǔ)言編程入門(mén)之程序頭文件的簡(jiǎn)要解析,包括頭文件重復(fù)包含問(wèn)題等方面的說(shuō)明,需要的朋友可以參考下
    2015-12-12
  • C++歸并排序算法實(shí)例

    C++歸并排序算法實(shí)例

    這篇文章主要介紹了C++歸并排序算法實(shí)例,本文先是介紹了什么是歸并排序,然后給出了實(shí)現(xiàn)代碼,需要的朋友可以參考下
    2014-10-10
  • C語(yǔ)言趣味編程之平分七筐魚(yú)

    C語(yǔ)言趣味編程之平分七筐魚(yú)

    這篇文章介紹了C語(yǔ)言趣味編程之平分七筐魚(yú)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-11-11
  • OpenGL畫(huà)bezier曲線

    OpenGL畫(huà)bezier曲線

    這篇文章主要為大家詳細(xì)介紹了OpenGL畫(huà)bezier曲線，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-04-04
  • 深入理解goto語(yǔ)句的替代實(shí)現(xiàn)方式分析

    深入理解goto語(yǔ)句的替代實(shí)現(xiàn)方式分析

    本篇文章是對(duì)goto語(yǔ)句的替代實(shí)現(xiàn)方式進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
    2013-05-05
  • C語(yǔ)言小程序 如何判斷兩個(gè)日期之差

    C語(yǔ)言小程序 如何判斷兩個(gè)日期之差

    輸入兩個(gè)日期，計(jì)算之間相差多少天。 用了兩種方法實(shí)現(xiàn)，第二種利用結(jié)構(gòu)體，代碼比較清晰，其余的都一樣
    2013-07-07
  • C++ 學(xué)習(xí)之旅二 說(shuō)一說(shuō)C++頭文件

    C++ 學(xué)習(xí)之旅二 說(shuō)一說(shuō)C++頭文件

    作為一個(gè)二手的.net程序員，你看到了C++頭文件一定就犯迷糊了，這到底是個(gè)啥玩意。再我糾結(jié)了24個(gè)小時(shí)， google20次，度娘10下，看過(guò)10來(lái)騙文章以后，我可能稍微開(kāi)竅了。我對(duì)C++頭文件總結(jié)，與.net比較如下
    2012-11-11
  • Visual Studio 2019配置qt開(kāi)發(fā)環(huán)境的搭建過(guò)程

    Visual Studio 2019配置qt開(kāi)發(fā)環(huán)境的搭建過(guò)程

    這篇文章主要介紹了Visual Studio 2019配置qt開(kāi)發(fā)環(huán)境的搭建過(guò)程,本文圖文并茂給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-03-03

最新評(píng)論