qt|第七章（Qt设计师使用（designer）） qt|c++

前情回顾：
第一章：Qt的概述
第二章：在Ubuntu编写第一个Qt程序
第三章：Qt的字符串和字符编码
第四章：Qt的信号和槽
第五章：Qt容器窗口（父窗口）
第六章：面向对象的Qt编程
Qt设计师使用（designer）案例：重构加法计算器

1、创建工程：mkdir Calculator2
2、进入工程目录，启动设计师designer
- 在终端输入designer即可进入设计师界面
3、选择模板：Dialog Without Buttons
4、设计界面
- 将需要的组件从widget box中找到并拖拽到父窗口
  
  文章图片
- 设置父窗口和每个组件的属性
  - 父窗口：
    objectName:CalculatorDialog
    font: point size(18)
    widowTitle: Add calculator
    注意：将来会根据父窗口的名字生成对应的类
    
    文章图片
  - 左、右操作数和结果
    objectName:m_editX, m_editY, m_editZ
    Alignment: 水平（Horizontal），AlignRight
    结果还要设置一个：readOnly: 勾选，√
  - label加号“+”：双击修改text
  - 【qt|第七章（Qt设计师使用（designer））】等号按钮
    objectName: m_btbCalc
    enabled:去掉，√
    双击修改文本：=
    
    文章图片
- 调整父窗口和组件的大小和位置（建议使用布局器）
  
  文章图片
- 窗体预览
  
  文章图片
- 保存（ctrl+s），指定文件名CalculatorDialog.ui
5、转换：将.ui转换为.h
uic CalculatorDialog.ui -o ui_CalculatorDialog.h
头文件内容：

class ui_CalculatorDialog{ public: 图形组件声明; void setupUi(){ 图形组件创建图形组件属性设置 } }; namesapce Ui{ class CalculatorDialog:public ui_CalculatorDialog{} };

Ui::CalculatorDialog <=等价=>Ui_CalculatorDialog

6、使用ui_xx.h文件方法：
- 继承（方法一）
class XX:public Ui::CalculatorDialog{ //将界面类的相关代码继承过来直接使用 };
- 组合（方法二）
class XX{ public: //通过ui去访问界面类中代码 ui::CalculatorDialog ui; };

eg:
class A{ public: int m_Data; }; class B:public A{}; //方法一 class B{ A m_a; //方法二 };
编写代码
CalculatorDialog.h

#ifndef __CALCULATORDIALOG_H_ #define __CALCULATORDIALOG_H_#include #include #include #include #include #include #include "ui_CalculatorDialog.h"//新增class CalculatorDialog:public QDialog, public Ui::CalculatorDialog{ Q_OBJECT public: CalculatorDialog(void); public slots: void enableCalcButton(void); void calcClicked(void); private:}; #endif //__CALCULATORDIALOG_H_

CalculatorDialog.cpp

#include "CalculatorDialog.h"// CalculatorDialog::CalculatorDialog(void){ setupUi(this); //新增 m_editY->setValidator(new QDoubleValidator(this)); m_btnCalc->setEnabled(false); //connect(m_editX, SIGNAL(textChanged(QString)), this, SLOT(enableCalcButton(void))); connect(m_editY, SIGNAL(textChanged(QString)), this, SLOT(enableCalcButton(void))); connect(m_btnCalc, SIGNAL(clicked()), this, SLOT(calcClicked())); }void CalculatorDialog::enableCalcButton(void) { bool bXOk; bool bYOk; m_editX->text().toDouble(&bXOk); m_editY->text().toDouble(&bYOk); m_btnCalc->setEnabled(bXOk && bYOk); }void CalculatorDialog::calcClicked(void) { double res = m_editX->text().toDouble() + m_editY->text().toDouble(); QString str = QString::number(res); m_editZ->setText(str); }

main.cpp

#include #include "CalculatorDialog.h"int main(int argc, char** argv) { QApplication app(argc, argv); CalculatorDialog calc; calc.show(); return app.exec(); }

测试运行

文章图片

练习案例

文章图片

LoginDialog.h

#ifndef __LOGINDIALOG_H_ #define __LOGINDIALOG_H_#include #include //消息框 #include //打印调用 #include "ui_LoginDialog.h"class LoginDialog:public QDialog, public Ui::LoginDialog { Q_OBJECT //moc public: LoginDialog(void); public slots: //处理ok按钮的槽函数 void onAccepted(void); //处理cancel按钮的槽函数 void onRejected(void); private: }; #endif //__LOGINDIALOG_H_

LoginDialog.cpp

#include "LoginDialog.h"LoginDialog::LoginDialog(void) { setupUi(this); //信号和槽连接 //点击ok时发送信号：accepted connect(m_btnBox, SIGNAL(accepted(void)), this, SLOT(onAccepted(void))); //点击concel发送信号：rejected connect(m_btnBox, SIGNAL(rejected(void)), this, SLOT(onRejected(void))); }//点击ok按钮的槽函数 void LoginDialog::onAccepted(void) { //检查用户名和密码，如果是tarena/123456则打印登录成员，如果不是弹出错误提示 if(m_editUserName->text() == "tarena" && m_editPassword->text() == "123456"){ qDebug("登录成功！"); qDebug() << "登录成功"; close(); //关闭登录对话框 } else{ //创建信息提示框 //参数：图标，标题，提示消息，按钮，父窗口 QMessageBox msgbox(QMessageBox::Critical, windowTitle(), "用户名或密码错误", QMessageBox::Ok, this); //显示信息提示框，同时进入事件循环 //当点击提示框按钮时会退出事件循环 msgbox.exec(); } }//点击concel按钮的槽函数 void LoginDialog::onRejected(void) { QMessageBox msgBox(QMessageBox::Question, windowTitle(), "确定要取消登录吗？", QMessageBox::Yes|QMessageBox::No, this); if(msgBox.exec() == QMessageBox::Yes){ close(); //关闭登录窗口 } }

main.cpp

#include "LoginDialog.h" #include int main(int argc, char** argv) { QApplication app(argc, argv); LoginDialog login; login.show(); return app.exec(); }