脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → C 语言 → Qt 登录界面

手把手教你实现漂亮的Qt 登录界面

 更新时间：2021年11月26日 11:31:19   作者：擒拿一只咸鱼干  
最近在使用Qt5，Qt Creator做一个管理系统类的项目，需要用到登录界面，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

前言

最近在使用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 登录界面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • C++实现AVL树的完整代码

    C++实现AVL树的完整代码

    AVL树是高度平衡的而二叉树。它的特点是：AVL树中任何节点的两个子树的高度最大差别为1。 今天通过本文给大家分享C++实现AVL树的完整代码，感兴趣的朋友一起看看吧
    2021-06-06
  • C++ LeeCode题目:比特位计数和买卖股票的最佳时机

    C++ LeeCode题目:比特位计数和买卖股票的最佳时机

    这篇文章主要介绍了基于C语言计算比特位计数和买卖股票的最佳时机,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-07-07
  • 关于C语言操作符的那些事（超级全）

    关于C语言操作符的那些事（超级全）

    这篇文章主要给大家介绍了关于C语言操作符的那些事儿,c语言的操作符有很多，包括算术操作符、移位操作符、位操作符、赋值操作符、单目操作符、关系操作符、逻辑操作符、条件操作符、逗号表达式、下标引用、函数调用和结构成员,需要的朋友可以参考下
    2021-08-08
  • c语言求余数的实例讲解

    c语言求余数的实例讲解

    在本篇文章里小编给大家整理的是关于c语言如何求余数的相关知识点内容，有需要的朋友们可以学习下。
    2020-02-02
  • C++中const用于函数重载的示例代码

    C++中const用于函数重载的示例代码

    这篇文章主要介绍了C++中const用于函数重载的相关资料,需要的朋友可以参考下
    2017-09-09
  • C++ Boost Bimap示例详细讲解

    C++ Boost Bimap示例详细讲解

    Boost是为C++语言标准库提供扩展的一些C++程序库的总称。Boost库是一个可移植、提供源代码的C++库，作为标准库的后备，是C++标准化进程的开发引擎之一，是为C++语言标准库提供扩展的一些C++程序库的总称
    2022-11-11
  • C语言实现反弹球游戏

    C语言实现反弹球游戏

    这篇文章主要为大家详细介绍了C语言实现反弹球游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • C语言堆栈入门指南

    C语言堆栈入门指南

    我身边的一些编程的朋友以及在网上看帖遇到的朋友中有好多也说不清堆栈，所以我想有必要给大家分享一下我对堆栈的看法，有说的不对的地方请朋友们不吝赐教，这对于大家学习会有很大帮助
    2014-01-01
  • 详解C语言之函数

    详解C语言之函数

    本文是小结了一下C语言的函数语法，详细介绍了C语言函数语法的概述、函数的定义、函数的返回值、函数调用等7个方面的内容，非常详细，这里推荐给小伙伴们
    2021-11-11
  • C语言内嵌汇编API内存搜索引擎实例

    C语言内嵌汇编API内存搜索引擎实例

    这篇文章主要介绍了C语言内嵌汇编API内存搜索引擎实例,涉及汇编语言与内存相关操作,需要的朋友可以参考下
    2014-10-10

最新评论