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

最新推荐文章于 2024-04-28 08:37:23 发布
最新推荐文章于 2024-04-28 08:37:23 发布
阅读量1.3w 收藏 60
点赞数 6
分类专栏： Qt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/happyjoey217/article/details/113570939
版权

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里打开了。然后点击左侧工具栏的小箭头运行程序就能看到一个计算器的界面。可以直接操作。在这里插入图片描述

教程资源

  1. Qt自带例程及讲解
  2. 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

happyjoey217
关注
  • 6
    点赞
  • 踩
  • 60
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
Qt实测例程
03-17
qt例程，可以方便的了解qt程序代码的规则 对于初学者 有很大帮助
使用VS Code进行Qt开发的实现
12-16
Qt Creator界面不美观，而VS Code更漂亮一些。 因为Qt5支持使用CMake进行构建，而VS Code也可以支持CMake构建系统，因此是完全可以的。 测试环境 Qt 5.15.0 CMake 3.17.5 Visual Studio 2019 16.7.5（使用C++的桌面开发） Visual Studio Code 1.49.3 步骤 1. 将Qt的bin目录添加到环境变量 假设Qt安装在C:\Qt，那么将C:\Qt\5.15.0\msvc2019_64\bin添加到环境变量。 2. 安装VS Code扩展 在扩展商店搜索c++，安装微软发行的C/C++扩展。
QT环境的搭建安装：VsCode及Qt Creator
快跑Bug来啦！
01-22 6355
vscode的界面美观，并且和QT一样的跨平台，所以可以选择vscode作为开发环境。QT5.9.X版本成熟，相应教程丰富，并且5.9.9版本具有生成CMake功能，所以本文以QT5.9.9版本为例，给出QT环境的搭建。平时的开发可以在qtcreator中进行界面UI设计布局，在vscode中设计代码和编译、调试。(第一行.GCC等编译工具路径 第二行.QT图形界面等库路径)
VSCode 配置 Qt 开发环境
最新发布
theRavensea
04-28 1302
自行根据自己的Qt安装路径配置。
VSCode+Qt+MinGW开发环境搭建
Copperxcx的博客
02-23 5789
保姆级教程
Qt 开发使用VSCode
随笔
11-02 1万+
Qt 开发使用VSCode
vscode+qt+qmake开发环境搭建，史上最全最详细！
WlkJiangYou的博客
02-23 1万+
​ 鉴于Qt官方IDE太过难用，VSCode＋各种插件功能强大，遂采用VSCode来写Qt项目。
如何使用VSCode开发Qt项目？
qq_41980754的博客
05-06 2万+
如何使用VSCode开发Qt项目？ 为何使用VSCode开发Qt项目？ 因为Qt自带的编辑器丑丑丑…，颜值时代还得是vscode大妹子… 最终效果预览 前期准备 一、环境工具 Qt 5.15.2 (含MingW64构建工具） Visual Studio Code 必要拓展： C++ 、 CMake、CMake Tools 二、配置系统环境变量 （自行根据自己的Qt安装路径配置） MingW 根目录和bin目录 D:\Qt5\5.15.2\mingw81_64\ D:\Qt5\5.15.2
QT 5.9.9+VSCode 开发环境搭建
cttckl的博客
03-16 1万+
QT 5.9.9+VSCode 开发环境搭建 序言 vscode的界面美观，并且和QT一样的跨平台，所以选择vscode作为开发环境。 QT5.9.X版本成熟，相应教程丰富，并且5.9.9版本具有生成CMake功能，所以选用QT5.9.9版本。 在qtcreator中进行界面UI设计布局，在vscode中设计代码和编译、调试。 接下来将对程序准备，程序安装，环境配置，测试工程进行介绍 前期程序准备 CMake 3.23.0 QT 5.9.9 VSCode 1.65.2 以上软件除QT外，其余可安装
QGIS环境搭建_Qt5.6.3_加测试例程_vs2015+QGis3.12_qgis_QGis二次开发环境搭建步骤_
10-04
二次开发环境搭建步骤（搭建成功），包含一个C++例程加载shp文件。
Qt+Cutelyst学习笔记（二十七）win10+Qt5.15.2+qmake实现一个简单的RESTful服务器 示例源码
04-12
Qt+Cutelyst学习笔记（二十七）win10+Qt5.15.2+qmake实现一个简单的RESTful服务器 示例源码 https://blog.csdn.net/aggs1990/article/details/124115368 CSDN审核可能较慢，如无法下载，可以过段时间再回来看下
【ESP32+LVGL】1.69寸ST7789+CST816触摸屏之Vscode+platformio开发搭建移植例程
09-09
【ESP32+LVGL】1.69寸ST7789+CST816触摸屏之Vscode+platformio开发搭建移植例程，搭配文章链接本人博客：http://t.csdnimg.cn/LqKNZ
Qt5开发及实例-CH402.rar,Qt5实现QQ风格界面例程代码
09-15
Qt5开发及实例,实例实例CH402,QQ风格界面例程，布局中各窗体的显示间距，布局中各窗体的显示位置，加入抽屉内的各个按钮，将准备好的抽屉插入ToolBox中，我的好友/陌生人/黑名单,getColor()函数是标准颜色对话框...
win10+VS2017+win7SDK+DricetShow+AMCap调试方法.zip
04-16
win10系统调试AMCap例程代码（win7_SDK下directshow包含amacp例程） 使用VS2017调试（可下载win10SDK版本，编译属性可设置） 压缩包内包含调试方法及win7-SDK下载应用
【Qt笔记】1.VSCode搭建Qt运行环境
没有手牌的博客
04-02 1万+
Qt6之后已经抛弃qmake，使用cmake。cmake相对qmake来说只有优点没有缺点。使用VSCode搭建完Qt的运行环境就能开开心心debug了.vscode需要使用的插件:2.Qt tools3.CMakec++插件可以不关注,缺啥都会提醒你.正常安装即可。
VsCode+QT5.14.2安装部署详细教程
qq_44002418的博客
07-17 8260
3.2 由于我这里安装了mingw的编译包，看下图输出台，如果有和我一样的问题，那么按下面的继续操作，如果没有可以跳过。兄弟的博客，很简单，下一步就可以了，挑几个重要的，安装目录不要放在系统盘，安装大概20/30G左右。按照1中的方法，打开环境变量，然后新建，将安装cmake的路径中的bin目录添加进去后，点击确定。1.5 选择套件，我这里选择64位的，因为我环境变量配置的也是64的，注意，这里一定要保证全部匹配。组件没必要全部安装，看个人选择，下面的部分足够了，后面如果需要别的，可以在安装组件，参考。
Qt 开发使用VSCode 笔记2
随笔
02-18 5521
Qt 开发使用VSCode
QT项目开发例程
热门推荐
qq_43812868的博客
08-05 5万+
例子：做一个可以计算加减发的程序 一、使用UI界面 1、创建工程 选择File->new File or Project 选择工程，Applications -> Qt Gui Application，点击下一步 注意：勾选Generate form 则表示使用系统UI界面 2、将所需要的控件放到Ui中对应的位置，并设置属性。 3、创建按钮点击函数，找到所要产生对应函数的空间，点击鼠标右键，选择Go to slot…选项。之后出现如下界面，选择所要使用的槽函数。 4、添加代码 #inc
lvgl+VSCODE源码样板
09-05
您好！要在VSCode中运行lvgl例程，可以按照以下步骤进行操作： 1. 安装PlatformIO插件：在VSCode中打开Extensions面板，搜索并安装PlatformIO插件。 2. 创建一个新的PlatformIO项目：点击左侧的PlatformIO图标，选择"New Project"，然后按照提示选择您的开发板类型和框架。 3. 添加lvgl库：在项目根目录下的platformio.ini文件中，添加以下内容： ```ini [env:your_environment] platform = ... ; 其他配置项 lib_deps = lvgl/lv_conf lvgl/lvgl ``` 请将"your_environment"替换为您正在使用的环境名称（例如esp32或stm32等），并根据需要添加其他配置项。 4. 创建lvgl应用程序：在VSCode中创建一个新的源文件（例如main.c或app.cpp），并在其中编写您的lvgl代码。 5. 构建和上传代码：点击左下角的"PlatformIO: Build"按钮来构建项目。如果一切正常，可以使用相同的按钮来上传代码到您的开发板中。 请注意，上述步骤仅适用于使用PlatformIO进行开发的情况。如果您使用其他开发工具或平台，请提供更多详细信息，以便我能够为您提供更准确的帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值