win10 + vscode + qt5 开发环境初探与开始第一个例程

2024-07-16 07:13| 来源: 网络整理| 查看: 265

win10 + vscode + qt5 开发环境初探与开始第一个例程整体关系思维导图安装qt5软件下载软件安装开始第一个GUI程序新建一个空白的窗体Qt Designer窗口各部分简介通过GUI例程讲解Qt Creator开发基本操作文件结构说明一个简单的更改演示视频教程地址开始第一个qml程序教程资源安装vscode安装vscode插件在VS Code中打开Qt项目参考资料为啥要用vscode来写qt程序呢？因为有丰富的插件呀。可以高亮、可以括号成对标记、可以自动补全、可以路径补全。。。因为美呀~~~

整体关系思维导图安装qt5 软件下载

一开始在官网看下载的导航，还以为Qt是收费的，还分什么购买和试用，后来发现还有一个选择是非商业用途的opensource，但是在官网也没找到直接的install版。最终还是在搜索引擎里找到的exe安装版。下载后按照默认选项直接安装就好。要20个G，所以我把路径换到了盘。安装程序下载地址

qt5入门教程1

软件安装我看见网上的教程说在填写用户账号和密码的时候可以选择”skip“按钮，但是我的这个版本没有这个键，所以如果你的版本有skip按钮的你就点skip如果没有的就按照我下面的方式在线注册一下，挺快的~ 秒激活。。。。哈哈哈。在这里插入图片描述

上步结束后会弹出提示信息说已经往你的邮箱中发送了激活邮件，这时你只需要点击那个激活邮件中的链接在跳转的页面填写些必须填的项就可以。这步完成后回到Qt的安装程序点击”next“。就进入了下一步。勾选用户协议在这里插入图片描述

点击下一步后，程序要求你选择Qt的安装路径，Qt完全安装需要20个G，所以这一步我把他的安装路径换到了D盘的响应文件夹下。下面的git图演示的是放在E盘的方式。这样Qt的安装就完成了。在这里插入图片描述

添加环境变量，将你的qt安装路径复制到系统的环境变量里。在这里插入图片描述

开始第一个GUI程序新建一个空白的窗体

在开始菜单中找到刚刚安装的QT creator。在左侧工具栏的"欢迎"标签栏选择新建一个project。创建一个qt widgetsApplication。在这里插入图片描述

给新的工程命名。点击下一步。在这里插入图片描述

勾选下图所示选项，选用所有的kit，点击下一步。在这里插入图片描述

点击左侧工具栏的运行按钮。会弹出一个空白的窗体。在这里插入图片描述

Qt Designer窗口各部分简介

在这里插入图片描述

通过GUI例程讲解Qt Creator开发基本操作打开自带的计算机例程。在左侧的工具栏点击"欢迎"。选择"示例"，在搜索栏中输入calculat。选择calculator Form Example点击进入到教程界面。教程非常详细。在这里插入图片描述

这时键盘输入"Alt+tab"切换到Creator界面，例程已经被打开了。在默认显示的界面勾选选择编译工具集。全部勾选后点击Configure Project 在这里插入图片描述

点击左下角的绿色播放按钮运行程序。在这里插入图片描述

下面的动图，因为我已经打开过一次配置了Kit所以跟你第一次打开的不同。具体操作看参见上一步勾选全部Kit就好。在这里插入图片描述

文件结构说明

在这里插入图片描述双击UI文件切换到设计模式。这里可以通过拖着的方式直接创建用户界面的相关静态控件。可直接修改属性值，不用编写代码。在控件上右键选择”转到槽“可以直接选择这个控件提供的事件。比如单击呀、销毁呀、创建呀等。双击你选择的事件，就自动跳转到了编辑页面的事件代码段。这个事件的函数已经自动创建了。你只需要在里面写如你想要在该事件触发时需要进行的操作代码即可。这个方式大大加快了UI界面的开发效率。在这里插入图片描述

一个简单的更改演示

这个例子演示了在上一个计算机例程中添加了一个按钮，在按钮上添加了click事件，使用户在点击按钮后，在计算器的结果显示框里显示 “Hello world！” 在这里插入图片描述

视频教程地址

qt5入门教程1:https://www.bilibili.com/video/BV1gz4y1U7PW/

开始第一个qml程序

Qt自带了很多例子程序，我们选择其中一个进行测试。（其实自带的例子是最好的自学资料）。选择自带的例子后，他会弹出另外一个界面。是对这个例子的详细介绍。点击其中的"run example"。就在IDE里打开了。然后点击左侧工具栏的小箭头运行程序就能看到一个计算器的界面。可以直接操作。在这里插入图片描述