qt笔记之纯qml项目详解

qt笔记之纯qml项目详解

code review!

一..qmlproject项目文件和.pro项目文件

1.1.纯qml项目一：使用.pro文件

1.1.1.目录结构

MyQmlApp/
├── main.qml
├── assets/
│   └── images/
├── qmldir
└── MyQmlApp.pro
1
2
3
4
5
6

1.1.2.main.qml

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    visible: true
    width: 640
    height: 480
    title: "My QML App"

    Rectangle {
        width: 200
        height: 200
        color: "lightblue"
        anchors.centerIn: parent

        Text {
            text: "Hello, QML!"
            anchors.centerIn: parent
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

1.1.3.qmldir

如果使用自定义模块，可以在这个文件中指定模块路径。但对于简单项目，这个文件可以是空的。

# Leave empty or define custom modules
1

1.1.4.MyQmlApp.pro

TEMPLATE = app
QT += qml quick

SOURCES +=

RESOURCES += \
    assets.qrc
1
2
3
4
5
6
7

1.1.5.assets.qrc

如果有资源文件（如图片），可以在这里列出：

<RCC>
    <qresource prefix="/">
        <file>images/example.png</file>
    </qresource>
</RCC>
1
2
3
4
5

1.1.6.使用说明

1. 加载项目：在 Qt Creator 中打开 MyQmlApp.pro 文件。
2. 运行项目：点击“运行”按钮即可启动应用程序。
3. 预览 QML 文件：可以使用 qmlscene main.qml 或 qml main.qml 进行快速预览。

1.2.纯qml项目二：使用.qmlproject文件

1.2.1.目录结构

首先，创建项目目录结构：

MyQmlProject/
│
├── main.qml
└── MyQmlProject.qmlproject
1
2
3
4

1.2.2.创建 main.qml

在 main.qml 中编写一个简单的 QML 应用，例如：

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: "My QML Project"

    Rectangle {
        anchors.fill: parent
        color: "lightblue"

        Text {
            anchors.centerIn: parent
            text: "Hello, QML!"
            font.pointSize: 24
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

1.2.3.创建 MyQmlProject.qmlproject

这是项目的核心文件，用于指定项目的 QML 资源：

Project {
    // 包含的 QML 文件
    files: [
        "main.qml"
    ]
    
    // 可指定资源目录
    // directories: [
    //     "resources"
    // ]
}
1
2
3
4
5
6
7
8
9
10
11

1.2.4.使用 Qt Creator 打开项目

1. 打开 Qt Creator。
2. 选择“打开文件或项目”。
3. 导航到 MyQmlProject 目录并选择 MyQmlProject.qmlproject 文件。
4. 项目加载后，可以在 Qt Creator 中编辑和运行项目。

1.2.5.运行项目

点击“运行”按钮，Qt Creator 将会启动应用程序，并显示一个窗口，上面写着“Hello, QML!”。

1.3..qmlproject 和 .pro 文件的区别

• .qmlproject 文件:

  • 专门用于 QML 项目。
  • 适合纯 QML 和 JavaScript 项目。
  • 不涉及 C++ 编译或链接。
  • 使用简单的 JSON 风格语法。
  • 如果项目主要是 QML 和 JavaScript，使用 .qmlproject 是最方便的。

• .pro 文件:

  • 用于 Qt 的 C++ 项目。
  • 包含编译和链接参数。
  • 支持更复杂的项目配置，例如资源文件、库依赖等。
  • 使用 qmake 工具生成 Makefile。
  • 如果项目需要 C++ 代码，或者是混合项目，可能需要 .pro 文件进行更复杂的配置。

二.直接编译与运行(也称为预览)qml文件

在 Qt 中，确实可以创建纯 QML 项目。纯 QML 项目主要用于构建基于 QML 的 UI，而无需 C++ 代码。这种项目通常适合于简单的应用程序或快速原型设计。

使用场景

1. 快速原型设计

   • 利用 QML 的声明式语法快速设计和测试 UI。
   • 适用于需要快速迭代和验证用户界面的项目。

2. 简单应用程序

   • 不需要复杂逻辑的应用程序可以完全用 QML 实现。
   • 适合于展示内容、动画效果或其他简单交互的应用。

3. 嵌入式设备

   • 在资源受限的设备上，QML 的轻量特性非常适用。
   • 通过 QML 实现高效的 UI 渲染。

编译和预览纯 QML 文件

1. 使用 Qt Creator

   • 创建项目：

     1. 打开 Qt Creator。
     2. 选择“新建项目”。
     3. 选择“Qt Quick 应用程序”。
     4. 在向导中选择“无 C++ 支持”选项，创建一个纯 QML 项目。

   • 预览 QML 文件：

     1. 打开 QML 文件。
     2. 点击“设计”视图，可以看到实时设计预览。
     3. 使用“快速预览”（Ctrl + R 或 Command + R）在内置的 QML 预览器中运行。

2. 使用命令行工具

   • qmlscene：

     • 用于快速预览 QML 文件。
     • 命令：qmlscene yourfile.qml，直接在窗口中预览。

   • qml：

     • Qt 6 中推荐使用的工具。
     • 命令：qml yourfile.qml，功能类似于 qmlscene。

注意事项

• 纯 QML 项目虽然简单易用，但在需要复杂逻辑或与系统交互时，可能需要结合 C++。
• 在大型项目中，通常使用 QML 结合 C++ 以实现更复杂的功能和性能优化。

通过这些工具和方法，可以高效地开发和测试纯 QML 项目。

三.Qt Designer 可以打开.ui文件或.qml文件吗？

Qt Designer 可以打开 .ui 文件。这些文件是为 Qt Widgets 应用程序设计的用户界面文件，使用 XML 格式。

然而，Qt Designer 不支持直接打开 .qml 文件。.qml 文件是用于 Qt Quick 应用程序的用户界面文件，通常使用 Qt Creator 来编辑和设计。