2. 設計UI介面，得到 .ui 檔案
 設定相關屬性：
  視窗/按鈕文字、成員變數名字、元件(大小、樣式、文字等...)
 1 ） Ctrl + 1  '元件水平佈局'  或  Ctrl + 2  '元件垂直佈局 '
 2 ） Ctrl + j  '容器視窗自動適應 大小'
 3 ）Ctrl + g  '柵格化佈局

3. 使用'uic'命令將 .ui 檔案轉換成 .h 檔案
 $: uic *.ui -o *.h
 eg：
 $: uic CalculatorDialog.ui -o ui_CalculatorDialog.h

4. 使用.h檔案
ui_CalculatorDialog.h:
 class Ui_CalculatorDialog {
  setupUi (QDialog * CalculatorDialog);  // 介面初始化
 };
 namespace Ui {
  class CalculatorDialog : public Ui_CalculatorDialog { NULL }
 }
 Ui_CalculatorDialog  <==>  Ui::CalculatorDialog
 兩個名字都可以，等價的，常用的是後者 'Ui::XxxxYxxx'。

 "使用方法1"：基類子物件形式去呼叫setupUi ()
 class xx : public Ui::CalculatorDialog {
  // 基類子物件形式去呼叫setupUi ()
  xx () {
   setupUi ();  // 完成介面初始化
  }
 };

 "使用方法2"：成員子物件，指標呼叫
 class xx {
 private:
  Ui::CalculatorDialog* ui; //  成員子物件，指標直接 -> 呼叫
  xx () : ui (new Ui::CalculatorDialog) {
   ui->setupUi ();  // 完成介面初始化
  }
 };
5. 編寫相關對應建構函式和槽函式宣告的.h檔案，以及.cpp實現檔案
 建構函式第一句呼叫 setupUi (this)

《案例》登入對話方塊 Login
1. 使用設計師設計UI介面
 designer   --->  LoginDialog.ui
2. 根據UI檔案生成對應的標頭檔案
 $: uic LoginDialog.ui -o ui_LoginDialog.h

/** 登陸對話方塊案例 - 程式碼演示 **/

// LoginDialog.h
#ifndef _LOGINDIALOG_H
#define _LOGINDIALOG_H
#include <QDialog>
#include <QMessageBox > // 訊息框
#include "ui_LoginDialog.h"
class LoginDialog : public QDialog, public Ui::LoginDialog {
    Q_OBJECT
public:
    LoginDialog (void);
private slots:
    void onAccpted (void); // 處理Ok按鈕
    void onRejected (void); // 處理Cancel按鈕
};
#endif //_LOGINDIALOG_H

// LoginDialog.cpp
#include "LoginDialog.h"
#include <QPushButton>
// 建構函式
LoginDialog::LoginDialog (void) {
    // 初始化介面
    setupUi (this);
    // ok按鈕傳送訊號 accepted
    connect (m_btnBox, SIGNAL (accepted ()), this, SLOT (onAccpted ()));
    // cancel按鈕傳送訊號 rejected
    connect (m_btnBox, SIGNAL (rejected ()), this, SLOT (onRejected ()));
    // 將按鈕盒上的內容改成中文
    m_btnBox->button (QDialogButtonBox::Ok)->setText ("登入");
    m_btnBox->button (QDialogButtonBox::Cancel)->setText ("取消");
}
// 處理Ok按鈕槽函式
void LoginDialog::onAccpted (void) {
    if (m_editUserName->text () == "tarena" && m_editPasswd->text () == "123456") {
        // qDebug 是一個列印除錯的函式，使用方法類似於 printf
        qDebug ("登入成功Login Success...");
        close (); // 關閉視窗
    } else {  // 如果使用者名稱或者密碼錯誤
//      QMessageBox msgBox (QMessageBox::Critical, "錯誤：", "使用者名稱或密碼錯誤！", QMessageBox::Ok, this);
        QMessageBox msgBox (QMessageBox::Warning, "提示", "使用者名稱或密碼錯誤！", QMessageBox::Ok, this);
        // 改變Ok按鈕為中文：確定
        msgBox.setButtonText (QMessageBox::Ok, "確定");
        msgBox.exec (); // 等待時間結束，也就是等待點選Ok按鈕
    }
}
// 處理Cancel按鈕槽函式
void LoginDialog::onRejected (void) {
    // 建立一個用於提示的訊息框 QMessageBox
    // 引數1：訊息框風格
    // 引數2：標題
    // 引數3：提示訊息內容
    // 引數4：按鈕盒
    // 引數5：父視窗指標this 
    QMessageBox msgBox (QMessageBox::Question, windowTitle (), "確定要取消登入嗎？", QMessageBox::No | QMessageBox::Yes, this);
    msgBox.setButtonText (QMessageBox::No, "取消");
    msgBox.setButtonText (QMessageBox::Yes, "確定");
    // 顯示訊息框，如果點選Yes按鈕則關閉對話方塊
    if (msgBox.exec () == QMessageBox::Yes)
        close ();  // QDialog 繼承過來的, this->close () 關閉對話方塊
}

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

《案例》顯示系統時間

/** 程式碼演示 - 顯示靜態的系統時間 **/

// TimeDialog.h
#ifndef _TIMEDIALOG_H
#define _TIMEDIALOG_H
#include <QDialog>
#include <QTime>  // 補充到當天筆記
#include <QPushButton>
#include <QLabel>
#include <QVBoxLayout>  // 垂直佈局器
#include <stdio.h>
class TimeDialog : public QDialog {
    Q_OBJECT
public:
    TimeDialog (void);
private slots:
    void timeClicked (void); // 自定義點選對應的槽函式
signals: // 自定義訊號，只需宣告不能寫實現!!!
    void timeSetText (const QString&);
private:
    QLabel* m_labTime;
    QPushButton* m_btnTime;
};
#endif //_TIMEDIALOG_H

// TimeDialog.cpp
#include "TimeDialog.h"
// 建構函式
TimeDialog::TimeDialog (void) {
    setWindowTitle ("系統時間");
    m_labTime = new QLabel (this);
    m_btnTime = new QPushButton ("當前系統時間", this);
    // 設定label邊框效果: 凹陷
    m_labTime->setFrameStyle (QFrame::Panel | QFrame::Sunken);
    // 設定文字內容水平和垂直都居中顯示 
    m_labTime->setAlignment (Qt::AlignHCenter | Qt::AlignVCenter); 
    // 建立垂直佈局器 
    QVBoxLayout* layout = new QVBoxLayout (this); 
    layout->addWidget (m_labTime); 
    layout->addWidget (m_btnTime); 
    setLayout (layout);
    // 點選獲取時間按鈕執行自定義槽函式
    connect (m_btnTime, SIGNAL (clicked ()),
        this, SLOT (timeClicked ()));
    connect (this, SIGNAL (timeSetText (const QString&)),
            m_labTime, SLOT (setText (const QString&)));
}
// 自定義槽函式
void TimeDialog::timeClicked (void) {
#if 0
    m_labTime->setText (QTime::currentTime ().toString ( 
            "hh:mm:ss"));
#else
    // emit是qt定義的關鍵字，後面跟的是訊號內容，沒有特殊作用
    emit timeSetText (
        QTime::currentTime ().toString ("hh:mm:ss")
        );
#endif 
}

// Time.cpp (main)
#include <QApplication>
#include "TimeDialog.h" 
int main (int argc, char** argv) {
    QApplication app (argc, argv); 
    TimeDialog dialog; 
    dialog.show (); 
    return app.exec (); 
}