文章目錄

• • 1 客戶端界面實現及登錄功能實現
  • • 1.1 界面設計
    • 1.2 界面實現及實現登錄對話框的功能

1 客戶端界面實現及登錄功能實現

1.1 界面設計

界面設計：

界面實現方案：

• 使用不同Layout對組件進行嵌套布局。
  

1.2 界面實現及實現登錄對話框的功能

代碼如下：
QLoginDialog.h：

#ifndef _QLOGINDIALOG_H_ #define _QLOGINDIALOG_H_#include <QDialog> #include <QLabel> #include <QLineEdit> #include <QPushButton> #include <QTimer>class QLoginDialog : public QDialog {Q_OBJECT private:QLabel UserLabel;QLabel PwdLabel;QLabel CaptLabel;QLineEdit UserEdit;QLineEdit PwdEdit;QLineEdit CaptEdit;QPushButton LoginBtn;QPushButton CancelBtn;QString m_user;QString m_pwd;QString m_captcha;Qt::GlobalColor* m_colors;QTimer m_timer; private slots:void LoginBtn_Clicked();void CancelBtn_Clicked();void Timer_Timeout(); protected:void paintEvent(QPaintEvent *);QString getCaptcha();Qt::GlobalColor* getColors();void showEvent(QShowEvent *); public:QLoginDialog(QWidget *parent = 0);QString getUser();QString getPwd();~QLoginDialog(); };#endif

QLoginDialog.cpp：

#include "QLoginDialog.h" #include <QPainter> #include <QTime> #include <QMessageBox>QLoginDialog::QLoginDialog(QWidget* parent) : QDialog(parent, Qt::WindowCloseButtonHint),UserLabel(this), PwdLabel(this), CaptLabel(this),UserEdit(this), PwdEdit(this), CaptEdit(this),LoginBtn(this), CancelBtn(this) {UserLabel.setText("用戶名:");UserLabel.move(20, 30);UserLabel.resize(60, 25);UserEdit.move(85, 30);UserEdit.resize(180, 25);PwdLabel.setText("密 碼:");PwdLabel.move(20, 65);PwdLabel.resize(60,25);PwdEdit.move(85, 65);PwdEdit.resize(180, 25);PwdEdit.setEchoMode(QLineEdit::Password);CaptLabel.setText("驗證碼:");CaptLabel.move(20, 100);CaptLabel.resize(60, 25);CaptEdit.move(85, 100);CaptEdit.resize(85, 25);CancelBtn.setText("取消");CancelBtn.move(85, 145);CancelBtn.resize(85, 30);LoginBtn.setText("登錄");LoginBtn.move(180, 145);LoginBtn.resize(85, 30);m_timer.setParent(this);setWindowTitle("登錄...");setFixedSize(285, 205);connect(&m_timer, SIGNAL(timeout()), this, SLOT(Timer_Timeout()));connect(&LoginBtn, SIGNAL(clicked()), this, SLOT(LoginBtn_Clicked()));connect(&CancelBtn, SIGNAL(clicked()), this, SLOT(CancelBtn_Clicked()));qsrand(QTime::currentTime().second() * 1000 + QTime::currentTime().msec());m_timer.start(100); }void QLoginDialog::LoginBtn_Clicked() {QString captcha = CaptEdit.text().replace(" ", "");if( m_captcha.toLower() == captcha.toLower() ){m_user = UserEdit.text().trimmed();m_pwd = PwdEdit.text();if( m_user == "" ){QMessageBox::information(this, "消息", "用戶名不能為空！");}else if( m_pwd == "" ){QMessageBox::information(this, "消息", "密碼不能為空！");}else{done(Accepted);}}else{QMessageBox::critical(this, "錯誤", "驗證碼輸入錯誤！");m_captcha = getCaptcha();CaptEdit.selectAll();} }void QLoginDialog::CancelBtn_Clicked() {done(Rejected); }QString QLoginDialog::getUser() {return m_user; }QString QLoginDialog::getPwd() {return m_pwd; }void QLoginDialog::Timer_Timeout() {m_colors = getColors();update(); }void QLoginDialog::showEvent(QShowEvent* event) {m_captcha = getCaptcha();m_colors = getColors();QDialog::showEvent(event); }void QLoginDialog::paintEvent(QPaintEvent* event) {QPainter painter(this);painter.fillRect(180, 100, 84, 24, Qt::white);painter.setFont(QFont("Comic Sans MS", 12));for(int i=0; i<150; i++){painter.setPen(m_colors[i%4]);painter.drawPoint(180 + qrand() % 84, 100 + qrand() % 24);}for(int i=0; i<4; i++){painter.setPen(m_colors[i]);painter.drawText(180 + 20 * i, 100, 20, 24, Qt::AlignCenter, QString(m_captcha[i]));}QDialog::paintEvent(event); }QString QLoginDialog::getCaptcha() {QString ret = "";for(int i=0; i<4; i++){int c = (qrand() % 2) ? 'a' : 'A';ret += static_cast<QChar>(c + qrand() % 26);}return ret; }Qt::GlobalColor* QLoginDialog::getColors() {static Qt::GlobalColor colors[4];for(int i=0; i<4; i++){colors[i] = static_cast<Qt::GlobalColor>(2 + qrand() % 16);}return colors; }QLoginDialog::~QLoginDialog() {}

MainWin.h：

#ifndef MAINWIN_H #define MAINWIN_H#include <QWidget> #include <QVBoxLayout> #include <QGroupBox> #include <QPlainTextEdit> #include <QLineEdit> #include <QPushButton> #include <QLabel> #include "QLoginDialog.h"class MainWin : public QWidget {Q_OBJECTQVBoxLayout vMainLayout;QGroupBox msgGrpBx;QGroupBox inputGrpBx;QPlainTextEdit msgEditor;QLineEdit inputEdit;QPushButton logInOutBtn;QPushButton sendBtn;QLabel statusLbl;QLoginDialog loginDlg;void initMsgGrpBx();void initInputGrpBx();void connectSlots(); private slots:void sendBtnClicked();void logInOutBtnClicked(); public:MainWin(QWidget *parent = 0);~MainWin(); };#endif // MAINWIN_H

MainWinUI.cpp：

#include "MainWin.h" #include <QHBoxLayout> #include <QGridLayout>MainWin::MainWin(QWidget *parent): QWidget(parent), loginDlg(this) {initMsgGrpBx();initInputGrpBx();connectSlots();vMainLayout.setSpacing(10);vMainLayout.addWidget(&msgGrpBx);vMainLayout.addWidget(&inputGrpBx);setWindowTitle("狄泰聊天室");setLayout(&vMainLayout);setMinimumSize(550, 400);resize(550, 400); }void MainWin::connectSlots() {connect(&sendBtn, SIGNAL(clicked(bool)), this, SLOT(sendBtnClicked()));connect(&logInOutBtn, SIGNAL(clicked(bool)), this, SLOT(logInOutBtnClicked())); }void MainWin::initMsgGrpBx() {QHBoxLayout* hbl = new QHBoxLayout();hbl->setContentsMargins(2, 5, 2, 2);hbl->addWidget(&msgEditor);msgEditor.setReadOnly(true);msgGrpBx.setLayout(hbl);msgGrpBx.setTitle("聊天消息"); }void MainWin::initInputGrpBx() {QGridLayout* gl = new QGridLayout();gl->setSpacing(10);gl->addWidget(&inputEdit, 0, 0, 1, 5);gl->addWidget(&statusLbl, 1, 0, 1, 3);gl->addWidget(&logInOutBtn, 1, 3);gl->addWidget(&sendBtn, 1, 4);inputEdit.setFixedHeight(23);inputEdit.setEnabled(false);statusLbl.setText("狀態: 未登錄");logInOutBtn.setFixedHeight(30);logInOutBtn.setText("登錄");sendBtn.setFixedHeight(30);sendBtn.setText("發送");sendBtn.setEnabled(false);inputGrpBx.setFixedHeight(100);inputGrpBx.setLayout(gl);inputGrpBx.setTitle("用戶名"); }MainWin::~MainWin() {}

MainWinSlot.cpp：

#include "MainWin.h"void MainWin::sendBtnClicked() {}void MainWin::logInOutBtnClicked() {if( loginDlg.exec() == QDialog::Accepted ){} }

main.cpp：

#include "MainWin.h" #include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);MainWin w;w.show();return a.exec(); }

---

參考資料：

QT實驗分析教程

總結

以上是生活随笔為你收集整理的客户端界面实现及登录功能实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。