Qt学习之Qt Designer(设计师)

1. 创建工程目录
   mkdir Calculator2

2. 进入工程目录，启动设计师
   1）执行“designer”即可进入设计师
   2）在新建窗体界面选择“Dialog Without Buttons”//也可以选其他父窗口

3. 在设计师中完成界面设计
   1）从"Widget Box"选需要使用控件，拖拽父窗口上面
   LineEdit(3个)
   Label(1个)
   PushButton(1个)
   2）设置父窗口和每个控件的属性
   –》父窗口
   objectname(对象名)：CalculatorDialog
   注：将来父窗口对象名生成相同类名
   font(字体):点大小(20)
   windowTitle(窗口标题):计算器
   –》左操作数
   objectname：m_editX
   alignment:水平(AlignRight)
   –》右操作数
   objectname：m_editY
   alignment:水平(AlignRight)
   –》显示结果
   objectname：m_editZ
   alignment:水平(AlignRight)
   readOnly：勾选√
   –》加号
   objectname：m_label
   text:"+"
   –》等号
   objectname：m_button
   enabled：去掉勾选√ //禁用
   text:"="
   3）调整大小和位置
   –》方法1：鼠标拖拽
   –》方法2：键盘，ctrl/shift+方向键
   –》方法3：设置geometry，位置(x,y)/大小(宽度,高度)
   –》方法4：设置布局器//推荐
   4）窗体->预览
   5）保存(ctrl+s)
   指定文件名：CalculatorDialog.ui
   6）退出，最终在工程目录下得到CalculatorDialog.ui文件

4. 将".ui"(xml)转换".h"(C++)注：这一步不是必要，是为了了解原理
   uic CalculatorDialog.ui -o ui_CalculatorDialog.h

   ui_CalculatorDialog.h文件内容:

   class Ui_CalculatorDialog{
   public:
     图形控件声明;
     void setupUi(){//界面初始化}
   };
   namespace Ui{
     class CalculatorDialog:public Ui_CalculatorDialog{
     };
   }
   Ui::CalculatorDialog<=等价=>Ui_CalculatorDialog
   

   使用ui_CalculatorDialog.h方法：
   方法1：继承//参考CalculatorDialog2
   class XX:public Ui::CalculatorDialog{
   //将界面相关的代码继承过来直接使用
   };
   方法2：组合//参考CalculatorDialog2_2
   class XX{
   构造函数():ui(new Ui::CalculatorDialog){}
   //通过"ui->"访问和界面相关代码
   //访问　ui指针中的setupUi也要用ui->
   //为该类增加析构函数
   Ui::CalculatorDialog* ui;
   };

5. 编码、构建、测试和运行
   继承方法：
    
   CalculatorDialog.h

   #ifndef __CALCULATORDIALOG_H
   #define __CALCULATORDIALOG_H
   //方法一:继承
   #include "ui_CalculatorDialog.h"
   
   //继承父窗口类,当前类就也是父窗口
   class CalculatorDialog
       :public QDialog,public Ui::CalculatorDialog{
       Q_OBJECT //moc
   public:
       //构造函数
       CalculatorDialog(void);
   public slots://自定义槽函数
       //恢复按钮为正常状态的槽函数
       void enableButton(void);
       //计算和显示结果的槽函数
       void clickButton(void);
   };
   
   #endif//__CALCULATORDIALOG_H
   

   CalculatorDialog.cpp

   #include "CalculatorDialog.h"
   //构造函数
   CalculatorDialog::CalculatorDialog(void){
       //界面初始化
       setupUi(this);
       //设置数字验证器:只能输入数字形式的内容
       m_editX->setValidator(
               new QDoubleValidator(this));
       m_editY->setValidator(
               new QDoubleValidator(this));
   
       //信号和槽函数连接
       //左右操作数文本改变时,发送信号textChanged
       connect(m_editX,SIGNAL(textChanged(QString)),
               this,SLOT(enableButton(void)));
       connect(m_editY,SIGNAL(textChanged(QString)),
               this,SLOT(enableButton(void)));
       //按钮点击时,发送信号clicked()
       connect(m_button,SIGNAL(clicked(void)),
               this,SLOT(clickButton(void)));
   }
   //自定义槽函数
   //恢复按钮为正常状态的槽函数
   void CalculatorDialog::enableButton(void){
       bool bXOk,bYOk;
       //text():获取文本内容(QString)
       //toDouble():将QString转换double,转换是否成
       //功的结果保存到参数中
       m_editX->text().toDouble(&bXOk);
       m_editY->text().toDouble(&bYOk);
       //如果左右操作数都输入了有效数据,则恢复按钮
       //为正常可用状态,否则设置禁用状态
       m_button->setEnabled(bXOk && bYOk);
   }
   //计算和显示结果的槽函数
   void CalculatorDialog::clickButton(void){
       //计算结果
       double res = m_editX->text().toDouble() 
                  + m_editY->text().toDouble();
       //将结果转换为字符串
       //number():将double转换为QString
       QString str = QString::number(res);
       //显示计算结果
       m_editZ->setText(str);
   }
   

   main.cpp

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

   组合方法：(能组合就不继承)
   CalculatorDialog.h添加析构函数和私有成员子对象指针

   #ifndef __CALCULATORDIALOG_H
   #define __CALCULATORDIALOG_H
   //方法一:组合
   #include "ui_CalculatorDialog.h"
   
   //继承父窗口类,当前类就也是父窗口
   class CalculatorDialog:public QDialog{
       Q_OBJECT //moc
   public:
       //构造函数
       CalculatorDialog(void);
       //析构函数
       ~CalculatorDialog(void);
   public slots://自定义槽函数
       //恢复按钮为正常状态的槽函数
       void enableButton(void);
       //计算和显示结果的槽函数
       void clickButton(void);
   private:
       //通过"ui->"访问和界面相关的代码
       Ui::CalculatorDialog* ui;
   };
   
   #endif//__CALCULATORDIALOG_H
   

   CalculatorDialog.cpp

   #include "CalculatorDialog.h"
   //构造函数
   CalculatorDialog::CalculatorDialog(void)
       :ui(new Ui::CalculatorDialog){
       //界面初始化
       ui->setupUi(this);
       //设置数字验证器:只能输入数字形式的内容
       ui->m_editX->setValidator(
               new QDoubleValidator(this));
       ui->m_editY->setValidator(
               new QDoubleValidator(this));
   
       //信号和槽函数连接
       //左右操作数文本改变时,发送信号textChanged
       connect(ui->m_editX,SIGNAL(textChanged(QString)),
               this,SLOT(enableButton(void)));
       connect(ui->m_editY,SIGNAL(textChanged(QString)),
               this,SLOT(enableButton(void)));
       //按钮点击时,发送信号clicked()
       connect(ui->m_button,SIGNAL(clicked(void)),
               this,SLOT(clickButton(void)));
   }
   CalculatorDialog::~CalculatorDialog(void){
       delete ui;
   }
   //自定义槽函数
   //恢复按钮为正常状态的槽函数
   void CalculatorDialog::enableButton(void){
       bool bXOk,bYOk;
       //text():获取文本内容(QString)
       //toDouble():将QString转换double,转换是否成
       //功的结果保存到参数中
       ui->m_editX->text().toDouble(&bXOk);
       ui->m_editY->text().toDouble(&bYOk);
       //如果左右操作数都输入了有效数据,则恢复按钮
       //为正常可用状态,否则设置禁用状态
       ui->m_button->setEnabled(bXOk && bYOk);
   }
   //计算和显示结果的槽函数
   void CalculatorDialog::clickButton(void){
       //计算结果
       double res = ui->m_editX->text().toDouble() 
                  + ui->m_editY->text().toDouble();
       //将结果转换为字符串
       //number():将double转换为QString
       QString str = QString::number(res);
       //显示计算结果
       ui->m_editZ->setText(str);
   }
   

   main.cpp不变