使用Qt Creator 创建 一个 QML 工程（一）

最新推荐文章于 2026-03-27 10:10:45 发布
原创 最新推荐文章于 2026-03-27 10:10:45 发布 · 1.7k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#qt
本文详述了在Qt Creator 4.8.2中创建QML工程的步骤，包括从Qt官网下载5.12.2版本，安装过程，以及在Windows上启动Qt Creator，创建和运行Qt Quick Application的详细操作。通过这些步骤，读者可以快速掌握使用Qt Creator建立QML工程的基本流程。

文章目录

前言

软硬件环境：
硬件：PC
软件：Qt Creator 4.8.2
Qt 版本：5.12.2

本文主要介绍如何使用Qt Creator IDE 环境创建一个 QML 工程，算是学习Qt QML 的第一步

一、Qt Creator的安装

1. Qt 官网下载 Qt 5.12.2

Qt 官网下载地址为：https://download.qt.io/archive/qt
qt 5.12.2 下载地址
下载页面如下：
windows上开发，就下载 qt-opensource-windows-x86-5.12.2.exe
linux 上开发，就下载 qt-opensource-linux-x64-5.12.2.run
在这里插入图片描述

2. Qt Creator 的安装

windows ：双击 qt-opensource-windows-x86-5.12.2.exe ，按提示安装
Linux：./qt-opensource-linux-x64-5.12.2.run 执行，按提示安装

注意：现在电脑基本上都是64位的了， 如果想安装的快一点，并节省磁盘空间，那只选64位相关的安装就好，32位的可以不用安装

二、Qt Creator的使用

1. 打开 Qt Creator

windows 上安装好Qt Creator 点击桌面左下角的开始按钮，在里面找到安装好的Qt Creator， 为了使用方便，可以创建个快捷方式到桌面上，windows 上打开 Qt Creator 后界面如下图所示：
在这里插入图片描述

2. 创建一个新的工程

  1. 点击左上角菜单栏中的文件(F) 按钮，然后再弹出的选项中点击新建文件或项目 会进入如下界面
    在这里插入图片描述
  2. 选择Application 然后再选择 Qt Quick Application - Empty ,如下图所示
    在这里插入图片描述
  3. 然后点击 Choose ，会弹出如下界面
    在这里插入图片描述
  4. 填好项目名称和保存路径后，点击下一步，会弹出如下界面
    在这里插入图片描述
  5. 继续点击下一步，会弹出如下界面
    这个界面可以选择最低的qt 版本要求，一般不用修改，默认就好
    在这里插入图片描述
  6. 继续点击下一步，会弹出如下界面
    在这里插入图片描述
  7. 选择好Kits 后， 继续点击下一步，会弹出如下界面
    该界面一般不用修改，直接用默认就好
    在这里插入图片描述
  8. 最后点击 完成 按钮，就完成了一个工程的创建，会弹出如下界面
    在这里插入图片描述
    至此第一个工程就完成了创建

3. 工程的编译和运行

点击Qt Creator IDE 界面的左下角的l运行按钮(绿色箭头图标)，就会完成该工程的build 和 运行，运行结果如下图所示
运行结果是会弹出一个title 为Hello world , width为640，height 为480 的 窗口
在这里插入图片描述

总结

  1. Qt Creator 的安装 按自己的需求来， 用不上组件可以不用安装，节省安装时间和磁盘空间；
  2. Qt Creator 创建工程的操作非常简单，跟着提示来就好；
【QML-编程指南】
sinat_23896491的博客
07-22 896
QML是一种描述性的脚本语言，文件格式以.qml结尾。语法格式非常像CSS，但又支持javascript形式的编程控制。QtDesigner可以设计出·ui界面文件，但是不支持和Qt原生C++代码的交互。QtScript可以和Qt原生代码进行交互，但是有一个缺点，如果要在脚本中创建一个继承于QObject的图形对象非常不方便，只能在Qt代码中创建图形对象，然后从QtScript中进行访问。
【Qt】Qt单元测试详解（一）：通过QtCreator创建测试工程
郭老二
03-29 2388
QTest、googletest
【Qt】QML-01：使用QtCreator10创建QML工程，并讲解第一个程序：Hello World
郭老二
07-27 7677
QML第一讲：创建QML工程、详解QML第一个程序Hello World
VSCode 编译 Qt 5.12 QML 完整教程（Windows + MinGW）
最新发布
qq_28372005的博客
03-27 929
本文以为环境，从环境准备、项目创建、VSCode 配置到编译、运行、调试，提供完整可落地步骤，适配 QML 项目开发。
QT5.11 首次创建QML程序
u012719076的博客
02-14 536
第一步： 文件--》新建--》项目中 选择 qt quick application--empty 第二步：输入工程名称，其他默认
qtcreator创建qml项目（图解）
weixin_42887343的博客
01-05 2491
（1）qt项目文件使用pro后缀，是qt项目的配置文件，它用于指定项目的各种参数，包括源文件、头文件、库依赖、编译选项等，初学可以先不用深入了解。（2）main.cpp，main.cpp 文件通常是一个 C++ 入口文件，用于初始化 Qt 应用程序和加载主 QML 文件。虽然 QML 是一种声明性语言，但在许多应用中，仍然需要一些 C++ 代码来完成一些初始化和配置的工作。（3）Qt的资源文件（qrc文件）用于将应用程序的资源，如图像、样式表、声音文件等，打包成二进制文件并与应用程序一起编译。
第一个Qt Quick程序（QML程序）
yafeilinux
05-11 2339
  上一节我们详细讲述了Qt 4.7和Qt Creator 2.0的安装。这一节，我们讲述Qt Quick的应用。 Qt Quick是Qt 4.7主推的技术，下面是Qt官网对其进行的介绍： Qt Quick 是一种高级用户界面技术，使用它可轻松地创建供移动和嵌入式设备使用的动态触摸式界面和轻量级应用程序。三种全新的技术共同构成了 Qt Quick 用户界面创建工具包：一个改进的Qt Crea...
从零开始建立一个QT/QML 视频播放器
BliveC的专栏
03-17 2153
开发工具qt5.8您可以自己使用MediaPlayer来播放音频内容（比如音频），或者您可以将它与视频输出结合使用，以呈现视频。1、首先打开Qt Creator 创建一个新的工程2、选择一个模板，建立Qt Quick Application工程3、取名 MediaPlayerDemo4、然后一路下一步，到代码编辑。import QtQuick 2.6 import QtQuick.Window 2...
【零基础学QT】第一章 QT安装与工程创建
凉开水白菜的博客
08-18 1158
在学习本专栏课程需要掌握基本的C++开发能力，如有JS语言能力更佳，后续的QML文章需要使用到一些JS语句。本专栏的文章主要偏向于嵌入式方向，本人也是从事嵌入式物联网方向的嵌入式软件工程师，所以后续的学习可能会用到一些单片机、ARM开发板、串口模块、网口模块等嵌入式常用工具，结合实际开发所需的功能模块进行学习开发，直接运用到项目开发中去。电脑环境配置：​ 处理器采用：11th Gen Intel® Core™ i7-11700 @ 2.50GHz 2.50 GHz。............
创建一个Qt Quick UI项目
fduffyyg的博客
02-03 1025
创建一个Qt Quick UI项目
Qml学习一：搭建第一个QML项目
05-16 2523
若该文为原创文章，转载请注明原文出处 一、Qt Creator编码+MSVC编译环境 1、安装QT，版本5.14.2 2、安装VS2017 3、安装MSVC调试器 4、添加环境变量 安装过程参考：Qt Creator+MSVC开发环境搭建（Qt Creator编码+MSVC编译）_百里杨的博客-CSDN博客_qt 安装msvc 环境变量参考： https://www.csdn.net/tags/NtTaUg0sNjAyMjAtYmxvZwO0O0OO0O0O.html 安装完成后，调试不能
Qt 自动单元测试Auto Test Project详解
ken2232的博客
08-18 3637
Qt 自动单元测试Auto Test Project详解
QML入门----创建qml项目（一）
guorong520的博客
10-27 3025
文章目录导语一、选择菜单二、选择文件类型三、填写项目名称四、项目创建成功五、Hello World六、运行图 导语 今天开始学习qml，从hello world开始，本来计划之前开始学的，但是看了好多资料，还是有点懵。但是应该拿出实际行动，先入门了再说，从现在开始，下定决心，一步一步开始学习。 一、选择菜单 选择文件，选择新建文件或项目。 二、选择文件类型 Application(Qt Quick) 、选择Empty、Choose 三、填写项目名称 1.点击下一步 2.选择qmake 3.选择最低要
QML 项目构建
dreamliweiming的博客
09-06 710
QML 项目构建
QT学习笔记-qml开发
CSDN5817的博客
06-26 2974
鼠标区域悬停使能（hoverEnabled:false具有悬浮特性的事件不会被触发，例如：onContainsMouseChanged，onMouseXChanged）1.在 QML 中，可以通过信号和槽来实现元素之间的通信。1)添加图片和动图，以及子文件，实现控件的构造及析构，图片、动图的放大缩小以及倍数播放暂停。鼠标无动作：normal、鼠标按下：red_color、鼠标松开：blue_color。2.选择创建路径和项目名称（不能有中文），后面一直点击下一步到工程建立完成。透明度0.1-1、持续1s;
QT快速入门：创建您的第一个QML应用
夏天的狂风的专栏
03-31 1441
在这篇博客中，我们已经引导您完成了创建第一个QML应用程序的过程。我们已经介绍了如何使用QT Creator创建一个新的QT Quick应用程序，编写简单的QML代码，以及运行和调试您的应用程序。希望您现在对如何开始使用QML有了一个基本的了解，祝您在QT和QML的世界中探索更多有趣的功能和项目！
QML学习笔记【01】：Qt Quick及其应用程序创建
hurryddd
12-31 1669
Qt Quick是Qt5界面开发技术的统称，是一个基于QML的框架，包含以下几种技术的集合： QML - 界面标记语言，是一种描述对象如何相互关联的声明式语言。与HTML类似 JavaScript - 动态脚本语言 Qt C++ - 跨平台C++封装库
【QT】QML工程创建
Making Life Better. Making Others Better.
11-27 4138
我们在创建一个新的QML工程时，一般有两种选择： Qt Quick Application Qt Quick UI 或者是有特殊需求的话，还可以自定义用来创建工程的模板向导。 Qt Quick Application： 可同时包含QML和C++代码，有一个QDeclarativeView或者QQuickView，允许编译并部署到桌面和移动平台。打开Qt Creator，“Ct
QML基础 -- 创建QML项目的两种方式（QT Quick UI Prototype和QT Quick Application - Empty）
热门推荐
Freedom_Blue的博客
03-11 1万+
创建QML项目的两种方式1.编程环境2. 创建方式一 -- 通过与C++的交互进行创建（QT Quick Application - Empty）1）创建项目2）运行效果2. 创建方式二 -- 使用QML的方式进行创建（QT Quick UI Prototype）1）创建项目2）解析文件3）运行效果 1.编程环境 win10专业版 Qt creator4.7.1 + mingw32bit 此...
Qt QML第四章 ：Qt Creator IDE
申徒嘉的专栏
11-05 1606
Qt Creator 是 Qt 的默认集成开发环境。它是由 Qt 开发人员为 Qt 开发人员编写的。IDE 适用于所有主要的桌面平台，例如 Windows/Mac/Linux。我们已经看到客户在嵌入式设备上使用 Qt Creator。Qt Creator 有一个精益高效的用户界面，它真正闪耀在使开发人员的生产力。Qt Creator 可用于运行 Qt Quick 用户界面，也可用于编译 c + + 代码，这适用于您的主机系统或使用交叉编译器的其他设备。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值