六、 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_NAMESPACEclass 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);} // setupUivoid 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 UiQT_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转换为QStringQString 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转换为QStringQString 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 编码、构建、测试

QT 笔记3 | Qt设计师使用 Qt创造器使用相关推荐

  1. Qt笔记10：如何使用qt计算屏幕物理尺寸

    我们以计算A4纸在屏幕上显示的像素来进行示例: 转换方式: 显示器逻辑分辨率 = 像素/英寸 = 像素/(2.54 * 厘米) = 像素/(2.54 * 毫米 /10) 像素= 分辨率 * 英寸 = ...

  2. Qt笔记(五十四)之Activate控件开发

    一.Activate控件简介(内容摘自自百度) ActiveX控件是Microsoft的ActiveX技术的一部分.ActiveX控件是可以在应用程序和网络中计算机上重复使用的程序对象.创建它的主要技 ...

  3. Qt学习day03 Qt设计师(designer) Qt创造器(qtcreator)

    一 Qt设计师(designer) 案例:使用qt设计,重构加法计算器 1 创建工程目录 mkdir Calculator2 2 进入工程目录,输入"designer"启动设计师 ...

  4. c++QT笔记,windows毛玻璃窗口实现封装

    原创内容,转载请声明. 今天看到了一些辅助工具的窗口总是会有个毛玻璃效果,我就很好奇如何用c++如何编写那种窗口,就查阅了会儿资料,然后封装了毛玻璃的窗口类,本文主要用于笔记以后方便自己看,如果对你有 ...

  5. git 使用writer_GitHub - Vpredictor/WriterFly: [QT/C++] 写作天下，为作家创造世界而生，执云作笔，诉尽平生意。...

    写作天下 简介 为作家们创造世界而诞生,执云作笔,诉尽平生意. 集简约UI与人性化AI于一体的码字工具,无论是小说.作文.日记.报告,都能轻松驾驭. QQ交流群:705849222 特点 已有功能: ...

  6. QT学习笔记（三）：Qt软件打包发布（QT5.8 _msvc2013_64+Win10_64）

    QT学习笔记(三):Qt软件打包发布(QT5.8 _msvc2013_64+Win10_64) 1.编译方式介绍: 2.动态编译方式打包发布QT程序: 方法一:手动复制 方法二:使用工具 问题& ...

  7. QT学习笔记（二）：QT MinGW 和 MSVC 编译方式

    QT学习笔记(二):QT MinGW 和 MSVC 编译方式 Qt 中有两种方式编译:一种是MinGW ,另一种MSVC,是使用两种不同的编译器. 1.MSVC是指微软的VC编译器: 2.MingGW ...

  8. 05黑马QT笔记之自定义槽函数

    05黑马QT笔记之自定义槽函数 1 自定义槽函数其实不难,没什么好说的,注意以下几点便可. 自定义参函数注意事项(Qt5): * 1)自定义槽函数可以是类成员函数(用得最多).全局普通函数.静态函数. ...

  9. Qt开发笔记（一）：Qt+FFmpeg开发环境搭建以及工程模板

    原博主博客地址:https://blog.csdn.net/qq21497936 本文章博客地址:https://blog.csdn.net/qq21497936/article/details/90 ...

最新文章

  1. Libgdx学习笔记：分享自己写的异步加载
  2. 定义入栈java_小师妹学JVM之:java的字节码byte code简介
  3. 一瓦同城-给新人第四天培训
  4. 苹果x屏幕出现一条绿线_部分用户反映苹果 iPhone 12 屏幕出现划痕 - iPhone 12
  5. bzoj 4596: [Shoi2016]黑暗前的幻想乡
  6. 斯坦福 CS183 YC 创业课系列中文笔记
  7. aws ubuntu php mysql_ubuntu16搭建php7+phpredis拓展+nginx+mysql脚本(aws)
  8. python中for循环和while循环的区别_Python中for循环语句和while循环语句有何不同
  9. 使用原生js实现邮箱模糊查询的效果
  10. 设计模式解密（9）- 装饰者模式
  11. django组件-cookie与session
  12. idea显示左边project栏和隐藏project栏的快捷键
  13. 中国草坪和花园设备市场现状研究分析与发展前景预测报告（2022）
  14. 中文写代码？开始不信后来用中文写了剧情小游戏！嗯，真香~
  15. WebGIS第一课：测试高德API并通过
  16. 那些会阻碍程序员成长的细节
  17. 黑马头条推荐系统完整版（包括虚拟机和数据，代码已修复过可完美跑起来）
  18. 西电 操作系统课设 在Ubuntu18.04安装pintos
  19. ansys添加力矩_Ansys加力矩.doc
  20. python 通过ftp自动 上传指定excel文件

热门文章

  1. iOS不得姐项目--封装状态栏指示器(UIWindow实现)
  2. 【Win11尝鲜】Win 11设置任务栏图标靠左或居中显示
  3. 基于Matlab的汽车偏离车道报警系统
  4. 3分钟学会钉钉线上教学【学生端】教程
  5. 解决了一个Web网页显示不全的BUG
  6. ARCGIS10.3版本的安装入门教程（ARCGIS安装遇到的问题及解决方案）
  7. Rust: 获取当前项目的根目录的绝对路径
  8. log4j2测试用例
  9. 博图V14完美程序案例；整套完整程序，硬件包含：变频器、ET 200、交换机、RFID、PN、HMI等硬件
  10. iOS_TUTK_多台设备同时连线卡UI问题