QQ登录界面的实现

代码展示

wight.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QLineEdit>
#include <QPushButton>
#include <QVBoxLayout>
#include <QRadioButton>
#include <QIcon>
#include <QLabel>
#include <QDebug>
#include <QPixmap>
#include <QPainter>
class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();
};
#endif // WIDGET_H

wight.cpp

#include "widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    setWindowTitle("QQ 登录");
    this->setFixedSize(480,672); // 设置界面尺寸
    this->setStyleSheet("background-color:#271938");
    // 头像图标
    QLabel *iconLabel = new QLabel(this);
    iconLabel->resize(120,120);
    iconLabel->setPixmap(QPixmap("C:/Users/者行孙/Desktop/Icon/01.png"));
    iconLabel->setScaledContents(true);
    iconLabel->move(178, 100); // 设置头像位置
    //构造账号编辑器
    QLineEdit *edit1 = new QLineEdit(this);
    edit1->resize(384,64);
    edit1->setStyleSheet("background-color:#37335b;color:#a8a2ae;font-size:25px;border-radius:10px");
    edit1->setAlignment(Qt::AlignCenter);
    edit1->setPlaceholderText("手机号/QQ号/邮箱");
    edit1->move(48,251);
    //密码编辑器
    QLineEdit *edit2 = new QLineEdit(this);
    edit2->resize(384,64);
    edit2->setStyleSheet("background-color:#37335b;color:#a8a2ae;font-size:25px;border-radius:10px");
    edit2->setAlignment(Qt::AlignCenter);
    edit2->setEchoMode(QLineEdit::Password);
    edit2->setPlaceholderText("请输入QQ密码");
    edit2->move(48,edit1->y()+85);
    //单选框
    QRadioButton *circleRadioButton = new QRadioButton(this);
    circleRadioButton->setText("已阅读并同意服务协议和QQ隐私保护指引");
    circleRadioButton->setStyleSheet("color: #868285; font-size: 18px;");
    circleRadioButton->move(48, edit2->y() + 85);
    circleRadioButton->setChecked(false); // 默认未选中
    //登录框
    QPushButton *loginButton = new QPushButton("登录",this);
    loginButton->setStyleSheet("background-color: #23335a;color:#685e75;font-size: 22px; border-radius: 10px;");
    loginButton->resize(385, 57);
    loginButton->move(48,circleRadioButton->y()+40);
    // 超链接标签
    QLabel *linkLabel = new QLabel(this);
    linkLabel->setText("扫码登录 | 更多选项");
    linkLabel->setOpenExternalLinks(true); // 允许打开外部链接
    linkLabel->setStyleSheet("color: #2c71da; font-size: 20px;"); // 设置字体颜色
    linkLabel->move(141, loginButton->y()+ 120); // 设置位置

}

Widget::~Widget()
{
}

main.c

#include "widget.h"

#include <QApplication>

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

运行结果

原始代码注释

mywindow.h

#ifndef MYWINDOW_H
#define MYWINDOW_H                 //防止头文件重复包含

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class MyWindow; }   //将其他文件中的命名空间进行声明
QT_END_NAMESPACE


//自定义的类的声明，公共继承自QWidget:QWidget中封装了有关图形化界面的相关操作的具体实现
//由于继承的是系统提供的类，那么自定义的类中即使没有写任何东西，其中类也有很多的成员了
class MyWindow : public QWidget
{
    Q_OBJECT            //信号与槽的元对象，直接写即可，没有该宏，就不能使用信号与槽

public:
    MyWindow(QWidget *parent = nullptr); //默认参数
    ~MyWindow();        //虚析构函数

private:
    Ui::MyWindow *ui;
};
#endif // MYWINDOW_H

mywindow.cpp

#include "mywindow.h"
#include "ui_mywindow.h"

MyWindow::MyWindow(QWidget *parent)//有参构造
    : QWidget(parent)       //在初始化列表中显示调用父类的有参构造，来完成继承成员的初始化
    , ui(new Ui::MyWindow)  //指针成员实例化空间
{
    ui->setupUi(this);      //将ui界面上拖拽的组件存放到this界面上
}
//析构函数定义
MyWindow::~MyWindow()
{
    delete ui;              //释放ui界面申请的组件空间
}

main.cpp

#include "mywindow.h"
//文件包含，自定义的头文件，该文件中包含了图形化界面类

#include <QApplication>
//包含应用程序的头文件
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);     //使用应用程序类实例化对象，调用有参构造

    MyWindow w;        //使用自定义的类调用无参构造构造一个界面对象
    w.show();          //调用对象的成员函数，将界面展示出来

    return a.exec();
    //a.exec() 使用应用程序类对象，调用应用程序的成员函数，保证界面不被关闭，轮询等待界面上的事件发生
    //等待用户操作界面上的组件
    //等待界面上的信号与槽的响应
    //等待事件处理机制的实现
}

思维导图