C++学习笔记day52-----Qt-designer、qtcreator

关注

原创最新推荐文章于 2026-04-07 02:03:37 发布 3k 阅读 AI 写同款· GEO 优化 ›

【Qt开发流程】之QtCreator开发环境的安装和配置 QtCreator开发环境的安装和配置阅读详情

Qt的开发工具，designer和qtcreator。

designer
Qt将图形界面的开发和业务逻辑分开开发，通过designer工具可以帮助开发人员快速的搭建UI界面，并生成对应的代码。
1) 启动designer
可以在终端里直接输入designer来启动Qt
2) 选择父窗口
designer提供的父窗口有5种：
Dialog with Buttons Bottom：带有按键的对话窗口
Dialog with Buttons Right：带有按键的对话窗口
Dialog without Buttons：不带按键的对话窗口
Main Window：主窗口
Widget：所有窗口的基类，也是一个父窗口
3) 拖拽组件进行图形的开发
将右边栏中，Widget Box中的组件按照需求拖拽停靠到父窗口中。
可以通过一些构建组件让整个界面更整齐。
4) 设置各个组件的属性
需要注意的是每个组件都有它的objectName，这个名字将会在后续的步骤中，作为这个类的成员子对象。所以对于objectName的命名需要规范。尤其是父窗口的objectName，它将作为这个类的名称。
对于各个组件的属性也要设置好。
5) 生成.ui文件
在上述步骤完成之后，可以通过ctrl+s保存当前的ui界面，默认会在designer启动的路径下生成一个父窗口名.ui的文件。
.ui文件的内容，是qml语言风格的，对于C/C++程序员来说可读性不高，可以通过下一步将其转换为C/C++风格的头文件。
6) uic 父窗口名.ui -o ui_父窗口名.h
通过uic的指令，完成转换。这一步的转换不是必须的，仅仅为了方便查看头文件。
7) 编写业务部分
第6步，生成了可用的头文件，其中包含了使用designer创建的图形的界面的类。
通常由两种方法使用这个类：
一、继承这个类。
二、将这个类作为自定义类的成员子对象。
上述两种方法都可以使用。

qtcreator
qtcreator是Qt提供的一种IDE(集成开发环境).
它将工程的创建，ui界面的设计并生成代码，业务代码编写，编译，调试，等步骤融为一体。
下面通过创建一个工程为例来讲解：
1) 启动Qt Creator
可以在终端输入”qtcreator”，来启动。
2) 创建一个新的工程
在Qt Creator的界面的左侧边栏中，有一些选项，其中
欢迎：创建新工程的入口，其中由projects、示例、教程等选项。其中project是用于创建/打开工程的；示例中存放的都是Qt官方的一些Demo用于演示某些模块的类。教程是针对比较新的类的讲解。
点击New Project。
3) 选择项目模板
接在上一步之后，会看到一个选择模板的窗口，Application指应用程序的模板；Library是用于开发动态库；还有一些非Qt的项目。
在Application中，还有四个子选项：
Qt Widgets Application:包含图形界面的应用程序开发
Qt Quick Application:基于qml语言的开发
Qt 控制台应用:类似linux终端的界面
Qt Quick UI:基于qml语言的界面开发，类似于designer
这里选择第一个即可
4) 创建工程路劲
这一步用户需要选择创建工程文件的位置。
5) 开发者选项(kit selection)
默认即可
6) 选择基类和类名
这一步，需要用户选择父窗口的类型，只有三个选择：
QMainWindow
QDialog
QWidgets
修改类名之后，头文件，源文件和界面文件的名称都会随之变化，保持一致，除了首字母不会跟随大写
7) 项目管理
这个是使用第三方的软件，进行版本控制，类似于GitHub。不需要设置。
———————————————-
一、Qt设计师的使用(designer)
1、创建工程目录
mkdir Calculator2
2、进入工程目录，启动设计师
1) 在输入”designer”即可进入设计师界面
2) 选择模板:”Dialog whitout button”

3、设计界面
1) 把需要的图形组件从”widget box”拖拽到副窗口上：
pushbutton
line edit
label
2) 设置父窗口和每个组件属性
–> 父窗口
注:将来会根据父窗口的名字生成名字相同的类
font:点大小(20)
WindowTitle:加法计算器
–> 左操作数
objectName:m_editX
alignment:水平右对齐
–> “+”
双击label，修改文本
–> “=”
objectName:m_btnCalc
enable:去掉勾

3) 调整组件的大小和位置
方法一:使用鼠标和键盘(ctrl/shift+方向键)
方法二:

4) 保存(ctrl+s)
5) 窗体–>预览，查看效果。
注:最终得到一个.ui

4、转换，将ui文件转换成C++可以支持的.h文件
uic CalculatorDialog.ui -o ui_CalculatorDialog.h

头文件中的内容:
class Ui_CalculatorDialog{
    public:
        图形组件声明
        void setupUi(父窗口指针){
            创建图形组件和设置它们的属性
        }
};
namespace Ui{
    class CalculatorDialog
        :public Ui_CalculatorDialog{}
}
Ui::CaculatorDialog <==> Ui_CalculatorDialog{}

5、使用界面类中的代码
方法1:继承
class myclass:public Ui::CalculatorDialog{
//继承界面类中的代码直接使用
};
方法2:组合
class myclass{
public:
Ui::CalcutorDial
};

6、编写代码
7、构建
8、测试

二、Qt创造器使用(qtcreator)//IDE
1、启动qtcretor
2、在欢迎模式中选择 new project
3、选择模板
Application->Qt Widgets Application
4、项目的介绍和位置
指定工程名字:Calculator
指定工程所在目录:
注视：
5、开发工具选择，默认即可
6、类信息
指定基类
指定类名CalculatorDialog
7、项目管理，直接忽略

–

收录于