第七章：Qt设计师使用（designer）

前情回顾：
第一章：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

    • 等号按钮
      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();
}