六、 Qt设计师使用(designer)

案例1：使用设计师重构加法计算器

1 创建工程目录
mkdir Calculator2
2 进入工程目录，执行“designer”启动设计师
1）在新建窗体界面，选择模板(父窗口):“Dialog without Buttons”
2）在设计师界面中完成ui设计
–》从“Widget Box”里面找到需要使用控件，拖拽到父窗口上面
PushButton(1个) LineEdit(3个) Label(1个)
–》设置父窗口和每个控件的属性
父窗口(QDialog)：
objectName(对象名):CalculatorDialog
注：将来会根据父窗口的对象名生成一个名字相同类，包含在设计师完成的所有代码
font(字体)：点大小(20)
windowTitle(标题)：加法计算器
左操作数(QLineEdit)
objectName:m_editX
alignment:水平(AlignRight)
右操作数(QLineEdit)
objectName:m_editY
alignment:水平(AlignRight)
显示结果(QLineEdit)
objectName:m_editZ
alignment:水平(AlignRight)
readOnly(只读)：勾选√
加号标签：
objectName:m_label
text:"+"
等号按钮：
objectName:m_button
enabled:去掉勾选√(禁用)
text:"="
–》调整父窗口和控件的大小和位置
方法1：鼠标拖拽
方法2：键盘，调整位置(方向键、ctrl+方向键) 调整大小(shitf+方向键、ctrl+shift+方向键)
方法3：设置geometry属性，调整位置(x,y) 大小(宽度,高度)
方法4：使用布局器自动调整 //推荐
–》窗体预览
–》保存(ctrl+s),指定文件名“CalculatorDialog.ui”
–》关闭，最终在工程目录下得到一个"CalculatorDialog.ui"文件

3 使用界面编辑器(uic),将“CalculatorDialog.ui(xml)”转换为“ui_CalculatorDialog.h(c++)”
1）转换命令
uic CalculatorDialog.ui -o ui_CalculatorDialog.h
2）转换后“ui_CalculatorDialog.h”文件内容
class Ui_CalculatorDialog{
public:
图形控件相关对象指针声明;
void setupUi(QDialog*){//界面初始化
创建图形控件、属性设置…
}
};
namespace Ui{
class CalculatorDialog:public Ui_CalculatorDialog{};
}
注：Ui名字空间的子类(Ui::CalculatorDialog)和上面基类(Ui_CalculatorDialog)相同

4 使用“ui_CalculatorDialog.h”文件，复用里面代码方法
1）方法1：继承
class MyClass:public Ui::CalculatorDialog{
//将界面相关代码继承过来直接使用
};
2）方法2：组合
class MyClass{
public:
MyClass():ui(new Ui::CalculatorDialog){}
private:
//通过“ui->”访问和界面相关代码
Ui:: CalculatorDialog* ui;
};
5 编写代码、构建、测试
1）继承方式，参考Calculator2.
ui_CalculatorDialog.h

/********************************************************************************
** Form generated from reading UI file 'CalculatorDialog.ui'
**
** Created by: Qt User Interface Compiler version 5.4.1
**
** WARNING! All changes made in this file will be lost when recompiling UI file!
********************************************************************************/

#ifndef UI_CALCULATORDIALOG_H
#define UI_CALCULATORDIALOG_H

#include <QtCore/QVariant>
#include <QtWidgets/QAction>
#include <QtWidgets/QApplication>
#include <QtWidgets/QButtonGroup>
#include <QtWidgets/QDialog>
#include <QtWidgets/QHBoxLayout>
#include <QtWidgets/QHeaderView>
#include <QtWidgets/QLabel>
#include <QtWidgets/QLineEdit>
#include <QtWidgets/QPushButton>

QT_BEGIN_NAMESPACE

class Ui_CalculatorDialog
{
   
public:
    QHBoxLayout *horizontalLayout;
    QLineEdit *m_editX;
    QLabel *m_label;
    QLineEdit *m_editY;
    QPushButton *m_button;
    QLineEdit *m_editZ;

    void setupUi(QDialog *CalculatorDialog)
    {
   
        if (CalculatorDialog->objectName().isEmpty())
            CalculatorDialog->setObjectName(QStringLiteral("CalculatorDialog"));
        CalculatorDialog->resize(535, 150);
        QFont font;
        font.setPointSize(20);
        font.setBold(false);
        font.setWeight(50);
        CalculatorDialog->setFont(font);
        CalculatorDialog->setAcceptDrops(false);
        horizontalLayout = new QHBoxLayout(CalculatorDialog);
        horizontalLayout->setObjectName(QStringLiteral("horizontalLayout"));
        m_editX = new QLineEdit(CalculatorDialog);
        m_editX->setObjectName(QStringLiteral("m_editX"));
        m_editX->setAlignment(Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter);

        horizontalLayout->addWidget(m_editX);

        m_label = new QLabel(CalculatorDialog);
        m_label->setObjectName(QStringLiteral("m_label"));

        horizontalLayout->addWidget(m_label);

        m_editY = new QLineEdit(CalculatorDialog);
        m_editY->setObjectName(QStringLiteral("m_editY"));
        m_editY->setAlignment(Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter);

        horizontalLayout->addWidget(m_editY);

        m_button = new QPushButton(CalculatorDialog);
        m_button->setObjectName(QStringLiteral("m_button"));
        m_button->setEnabled(false);
        QFont font1;
        font1.setBold(false);
        font1.setWeight(50);
        m_button->setFont(font1);

        horizontalLayout->addWidget(m_button);

        m_editZ = new QLineEdit(CalculatorDialog);
        m_editZ->setObjectName(QStringLiteral("m_editZ"));
        m_editZ->setAlignment(Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter);
        m_editZ->setReadOnly(true);

        horizontalLayout->addWidget(m_editZ);


        retranslateUi(CalculatorDialog);

        QMetaObject::connectSlotsByName(CalculatorDialog);
    } // setupUi

    void retranslateUi(QDialog *CalculatorDialog)
    {
   
        CalculatorDialog->setWindowTitle(QApplication::translate("CalculatorDialog", "\345\212\240\346\263\225\350\256\241\347\256\227\345\231\250", 0));
        m_label->setText(QApplication::translate("CalculatorDialog", "+", 0));
        m_button->setText(QApplication::translate("CalculatorDialog", "=", 0));
    } // retranslateUi

};

namespace Ui {
   
    class CalculatorDialog: public Ui_CalculatorDialog {
   };
} // namespace Ui

QT_END_NAMESPACE

#endif // UI_CALCULATORDIALOG_H

CalculatorDialog.h

#ifndef __CALCULATORDIALOG_H
#define __CALCULATORDIALOG_H

#include "ui_CalculatorDialog.h"//继承方式

//自定义计算器窗口类,继承了父窗口,那么当前类就也是一个父窗口
class CalculatorDialog:public QDialog,public Ui::CalculatorDialog{
   
    Q_OBJECT
public:
    //构造函数
    CalculatorDialog(void);
public slots:
    //恢复按钮为正常状态槽函数
    void enableButton(void);
    //计算和显示结果的槽函数
    void calcClicked(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(QString)
    //注:如果连接的槽函数是当前父窗口中自定义的,那么第三个参数一定
    //是this.
    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(calcClicked(void)));
}
//恢复按钮为正常状态槽函数
void CalculatorDialog::enableButton(void){
   
    bool bXOk;//记录左操作数是否输入了有效数据
    bool bYOk;//记录右操作数是否输入了有效数据
    //text():获取文本内容(QString)
    //toDouble():将QString转换为double,参数保存转换是否成功结果
    m_editX->text().toDouble(&bXOk);
    m_editY->text().toDouble(&bYOk);
    //如果左右操作数都输入了有效数据,则恢复按钮为正常可用状态,否则
    //设置为禁用状态.
    m_button->setEnabled(bXOk && bYOk);
}
//计算和显示结果的槽函数
void CalculatorDialog::calcClicked(void){
   
    //计算相加结果
    double res = m_editX->text().toDouble() + 
                 m_editY->text().toDouble();
    //将数字结果转换为字符串
    //number():将double转换为QString
    QString str = QString::number(res);
    //显示结果
    //setText():设置控件要显示的文本
    m_editZ->setText(str);
}

main.cpp

#include <QApplication>
#include "CalculatorDialog.h"

int main(int argc,char** argv){
   
    QApplication app(argc,argv);
    
    CalculatorDialog dialog;
    dialog.show();

    return app.exec();
}

2）组合方式，参考Calculator2_2.tar.gz
CalculatorDialog.h

#ifndef __CALCULATORDIALOG_H
#define __CALCULATORDIALOG_H

#include "ui_CalculatorDialog.h"//组合方式

//自定义计算器窗口类,继承了父窗口,那么当前类就也是一个父窗口
class CalculatorDialog:public QDialog{
   
    Q_OBJECT
public:
    //构造函数
    CalculatorDialog(void);
    //析构函数
    ~CalculatorDialog(void);
public slots:
    //恢复按钮为正常状态槽函数
    void enableButton(void);
    //计算和显示结果的槽函数
    void calcClicked(void);
private:
    //将来通过"ui->"访问和界面相关代码
    Ui::CalculatorDialog* ui;
};
#endif//__CALCULATORDIALOG_H

CalculatorDialog.cpp

#include "CalculatorDialog.h"
//构造函数
CalculatorDialog::CalculatorDialog(void)
    :ui(new Ui::CalculatorDialog){
   
    //ui = new Ui::CalculatorDialog;
    //界面初始化
    ui->setupUi(this);
    ui->m_editX->setValidator(new QDoubleValidator(this));//设置验证器
    ui->m_editY->setValidator(new QDoubleValidator(this));//设置验证器
    //信号和槽连接
    //左右操作数文本改变时,发送信号textChanged(QString)
    //注:如果连接的槽函数是当前父窗口中自定义的,那么第三个参数一定
    //是this.
    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(calcClicked(void)));
}
CalculatorDialog::~CalculatorDialog(void){
   
    delete ui;
}
//恢复按钮为正常状态槽函数
void CalculatorDialog::enableButton(void){
   
    bool bXOk;//记录左操作数是否输入了有效数据
    bool 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::calcClicked(void){
   
    //计算相加结果
    double res = ui->m_editX->text().toDouble() + 
                 ui->m_editY->text().toDouble();
    //将数字结果转换为字符串
    //number():将double转换为QString
    QString str = QString::number(res);
    //显示结果
    //setText():设置控件要显示的文本
    ui->m_editZ->setText(str);
}

案例2：登录对话框

1）创建工程目录
mkdir Login
2）进入工程目录，启动设计师，完成ui设计
–》拖拽需要使用控件
Label(2个) LineEdit(2个) ButtonBox(1个)
–》设置属性
父窗口：
objectName:LoginDialog
font:点大小(20)
windowTitle:登录
标签：
objectName:默认
text:“用户名:”、“密码:”
行编辑：
objectName:m_editUserName //用户名输入
objectName:m_editPassword //密码输入
echoMode:password
按钮框：
objectName:m_btnBox
layoutDirection：RightToLeft
–》使用布局器，调整大小和位置
–》保存，指定文件名：“LoginDialog.ui”
3）转换，将ui(xml)文件转换为.h(c++)文件
uic LoginDialog.ui -o ui_LoginDialog.h
4）编码、测试、运行

二 Qt创造器使用(qtcreator)

案例：使用qtcreator再次重构加法计算器
1 在任意目录下执行"qtcreator"启动Qt创造器
2 在“欢迎模式”下点击“New Project”创建新的工程
1）选择工程模板
Application->Qt Widgets Application
2）项目介绍和位置
指定工程名字：Calculator3
指定所在路径：/home/tarena/csd1911/qt/day03
注：将来会自动在指定目录下创建和工程名字一致的工程目录
3）Kit Selection(默认)
4）类信息
选择基类(父窗口)：QDialog
指定类名：CalculatorDialog
注：将来会根据类名自动生成相应的源文件
CalculatorDialog.h
CalculatorDialog.cpp
CalculatorDialog.ui
5）项目管理(忽略)
6）完成，默认进入编辑模式

3 在侧边栏，双击“ui”文件，进入设计模式(desigenr),完成界面设计
–》从“Widget Box”里面找到需要使用控件，拖拽到父窗口上面
PushButton(1个) LineEdit(3个) Label(1个)
–》设置父窗口和每个控件的属性
父窗口(QDialog)：
objectName(对象名):CalculatorDialog(默认，不要修改！)
font(字体)：点大小(20)
windowTitle(标题)：加法计算器
左操作数(QLineEdit)
objectName:m_editX
alignment:水平(AlignRight)
右操作数(QLineEdit)
objectName:m_editY
alignment:水平(AlignRight)
显示结果(QLineEdit)
objectName:m_editZ
alignment:水平(AlignRight)
readOnly(只读)：勾选√
加号标签：
objectName:m_label
text:"+"
等号按钮：
objectName:m_button
enabled:去掉勾选√(禁用)
text:"="
–》调整父窗口和控件的大小和位置
方法1：鼠标拖拽
方法2：键盘，调整位置(方向键、ctrl+方向键) 调整大小(shitf+方向键、ctrl+shift+方向键)
方法3：设置geometry属性，调整位置(x,y) 大小(宽度,高度)
方法4：使用布局器自动调整 //推荐
–》运行预览(ctrl+r)

4 编码、构建、测试

转载：https://blog.csdn.net/jackJruit/article/details/115578991

查看评论

飞道的博客

飞道的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章

QT 笔记3 | Qt设计师使用 Qt创造器使用

六、 Qt设计师使用(designer)

案例1：使用设计师重构加法计算器

案例2：登录对话框

二 Qt创造器使用(qtcreator)

* 以上用户言论只代表其个人观点，不代表本网站的观点或立场