QML基础 -- 创建QML项目的两种方式（QT Quick UI Prototype和QT Quick Application - Empty）

1.编程环境

• win10专业版
• Qt creator4.7.1 + mingw32bit
• 此项工程创建适用于其他环境

2. 创建方式一 – 通过与C++的交互进行创建（QT Quick Application - Empty）

通过此种方式，可以在界面端加入QML文件。使用qt widgets创建GUI图形界面，这种方式使用C++编程实现起来也非常的简单

1）创建项目

模版中选择Qt Quick空项目类型，其他项目类型在以后按需特定选用创建

之后就是一路默认选择，直到项目创建成功

2）运行效果

项目构建完毕之后，呈现如下所示

此项目就是一个典型的c++界面文件，而QML文件则是以资源文件的形式被widget界面调用执行

在main.qml中输入相关的代码，Ctrl + R运行，有如下类似的效果

2. 创建方式二 – 使用QML的方式进行创建（QT Quick UI Prototype）

通过这种方式创建的QML项目显示界面会更加的流畅美观。更加适用于触屏的操作。但复杂的逻辑结构是它的弱项。

1）创建项目

以QML的方式创建QML项目，可以通过设计师模式对QML文件UI控件进行操作

然后一路确认，直到项目完成创建，得到下面的项目树

其中Word.qml文件是我后面往工程中添加的，只为显示不同的效果

2）解析文件

这里我们发现，出现了一个.qmlproject的QmL工程文件，就如同QT界面文件的.pro文件类似，相关作用如下

• .qmlproject : 定义项目文件夹中的所有 QML、JavaScript 和图像文件都属于项目。因此，不需要单独列出项目中的所有文件。
• .qml : 定义了一个 UI 项目，例如组件，屏幕或整个应用程序 UI。
• ui.qml : 定义了应用程序 UI 的窗体。如果创建项目文件时选择了With .ui.qml file复选框，则会创建此文件，应用于设计师模式。

默认生成的.qmlproject文件中会将现有的一个文件设置为入口文件。若后续添加多个文件，想要同时运行单个文件时，可将其注释，而通过这种方式创建的QML项目可以使用设计师模式，实时对显示的界面进行组件设计。是得界面的显示更流畅，如下所示

3）运行效果