【QT学习】利用标签、编辑框、按钮制作登录界面

---

前言

   使用QT Creater制作一款登录界面，是许多QT初学者上的第一堂课。虽然制作登录界面并不难，但是在制作登录界面过程中学习调用Qt函数库的方法，可以说是我们整个Qt学习的一个缩影。本篇将介绍如何利用标签、编辑框、按钮三个控件类制作登陆界面。

---

一、实现效果

二、先备知识

1.QLabel（标签类）

• QT界面中的标签类
• 一个用于显示文本或图像的窗口控件

QLabel实例：

	//1.创建显示文本文字
	QLabel *label = new QLabel("登录界面",this);				//创建标签到当前界面
    label->move(100,100);									//将标签移动到指定位置
    
    //2.创建标签显示静态图片
	QLabel *imgLabel = new QLabel(this);					//创建标签
	imgLabel->setPixmap(QPixmap("./picture/xxx.png"));		//将图片插入标签	
	imgLabel->setGeometry(0,0,550,200);						//设置标签大小及位置
	imgLabel->setScaledContents(true);						//设置图片自适应标签大小
	
	//3.创建标签显示GIF图片
	QMovie *Movie = new QMovie("./picture/xxx.gif"); 	  	//从文件中接收gif图
	QLabel *imgLabel = new QLabel(this);					//创建标签  
	imgLabel ->setMovie(Movie);								//将gif图插入标签
	imgLabel ->setGeometry(0,0,550,200);					//设置标签大小及位置    
    imgLabel->setScaledContents(true);						//设置gif图自适应标签大小
    Movie->start();											//播放gif图,否则图片无法显示

实例效果：

关于在QLabel中插入图片的详细介绍，可以点击跳转【QT学习】QLabel显示（动态/静态）图片。

2.QLineEdit（编辑框类）

• QT界面中的编辑框类
• 一个用于键盘输入并显示的窗口控件

QLineEdit实例：

	//在当前窗口创建两个编辑框
	QLineEdit *lineEdit1 = new QLineEdit(this);
    QLineEdit *lineEdit2 = new QLineEdit(this);
    //设置两个编辑框的大小和位置
    lineEdit1->setGeometry(200,150,150,30);
    lineEdit2->setGeometry(200,200,150,30);
    //将第二个编辑框设置为密文显示
    lineEdit2->setEchoMode(QLineEdit::Password);

实例效果：

3.QPushButton（按钮类）

• QT界面中的按钮类
• 一个用于触发执行某个动作的窗口控件

QPushButton实例：

	//1.创建普通按钮
    QPushButton *pushButton1 = new QPushButton("登录",this);
    pushButton1->setGeometry(200,100,50,30);

	//2.创建按钮，并通过setStyleSheet自定义按钮外观
    QPushButton *pushButton2 = new QPushButton(this);
    pushButton2->setGeometry(100,200,300,50);
    pushButton2->setStyleSheet("QPushButton{border-image:url(./picture/logic3.png);}");

实例效果：

三、实现流程

   1.创建两个按钮，用来进行登录操作和注册操作，并设置自定义外观
   2.创建两个输入框，用来输入账号和密码，设置密码显示方式为密文显示
   3.创建六个标签，用来插入白底背景图、GIF图、标题图、用户名背景图、密码背景图、二维码图
   4.创建包含以上十个控件的登录类并创建类对象，通过show函数显示登录界面

四、完整源码

1.main.cpp文件

#include "logicwin.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    //创建登录窗口
    logicWin *logic = new logicWin();
    //显示登录窗口
    logic->show();
    return a.exec();
}

2.logic.h文件

#ifndef LOGICWIN_H
#define LOGICWIN_H

#include <QWidget>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>

class logicWin : public QWidget
{
    Q_OBJECT
public:
    explicit logicWin(QWidget *parent = 0);
    QLabel *bgPic,*topGIF,*topText,*userPic,*passwdPic,*qrPic;
    QLineEdit *lineEdit1,*lineEdit2;
    QPushButton *logicBtn,*regBtn;
signals:

public slots:
};

#endif // LOGICWIN_H

3.logic.cpp文件

#include <QRegExpValidator>
#include <QMovie>
#include <QPixmap>
#include "logicwin.h"

logicWin::logicWin(QWidget *parent) : QWidget(parent)
{
    //设置固定长550，宽400的登录窗口
    this->setFixedSize(550,400);

    //创建标签插入白底背景图片
    this->bgPic = new QLabel(this);
    this->bgPic->setGeometry(0,0,550,400);
    this->bgPic->setPixmap(QPixmap("./picture/bg.png"));
    this->bgPic->setScaledContents(true);
    //创建标签插入GIF图
    QMovie *movie = new QMovie("./picture/logic1.gif");
    this->topGIF = new QLabel(this);
    this->topGIF->setGeometry(0,0,550,150);
    this->topGIF->setScaledContents(true);
    this->topGIF->setMovie(movie);
    movie->start();
    //创建标签插入标题图片
    this->topText = new QLabel(this);
    this->topText->setGeometry(125,40,300,100);
    this->topText->setPixmap(QPixmap("./picture/logicLabel.png"));
    this->topText->setScaledContents(true);
    //创建标签插入用户名背景图片
    this->userPic = new QLabel(this);
    this->userPic->setGeometry(143,200,250,40);
    this->userPic->setPixmap(QPixmap("./picture/user.jpg"));
    this->userPic->setScaledContents(true);
    //创建标签插入密码背景图片
    this->passwdPic = new QLabel(this);
    this->passwdPic->setGeometry(145,240,250,40);
    this->passwdPic->setPixmap(QPixmap("./picture/passwd.jpg"));
    this->passwdPic->setScaledContents(true);
    //创建标签插入二维码图片
    this->qrPic = new QLabel(this);
    this->qrPic->setGeometry(500,360,50,40);
    this->qrPic->setPixmap(QPixmap("./picture/qr.png"));
    this->qrPic->setScaledContents(true);

    //创建编辑框
    this->lineEdit1 = new QLineEdit(this);
    this->lineEdit2 = new QLineEdit(this);
    //设置编辑框输入最大长度
    this->lineEdit1->setMaxLength(13);
    this->lineEdit2->setMaxLength(13);
    //设置编辑框大小及位置
    this->lineEdit1->setGeometry(180,200,200,33);
    this->lineEdit2->setGeometry(180,240,200,33);
    //设置未输入时,编辑框显示的提示字符
    this->lineEdit1->setPlaceholderText("iQIYI账号");
    this->lineEdit2->setPlaceholderText("密码");
    //设置密码编辑框的显示方式为密文显示
    this->lineEdit2->setEchoMode(QLineEdit::Password);
    //设置编辑框的输入类型为大小写字母和数字（a-z,A-Z,0-9）
    this->lineEdit1->setValidator(new QRegExpValidator(QRegExp("[a-zA-Z0-9]+$")));
    this->lineEdit2->setValidator(new QRegExpValidator(QRegExp("[a-zA-Z0-9]+$")));
    //设置编辑框边框透明化
    this->lineEdit1->setStyleSheet("QLineEdit{border-width:0;border-style:outset;}");
    this->lineEdit2->setStyleSheet("QLineEdit{border-width:0;border-style:outset;}");

    //创建登录按钮
    this->logicBtn = new QPushButton(this);
    this->logicBtn->setGeometry(153,300,245,40);
    this->logicBtn->setStyleSheet("QPushButton{border-image:url(./picture/logicBtn.png);}");
    //创建注册按钮
    this->regBtn = new QPushButton("注册账号",this);
    this->regBtn->setGeometry(15,365,60,30);
    this->regBtn->setStyleSheet("QPushButton{color:gray;border-width:0;border-style:outset;}QPushButton:hover{color:black}");
}

---

总结

   以上就是利用标签、编辑框、按钮制作登录界面的所有内容，希望大家阅读后都能有所收获！需要图片素材及相应的工程源文件的读者，关注博主并在该篇文章下方评论写下邮箱地址，将以压缩包形式发送。
   原创不易，转载请标明出处，若文章出现有误之处，欢迎读者留言指正批评！