win10 + vscode + qt5 开发环境初探与开始第一个例程
为啥要用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里打开了。然后点击左侧工具栏的小箭头运行程序就能看到一个计算器的界面。可以直接操作。
教程资源
- Qt自带例程及讲解
- QML Book中文版(QML Book In Chinese)
安装vscode
- 下载地址一路默认安装就好,如果需要在
- 如果需要在桌面创建快捷方式记得勾选这项。
安装vscode插件
一般原生IDE的高亮和自动补全都不是特别尽如人意。vscode作为代码编辑器,其插件市场中提供了丰富的插件可供挑选,方便实现更好的自动补全和高亮提示。
-
C/c++
vs Code支持C/c++的必装插件 -
qml相关
-
Bracket Pair Colorizer
用不同的颜色对不同的括号进行区分。识别度极高。个人很喜欢。即装即用无需配置。
-
Beautify
-
Auto Close Tag
-
Auto Rename Tag
-
Color Hightlight
可以在代码中直接显示16进制颜色值对用的颜色
在VS Code中打开Qt项目
参考资料
【1】2019年适用于JavaScript开发人员的27种神奇的VSCode工具 https://www.html.cn/top/14138.html