該文章原創於Qter開源社區（www.qter.org），作者yafeilinux，轉載請注明出處！
正文
一、創建項目
1.
新建Qt Gui
應用，項目名稱為“login
”，類名和基類保持MainWindow
和QMainWindow
不變。
2.
完成項目創建后，向項目中添加新的Qt
設計師界面類，模板選擇Dialog without Buttons
，類名更改為LoginDialog
。完成后向界面上添加兩個標簽Label
、兩個行編輯器Line Edit
和兩個按鈕Push Button
，設計界面如下圖所示。
<ignore_js_op>
3.
這里在屬性編輯器中將用戶名后面的行編輯器的object Name
屬性更改為usrLineEdit
，密碼后面的行編輯器為pwdLineEdit
，登錄按鈕為loginBtn
，退出按鈕為exitBtn
。如下圖所示。
<ignore_js_op>
4.下面我們使用另外一種信號和槽的關聯方法來設置退出按鈕。在設計模式下面的信號和槽編輯器中，先點擊左上角的綠色加號添加關聯，然后選擇發送者為exitBtn，信號為clicked()，接收者為LoginDialog，槽為close()。如下圖所示。這樣，當單擊退出按鈕時，就會關閉登錄對話框。
<ignore_js_op>
5.
右擊登錄按鈕，在彈出的菜單中選擇“轉到槽…
”，然后選擇clicked()
信號並確定。轉到相應的槽以后，添加函數調用：
void
LoginDialog
::
on_loginBtn_clicked()
{
accept
();
}
6.
下面到main.cpp
文件，更改內容如下：
#include
<QtGui/QApplication>
#include
"mainwindow.h"
#include
"logindialog.h"
int
main(int argc, char *argv[])
{
QApplication
a(argc,
argv);
MainWindow
w;
LoginDialog
dlg;
if
(dlg.
exec() == QDialog::Accepted)
{
w.
show();
return
a.
exec();
}
else
return
0
;
}
7.
這時運行程序，按下退出按鈕會退出程序，按下登錄按鈕會關閉登錄對話框，並顯示主窗口。
二、登錄設置
1.
下面添加代碼來實現使用用戶名和密碼登錄，這里我們只是簡單的將用戶名和密碼設置為了固定的字符串。到logindialog.cpp
文件中將登錄按鈕的單擊信號對應的槽的代碼更改為：
void
LoginDialog
::
on_loginBtn_clicked()
{
// 判斷用戶名和密碼是否正確，
// 如果錯誤則彈出警告對話框
if
(
ui
->
usrLineEdit
->
text() == tr("yafeilinux") &&
ui
->
pwdLineEdit
->
text() == tr("123456"))
{
accept
();
}
else
{
QMessageBox
::
warning(this, tr("Waring"),
tr("user name or password error!"),
QMessageBox
::
Yes
);
}
}
Qt
中的QMessageBox
類提供了多種常用的對話框類型，比如這里的警告對話框，還有提示對話框，問題對話框等。這里使用了靜態函數來設置了一個警告對話框，這種方式很方便。其中的參數依次是：this
表明父窗口是登錄對話框；然后是窗口標題；然后是顯示的內容；最后一個參數是顯示的按鈕，這里使用了一個Yes
按鈕。大家注意還要添加該類的頭文件包含，即：
#include
<QMessageBox>
。
2.
下面運行程序，如果輸入用戶名為“yafeilinux
”，密碼為“123456
”
，那么可以登錄，如果輸入其他的字符，則會彈出警告對話框，如下圖所示。
<ignore_js_op>
3.
對於輸入的密碼，我們常見的是顯示成小黑點的樣式。下面點擊logindialog.ui
文件進入設計模式，然后選中界面上的密碼行編輯器，在屬性編輯器中將echoMode
屬性選擇為Password
。這時再次運行程序，可以看到密碼顯示已經改變了。如下圖所示。
<ignore_js_op>
當然，除了在屬性編輯器中進行更改，也可以在loginDialog
類的構造函數中使用setEchoMode(QLineEdit::Password)
函數來設置。
4.
在行編輯器的屬性欄中還可以設置占位符，就是沒有輸入信息前的一些提示語句。例如將密碼行編輯器的placeholderText
屬性更改為“請輸入密碼”，將用戶名行編輯器的更改為“請輸入用戶名”，運行效果如下圖所示。
<ignore_js_op>
5.
對於行編輯器，還有一個問題就是，比如我們輸入用戶名，在前面添加了一個空格，這樣也可以保證輸入是正確的，這個可以使用QString
類的trimmed()
函數來實現，它可以去除字符串前后的空白字符。下面將logindialog.cpp
文件中登錄按鈕單擊信號槽函數中的判斷代碼更改為：
if
(
ui
->
usrLineEdit
->
text().trimmed() == tr("yafeilinux")
&&
ui
->
pwdLineEdit
->
text() == tr("123456"))
這時運行程序，已經實現相應的功能了。
6.
最后，當登錄失敗后，我們希望可以清空用戶名和密碼信息，並將光標定位到用戶名輸入框中。這個可以通過在判斷用戶名和密碼錯誤后添加相應的代碼來實現：
void
LoginDialog
::
on_loginBtn_clicked()
{
//
判斷用戶名和密碼是否正確，如果錯誤則彈出警告對話框
if
(
ui
->
usrLineEdit
->
text().trimmed() == tr("yafeilinux")
&&
ui
->
pwdLineEdit
->
text() == tr("123456"))
{
accept
();
}
else
{
QMessageBox
::
warning(this, tr("Waring"),
tr("user name or password error!"),
QMessageBox
::
Yes
);
//
清空內容並定位光標
ui
->
usrLineEdit
->
clear();
ui
->
pwdLineEdit
->
clear();
ui
->
usrLineEdit
->
setFocus();
}
}
下面運行程序，大家可以測試一下效果。
7.
這里再補充一個技巧，也就是Qt Creator
的代碼補全功能。Qt Creator
有很強大的代碼補全功能，比如輸入一個關鍵字時，只要輸入前幾個字母，就會彈出相關的關鍵字的選擇列表；輸入完一個對象，然后輸入點以后，就會彈出該對象所有可用的變量和函數。這里要說的是，當輸入一個比較長得函數或變量名時，可以通過其中的幾個字母來定位。比如說，要輸入前面講到的setFocus()
函數，那么只需輸入首字母s
和后面的大寫字母F
即可，這樣可以大大縮減提示列表，如果還沒有定位到，那么可以輸入F
后面的字母。如下圖所示。
<ignore_js_op>
我們還可以使用ctrl +
空格鍵來強制代碼補全，不過這個一般會和我們的輸入法的快捷鍵沖突，大家可以更改輸入法的快捷鍵，也可以在Qt Creator
中的工具→選項→環境→鍵盤中來設置快捷鍵。
結語