QT：Qt设计师的使用 designer

QT设计师的使用 designer

<tips>
源文件/头文件的'最后加空行'，有些编译不加空行会报警告。

1. 启动设计师
 在命令行 $: designer
 根据提示选择模板（父窗口）：Dialog without buttons
 文件 -> 保存 (CalculatorDialog.ui)

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 (); 
}