第七章：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
头文件内容：

/********************************************************************************
** Form generated from reading UI file ' CalculatorDialog.ui'
**
** Created by: Qt User Interface Compiler version 5.14.2
**
** 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/QApplication>
#include <QtWidgets/QDialog>
#include <QtWidgets/QHBoxLayout>
#include <QtWidgets/QLabel>
#include <QtWidgets/QLineEdit>
#include <QtWidgets/QPushButton>QT_BEGIN_NAMESPACEclass Ui_CalculatorDialog
{public:QHBoxLayout *horizontalLayout;QLineEdit *m_editX;QLabel *m_label;QLineEdit *m_editY;QPushButton *m_btnCalc;QLineEdit *m_editZ;void setupUi(QDialog *CalculatorDialog){if (CalculatorDialog->objectName().isEmpty())CalculatorDialog->setObjectName(QString::fromUtf8("CalculatorDialog"));CalculatorDialog->setEnabled(true);CalculatorDialog->resize(551, 193);QFont font;font.setPointSize(18);font.setBold(true);font.setWeight(75);CalculatorDialog->setFont(font);horizontalLayout = new QHBoxLayout(CalculatorDialog);horizontalLayout->setObjectName(QString::fromUtf8("horizontalLayout"));m_editX = new QLineEdit(CalculatorDialog);m_editX->setObjectName(QString::fromUtf8("m_editX"));m_editX->setAlignment(Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter);horizontalLayout->addWidget(m_editX);m_label = new QLabel(CalculatorDialog);m_label->setObjectName(QString::fromUtf8("m_label"));horizontalLayout->addWidget(m_label);m_editY = new QLineEdit(CalculatorDialog);m_editY->setObjectName(QString::fromUtf8("m_editY"));m_editY->setAlignment(Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter);horizontalLayout->addWidget(m_editY);m_btnCalc = new QPushButton(CalculatorDialog);m_btnCalc->setObjectName(QString::fromUtf8("m_btnCalc"));m_btnCalc->setEnabled(false);horizontalLayout->addWidget(m_btnCalc);m_editZ = new QLineEdit(CalculatorDialog);m_editZ->setObjectName(QString::fromUtf8("m_editZ"));m_editZ->setAlignment(Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter);m_editZ->setReadOnly(true);horizontalLayout->addWidget(m_editZ);retranslateUi(CalculatorDialog);QMetaObject::connectSlotsByName(CalculatorDialog);} // setupUivoid retranslateUi(QDialog *CalculatorDialog){CalculatorDialog->setWindowTitle(QCoreApplication::translate("CalculatorDialog", "\345\212\240\346\263\225\350\256\241\347\256\227\345\231\250", nullptr));m_label->setText(QCoreApplication::translate("CalculatorDialog", "+", nullptr));m_btnCalc->setText(QCoreApplication::translate("CalculatorDialog", "=", nullptr));} // retranslateUi};namespace Ui {class CalculatorDialog: public Ui_CalculatorDialog {};
} // namespace UiQT_END_NAMESPACE#endif // 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 <QDialog>
#include <QLabel>
#include <QPushButton>
#include <QLineEdit>
#include <QDoubleValidator>
#include <QHBoxLayout>
#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 <QApplication>
#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 <QDialog>
#include <QMessageBox>//消息框
#include <QDebug>//打印调用
#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时发送信号：acceptedconnect(m_btnBox, SIGNAL(accepted(void)), this, SLOT(onAccepted(void)));//点击concel发送信号：rejectedconnect(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 <QApplication>int main(int argc, char** argv)
{QApplication app(argc, argv);LoginDialog login;login.show();return app.exec();
}

第七章：Qt设计师使用（designer）相关推荐

第七章 Qt对象模型与容器类
2019-9-12 对象模型 1)信号和槽用于两个对象之间进行通信需要继承自QObject或其子类信号只用声明,不需要定义,返回值是void 必须在类声明的最开始处添加Q_OBJECT宏槽和信 ...
QT 笔记3 | Qt设计师使用 Qt创造器使用
六. Qt设计师使用(designer) 案例1:使用设计师重构加法计算器 1 创建工程目录 mkdir Calculator2 2 进入工程目录,执行"designer"启动设计 ...
QT：Qt设计师的使用 designer
QT设计师的使用 designer <tips> 源文件/头文件的'最后加空行',有些编译不加空行会报警告. 1. 启动设计师在命令行 $: designer 根据提示选择模板(父窗 ...
Qt学习day03 Qt设计师(designer) Qt创造器(qtcreator)
一 Qt设计师(designer) 案例:使用qt设计,重构加法计算器 1 创建工程目录 mkdir Calculator2 2 进入工程目录,输入"designer"启动设计师 ...
Python PyQt5 Qt Designer (Qt设计师)
PyQt5 Qt Designer (Qt设计师) 本文由 Luzhuo 编写,转发请保留该信息. 原文: https://blog.csdn.net/Rozol/article/details/87 ...
python界面设计资源库_python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法...
PyQt5 Qt Designer (Qt设计师) PyQt5是对Qt所有类进行封装, Qt能开发的东西, PyQt都能开发. Qt是强大的GUI库之一, 用C++开发, 并且跨平台. PyQt双许可 ...
python图形界面设计代码_python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方...
PyQt5 Qt Designer (Qt设计师) PyQt5是对Qt所有类进行封装, Qt能开发的东西, PyQt都能开发. Qt是强大的GUI库之一, 用C++开发, 并且跨平台. PyQt双许可 ...
第六章 Qt布局管理器Layout
第六章 Qt布局管理器Layout 大家有没有发现一个现象,我们放置一个组件,给组件最原始的定位是给出这个控件的坐标和宽高值,这样Qt就知道这个组件的位置.当用户改变窗口的大小,组件还静静地呆在原来的 ...
Qt4_在Qt设计师中集成自定义窗口部件
在Qt设计师中集成自定义窗口部件在Qt设计师中使用自定义窗口部件之前,我们必须让Qt设计师先察觉到它们的存在.有两种方法可以完成这一任务:改进法(promotion)和插件法(pluigin). 改 ...

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

Qt设计师使用（designer）

练习案例

第七章：Qt设计师使用（designer）相关推荐

最新文章

热门文章