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