文章目录
- 一、手写代码实现腾讯会议登陆界面
- 二、使用UI设计器实现腾讯会议登陆界面
一、手写代码实现腾讯会议登陆界面
使用Qt控件与布局实现腾讯会议登陆界面。
示例:
loginInCode.h:
#pragma once
#include <QtWidgets/QDialog>
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QPushButton>
#include <QLabel>
#include <QToolButton>
class loginInCode : public QDialog
{
Q_OBJECT
public:
loginInCode(QWidget *parent = Q_NULLPTR);
private:
QVBoxLayout* mainVLayout;
QHBoxLayout* titleBarHLayout;
QPushButton* btnSet;
QLabel* label;
QPushButton* btnMin;
QPushButton* btnClose;
QHBoxLayout* logoHLayout;
QLabel* label_logo;
QHBoxLayout* horizontalLayout_5;
QVBoxLayout* verticalLayout;
QPushButton* btnWeichatLognin;
QPushButton* btnJoin;
QHBoxLayout* horizontalLayout_2;
QFrame* line;
QLabel* label_3;
QFrame* line_2;
QHBoxLayout* horizontalLayout_3;
QToolButton* toolBtnPhone;
QToolButton* toolBtnEnpriseWeichat;
QToolButton* toolBtnSSO;
};
loginInCode.cpp:
#include "loginInCode.h"
#include <QCoreApplication>
loginInCode::loginInCode(QWidget *parent)
: QDialog(parent)
{
//整体布局
mainVLayout = new QVBoxLayout(this);
mainVLayout->setSpacing(7);
mainVLayout->setContentsMargins(11, 11, 11, 11);
mainVLayout->setObjectName(QString::fromUtf8("mainVLayout"));
//标题栏布局
titleBarHLayout = new QHBoxLayout();
titleBarHLayout->setSpacing(6);
titleBarHLayout->setObjectName(QString::fromUtf8("titleBarHLayout"));
//标题栏:设置按钮、标题、最小化按钮、关闭按钮
btnSet = new QPushButton(this);
btnSet->setObjectName(QString::fromUtf8("btnSet"));
btnSet->setMinimumSize(QSize(32, 32));
btnSet->setMaximumSize(QSize(32, 32));
label = new QLabel(this);
label->setObjectName(QString::fromUtf8("label"));
label->setAlignment(Qt::AlignCenter);
btnMin = new QPushButton(this);
btnMin->setObjectName(QString::fromUtf8("btnMin"));
btnMin->setMinimumSize(QSize(32, 32));
btnMin->setMaximumSize(QSize(32, 32));
btnClose = new QPushButton(this);
btnClose->setObjectName(QString::fromUtf8("btnClose"));
QSizePolicy sizePolicy(QSizePolicy::Minimum, QSizePolicy::Fixed);
sizePolicy.setHorizontalStretch(0);
sizePolicy.setVerticalStretch(0);
sizePolicy.setHeightForWidth(btnClose->sizePolicy().hasHeightForWidth());
btnClose->setSizePolicy(sizePolicy);
btnClose->setMinimumSize(QSize(32, 32));
btnClose->setMaximumSize(QSize(32, 32));
//将标题栏控件添加到标题栏布局中
titleBarHLayout->addWidget(btnSet);
titleBarHLayout->addWidget(label);
titleBarHLayout->addWidget(btnMin);
titleBarHLayout->addWidget(btnClose);
//logo布局
logoHLayout = new QHBoxLayout();
logoHLayout->setObjectName(QString::fromUtf8("logoHLayout"));
logoHLayout->setSpacing(40);
label_logo = new QLabel(this);
label_logo->setObjectName(QString::fromUtf8("label_logo"));
label_logo->setMinimumSize(QSize(400, 336));
label_logo->setMaximumSize(QSize(400, 336));
logoHLayout->addWidget(label_logo);
logoHLayout->setSpacing(40);
//按钮:微信登陆,加入会议
horizontalLayout_5 = new QHBoxLayout();
horizontalLayout_5->setObjectName(QString::fromUtf8("horizontalLayout_5"));
horizontalLayout_5->setSpacing(40);
verticalLayout = new QVBoxLayout();
verticalLayout->setObjectName(QString::fromUtf8("verticalLayout"));
btnWeichatLognin = new QPushButton(this);
btnWeichatLognin->setObjectName(QString::fromUtf8("btnWeichatLognin"));
btnWeichatLognin->setMinimumSize(QSize(400, 50));
btnWeichatLognin->setMaximumSize(QSize(400, 50));
btnJoin = new QPushButton(this);
btnJoin->setObjectName(QString::fromUtf8("btnJoin"));
btnJoin->setMinimumSize(QSize(400, 50));
btnJoin->setMaximumSize(QSize(400, 50));
verticalLayout->addWidget(btnWeichatLognin);
verticalLayout->setSpacing(20);
verticalLayout->addWidget(btnJoin);
horizontalLayout_5->addLayout(verticalLayout);
horizontalLayout_5->setSpacing(40);
//分界线:两条线,一个文本
horizontalLayout_2 = new QHBoxLayout();
horizontalLayout_2->setObjectName(QString::fromUtf8("horizontalLayout_2"));
line = new QFrame(this);
line->setObjectName(QString::fromUtf8("line"));
line->setFrameShape(QFrame::HLine);
line->setFrameShadow(QFrame::Sunken);
label_3 = new QLabel(this);
label_3->setObjectName(QString::fromUtf8("label_3"));
label_3->setAlignment(Qt::AlignCenter);
line_2 = new QFrame(this);
line_2->setObjectName(QString::fromUtf8("line_2"));
line_2->setFrameShape(QFrame::HLine);
line_2->setFrameShadow(QFrame::Sunken);
horizontalLayout_2->addWidget(line);
horizontalLayout_2->addWidget(label_3);
horizontalLayout_2->addWidget(line_2);
//工具按钮栏:手机号、企业微信、SSO
horizontalLayout_3 = new QHBoxLayout();
horizontalLayout_3->setObjectName(QString::fromUtf8("horizontalLayout_3"));
toolBtnPhone = new QToolButton(this);
toolBtnPhone->setObjectName(QString::fromUtf8("toolBtnPhone"));
toolBtnPhone->setMinimumSize(QSize(60, 80));
toolBtnPhone->setMaximumSize(QSize(60, 80));
toolBtnEnpriseWeichat = new QToolButton(this);
toolBtnEnpriseWeichat->setObjectName(QString::fromUtf8("toolBtnEnpriseWeichat"));
toolBtnEnpriseWeichat->setMinimumSize(QSize(60, 80));
toolBtnEnpriseWeichat->setMaximumSize(QSize(60, 80));
toolBtnSSO = new QToolButton(this);
toolBtnSSO->setObjectName(QString::fromUtf8("toolBtnSSO"));
toolBtnSSO->setMinimumSize(QSize(60, 80));
toolBtnSSO->setMaximumSize(QSize(60, 80));
horizontalLayout_3->addWidget(toolBtnPhone);
horizontalLayout_3->addWidget(toolBtnEnpriseWeichat);
horizontalLayout_3->addWidget(toolBtnSSO);
//将子布局添加到整体布局中
mainVLayout->addLayout(titleBarHLayout);
mainVLayout->setSpacing(40);
mainVLayout->addLayout(logoHLayout);
mainVLayout->setSpacing(40);
mainVLayout->addLayout(horizontalLayout_5);
mainVLayout->addLayout(horizontalLayout_2);
mainVLayout->addLayout(horizontalLayout_3);
//利用翻译单元设置文本
this->setWindowTitle(QCoreApplication::translate("this", "ch2_1_TencentMeetingLogIn", nullptr));
btnSet->setText(QCoreApplication::translate("this", "PushButton", nullptr));
label->setText(QCoreApplication::translate("this", "\350\247\206\351\242\221\344\274\232\350\256\256", nullptr));
btnMin->setText(QCoreApplication::translate("this", "PushButton", nullptr));
btnClose->setText(QCoreApplication::translate("this", "PushButton", nullptr));
label_logo->setText(QCoreApplication::translate("this", "TextLabel", nullptr));
btnWeichatLognin->setText(QCoreApplication::translate("this", "\345\276\256\344\277\241\347\231\273\351\231\206", nullptr));
btnJoin->setText(QCoreApplication::translate("this", "\345\212\240\345\205\245\344\274\232\350\256\256", nullptr));
label_3->setText(QCoreApplication::translate("this", "\345\205\266\344\273\226\347\231\273\351\231\206\346\226\271\345\274\217", nullptr));
toolBtnPhone->setText(QCoreApplication::translate("this", "...", nullptr));
toolBtnEnpriseWeichat->setText(QCoreApplication::translate("this", "...", nullptr));
toolBtnSSO->setText(QCoreApplication::translate("this", "...", nullptr));
//Qt::FramelessWindowHint:创建无边框窗口
//Qt::WindowMinMaxButtonsHint:窗口可以最大化与最小化
this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint);
//this->setStyleSheet("background-color:white;border:none");
//设置控件的样式表qss
//btnSet
btnSet->setText("");
btnSet->setStyleSheet("QPushButton{background-image:url(:/loginInCode/resources/set.png);border:none} \
QPushButton::hover{background-color:rgb(99,99,99)}"
);
//btnMin
btnMin->setText("");
btnMin->setStyleSheet("QPushButton{background-image:url(:/loginInCode/resources/min.png);border:none} \
QPushButton::hover{background-color:rgb(99,99,99)}"
);
//btnClose
btnClose->setText("");
btnClose->setStyleSheet("QPushButton{background-image:url(:/loginInCode/resources/close.png);border:none} \
QPushButton::hover{background-color:rgb(99,99,99)}"
);
//lable_logo
label_logo->clear();
QPixmap* pix = new QPixmap(":/loginInCode/resources/logo.jpg");
pix->scaled(label_logo->size(), Qt::KeepAspectRatio);
label_logo->setScaledContents(true);
label_logo->setPixmap(*pix);
//btnWeichatLognin
btnWeichatLognin->setText("");
btnWeichatLognin->setStyleSheet("QPushButton{background-image:url(:/loginInCode/resources/weichatlogin.png);border:none} \
QPushButton::hover{background-color:rgb(99,99,99)}"
);
//btnJoin
btnJoin->setStyleSheet("QPushButton{color:#0054E6;background-color:rgb(255,255,255);border-style:outset;border-width:0.5px;border-color:gray;border-radius:2px;} \
QPushButton:hover{border-color:blue;}"
);
//toolBtnPhone
toolBtnPhone->setIcon(QIcon(":/loginInCode/resources/phonelogin.png"));
toolBtnPhone->setIconSize(QSize(60, 60));
toolBtnPhone->setText(u8"手机号");
toolBtnPhone->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
toolBtnPhone->setStyleSheet("background-color:white;border:none");
//toolBtnEnpriseweichat
toolBtnEnpriseWeichat->setIcon(QIcon(":/loginInCode/resources/enpriseweichat.png"));
toolBtnEnpriseWeichat->setIconSize(QSize(60, 60));
toolBtnEnpriseWeichat->setText(u8"企业微信");
toolBtnEnpriseWeichat->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
toolBtnEnpriseWeichat->setStyleSheet("background-color:white;border:none");
//toolBtnPhone
toolBtnSSO->setIcon(QIcon(":/loginInCode/resources/sso.png"));
toolBtnSSO->setIconSize(QSize(60, 60));
toolBtnSSO->setText(u8"SSO");
toolBtnSSO->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
toolBtnSSO->setStyleSheet("background-color:white;border:none");
connect(btnClose, &QPushButton::clicked, [=] {
close();
});
}
main.cpp:
#include "loginInCode.h"
#include <QtWidgets/QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
loginInCode w;
w.show();
return a.exec();
}
运行结果:
二、使用UI设计器实现腾讯会议登陆界面
结合Qt设计器与代码实现腾讯会议登陆界面。下面是一些Qt Designer中的要点。
Qt Designer中一些技巧:
固定大小:将最小大小与最大大小设置成一样即为固定大小
QLable中可以设置居中对齐
灵活使用弹簧
对象整体垂直布局调整:包含:上下左右边界宽度、子水平布局之间的间隔、子水平布局的伸缩调整
添加资源文件
双击
xx.qrc
文件,点击“Add–>Add Files"找到“resources”目录,全选添加
经Qt设计器设计的结果为
接下来,在代码中
- 去掉窗口边框
- 添加控件样式
- 窗口移动
示例:
xx.h:
#pragma once
#include <QtWidgets/QDialog>
#include "ui_ch2_1_TencentMeetingLogIn.h"
class ch2_1_TencentMeetingLogIn : public QDialog
{
Q_OBJECT
public:
ch2_1_TencentMeetingLogIn(QWidget *parent = Q_NULLPTR);
private slots:
void on_btnClose_clicked();
private:
Ui::ch2_1_TencentMeetingLogInClass ui;
};
xxx.cpp:
#include "ch2_1_TencentMeetingLogIn.h"
ch2_1_TencentMeetingLogIn::ch2_1_TencentMeetingLogIn(QWidget *parent)
: QDialog(parent)
{
ui.setupUi(this);
//Qt::FramelessWindowHint:创建无边框窗口
//Qt::WindowMinMaxButtonsHint:窗口可以最大化与最小化
this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint);
//this->setStyleSheet("background-color:white;border:none");
//设置控件的样式表qss
//btnSet
ui.btnSet->setText("");
ui.btnSet->setStyleSheet("QPushButton{background-image:url(:/ch2_1_TencentMeetingLogIn/resources/set.png);border:none} \
QPushButton::hover{background-color:rgb(99,99,99)}"
);
//btnMin
ui.btnMin->setText("");
ui.btnMin->setStyleSheet("QPushButton{background-image:url(:/ch2_1_TencentMeetingLogIn/resources/min.png);border:none} \
QPushButton::hover{background-color:rgb(99,99,99)}"
);
//btnClose
ui.btnClose->setText("");
ui.btnClose->setStyleSheet("QPushButton{background-image:url(:/ch2_1_TencentMeetingLogIn/resources/close.png);border:none} \
QPushButton::hover{background-color:rgb(99,99,99)}"
);
//lable_logo
ui.label_logo->clear();
QPixmap* pix = new QPixmap(":/ch2_1_TencentMeetingLogIn/resources/logo.jpg");
pix->scaled(ui.label_logo->size(), Qt::KeepAspectRatio);
ui.label_logo->setScaledContents(true);
ui.label_logo->setPixmap(*pix);
//btnWeichatLognin
ui.btnWeichatLognin->setText("");
ui.btnWeichatLognin->setStyleSheet("QPushButton{background-image:url(:/ch2_1_TencentMeetingLogIn/resources/weichatlogin.png);border:none} \
QPushButton::hover{background-color:rgb(99,99,99)}"
);
//btnJoin
ui.btnJoin->setStyleSheet("QPushButton{color:#0054E6;background-color:rgb(255,255,255);border-style:outset;border-width:0.5px;border-color:gray;border-radius:2px;} \
QPushButton:hover{border-color:blue;}"
);
//toolBtnPhone
ui.toolBtnPhone->setIcon(QIcon(":/ch2_1_TencentMeetingLogIn/resources/phonelogin.png"));
ui.toolBtnPhone->setIconSize(QSize(60, 60));
ui.toolBtnPhone->setText(u8"手机号");
ui.toolBtnPhone->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
ui.toolBtnPhone->setStyleSheet("background-color:white;border:none");
//toolBtnEnpriseweichat
ui.toolBtnEnpriseWeichat->setIcon(QIcon(":/ch2_1_TencentMeetingLogIn/resources/enpriseweichat.png"));
ui.toolBtnEnpriseWeichat->setIconSize(QSize(60, 60));
ui.toolBtnEnpriseWeichat->setText(u8"企业微信");
ui.toolBtnEnpriseWeichat->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
ui.toolBtnEnpriseWeichat->setStyleSheet("background-color:white;border:none");
//toolBtnPhone
ui.toolBtnSSO->setIcon(QIcon(":/ch2_1_TencentMeetingLogIn/resources/sso.png"));
ui.toolBtnSSO->setIconSize(QSize(60, 60));
ui.toolBtnSSO->setText(u8"SSO");
ui.toolBtnSSO->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
ui.toolBtnSSO->setStyleSheet("background-color:white;border:none");
connect(ui.btnClose, &QPushButton::clicked, [=]{
close();
});
}
void ch2_1_TencentMeetingLogIn::on_btnClose_clicked()
{
this->close();
}
main.cpp:
#include "ch2_1_TencentMeetingLogIn.h"
#include <QtWidgets/QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
ch2_1_TencentMeetingLogIn w;
w.show();
return a.exec();
}
运行结果: