大家好我是Halcyon.平安欢迎文末添加好友交流共同进步目录一、标签实现Hellow World1.1图形化方式实现1.2 代码方式实现二、编辑框实现Hellow World1.1 图形化方式实现1.2 代码方式实现三、 按钮实现Hellow World1.1 图形化方式实现四、窗口坐标体系目录一、标签实现Hellow World1.1图形化方式实现我们直接打开Qt Creator然后我创建了一个项目名为Hello_World基类为QWidget的类Widget至于如何创建可以看上一篇文章然后双击打开我们的widget.ui然后就能够跳转到设计区域此时找到Display Widgets它翻译过来就是显示控件意思就是用于进行显示的控件那么其中的第一个Label(也就是标签的意思)所以我们我们直接使用鼠标左键长按Label然后拖拽到中间的程序窗口接下来我们进行双击然后就可以手动修改里面的内容了如果显示感觉太小我们可以用鼠标放在蓝点出来拖动进行扩大方框最后我们点击绿色的运行按钮就可以进行自动编译然后运行了然后就显示了一个Hellow!World的标签这时候我们点击编辑区的widget.ui就能够看到刚才系统自动给我们生成的图形化界面生成的代码来看看我们这里所用到的类QLabel核心控件类 明确指定是 Qt 标签显示控件QRect对应几何尺寸类用来存储 x/y/ 宽 / 高 坐标尺寸就是我们运行的那个框框的尺寸底层容器类UI 文件内部解析使用代码不会直接操作QWidgetQLabel 的父基类所有窗口控件都继承自 QWidgetQString 对应字符串类存放 label 显示文本这里就是我们的Hellow!World那么是如何自动实现的我们在界面设计师中拖拽 QLabel 控件后ui 文件会自动生成对应的 XML 描述代码。编译项目时qmake 会解析这份 UI 文件并自动转换生成 C 代码界面的创建与布局逻辑都由该段代码实现整套流程无需手动操作。若想查看这份自动生成的 C 代码我们可按以下方法操作其实就在我们保存的项目路径下。我们可以看到他的名字是Hellow_World.pro然后返回他的上一级目录我们能够看到一个文件夹然后点击进入找到我们的ui_widget.h文件拖入到我们的Qt代码界面直接打开查看它函数内部会自己完成 QLabel 对象 label 的创建然后该对象是在堆内存中分配的同时还会完成控件坐标、尺寸等属性配置。这也就说明如果我们不借助 UI 设计师、只用纯 C 代码实现界面展示Hellow!World逻辑和它完全一致 —— 手动 new 创建堆上的 QLabel 对象再依次配置各项属性接下来让我们用纯代码来实现1.2 代码方式实现首先我们关掉上面的文件后创建一个新的文件然后我们通过代码来构造界面的时候一般会把构造界面的代码放到Widget的构造函数中接下来我们就创建类似于图像化方法中的label然后内容输入Hellow!World即可上面我们讲到了label是QLabel的类对象但是使用QLabel的时候会发现系统不知道它是什么东西why其实这需要我们手动包含它的头文件那么我们该如何传递参数呢这里通过new QLabel(this)创建控件并用QLabel*类型指针label接收。创建QLabel时构造函数支持传入父控件指针这会启用 Qt 对象树内存管理机制该参数存在默认值nullptr如果不传参则不会加入对象树。我们需要借助对象树自动管理内存因此必须传入父对象此时的this就是我们的Widget窗口对象指针,至于自动生成的代码解释和我们的对象树以及为什么使用对象树我在上节课则已经讲述了这里就不再多说接下来就是如何写入Hellow!World就是如何设置文本顾名思义设置文本翻译过来就是setText(),我们会发现接口参数类型为QString其实它是Qt专属字符串类。Qt所有控件接口默认使用QString开发推荐优先使用它它兼容 C 字符串xxx与std::string支持隐式转换无需手动转类型。相比std::stringQString内置统一编码处理能大幅规避中文乱码问题。而且QLabel等 Qt 控件头文件已间接引入QString绝大多数场景无需我们自己手动写#include QString直接传入普通字符串字面量即可我们点击运行然后看看最终效果我们就完成了使用纯代码的方式在界面中创建一个QLabel控件对象并显示出我们想要显示的文本二、编辑框实现Hellow World1.1 图形化方式实现首先我们也是先新创建一个新的项目文件然后打开设计区拉入Line Edit然后把内容设置成我们想要呈现的我们把内容改成Hellow!World然后依旧扩大一下编辑框大小然后点击运行Line Edit顾名思义单行编辑框即不可换行但可编辑我们接下来通过上面同样的办法来查看一下它的自动生成的C代码我们这里可以看到关于单行编辑框它自动生成了一个QLineEdit*类型的对象lineEdit然后进行一系列操作所以接下来我们使用代码完成上述操作1.2 代码方式实现我们新建文件后来到到Widget的构造函数中同样的引入我们需要实现的控件的头文件 然后创建一个对象并设置文本内容最后运行代码即可显示相同的效果三、 按钮实现Hellow World1.1 图形化方式实现我们直接重新建立一个新的文件夹演示这里按照上面的步骤创建新的文件项目然后来到设计区拖入Push Button然后编辑内容和大小这效果不就出来了吗 但是这里我们发现点击按钮不是可以实现个什么其他现象吗这里好像就只是变成蓝色了因为我们这里只是单纯的创建按钮然后写入了一个文本至于实现一个功能我们还需要给它设计一个处理函数那么什么是处理函数呢其实就是一个操作这里涉及到信号槽的概念我们后续详细讲解当我们接收到一个信号此处是点击按钮然后想让它实现一个功能比如让文本从Hello!World变成Hello!Qt这个变换操作就是槽所以我们需要将信号和槽连接起来就能展现出这个点击按钮变换文本的有趣现象了那么我们先来简单的通过代码演示着看一下后续再来进行这方面知识的详细解释我们来就会发现它动起来了是不是很有趣接下来我们看看系统生成的C代码我们会发现一个有趣的现象那就是C代码包含有一个公有的QPushButton* pushButton并且变量名就是和当初我们在设计区拖动时objectName自动生成的pushButton对应。那么这个我们能不能自己修改这个objectName呢答案是可以的在 Qt 设计里修改按钮的objectName本质是修改 ui 文件里该控件的标识名因为ui 是指向结构体对象的指针而该结构体内部存储所有界面控件的指针成员。编译时 uic 工具会根据这个名字自动在Ui::Widget结构体中生成同名成员变量。原 objectName 是pushButton → ui 里成员为ui-pushButton改成myButton后自动生成的成员变量就变成ui-myButton。因此我们自己写代码访问控件时必须同步把ui-pushButton改成ui-myButton否则编译器会报找不到标识符。此时我们重新运行后打开我们的C代码进行查看看看公有的QPushButton* pushButton是否会相应的发生改变与myButton对应呢当然是改变了我们简单看看手动创建是如何创建的直接创建一个对象然后设置文本进行信号与槽的连接但是这里我们要注意的是myButton是我们定义的一个局部变量需要让我们的处理函数也能找到然后访问这个对象我们需要去widget里面把myButton拿出来定义成它的私有成员函数即可四、窗口坐标体系这里可以看到和普通的数学坐标系它是不一样的它是以左上⻆为原点0,0X向右增加Y向下增加。其实不管是屏幕还是窗口坐标原点 (0,0) 都在最左上角要是咱们拖动独立窗口调整位置这个坐标就是对应整个电脑屏幕的位置而 Qt 里用 move关键字下面讲解 给控件设置位置时坐标是跟着它的父窗口来算的只相对父控件生效。接下来我们就们先来看看调整窗口的位置到原点我们来看看它运行后是不是直接到了电脑的左上角this-move(0,0);这里我们就直接看到跑到了电脑屏幕的左上角接下来我们在来看看用代码把一个按钮控件设置在主窗口的左上角QPushButton*pushButtonnewQPushButton(this);pushButton-setText(按钮);pushButton-move(0,0);我们已经完整的看着了如何移到了原点并看到了对应的效果那我们想要将这个对象设置到其它的位置我们应该如何设置move里面的参数呢其实这就涉及到我们显示器的本质了其实显示器本质上就是可以发光的小亮点/小灯泡来构成的move(x, y)其实move要进行传参x, y这个坐标那么坐标后面的单位是像素x和y就是按照这个小亮点移动然后确定位置不信的你们可以打开手机相机然后对着屏幕不断的放大相机倍数你可以看看是不是哟值得一提的是显示器的亮点越多我们显示器的画质也就越好那我们就来看看把主窗口和控件随便移动一个坐标看看它的位置QPushButton*pushButtonnewQPushButton(this);pushButton-setText(按钮);pushButton-move(60,90);this-move(600,600);