qt笔记之纯qml项目详解

code review!

文章目录

qt笔记之纯qml项目详解
- 一.`.qmlproject`项目文件和`.pro`项目文件
- - 1.1.纯qml项目一：使用`.pro`文件
  - 1.2.纯qml项目二：使用`.qmlproject`文件
  - - 1.2.1.目录结构
    - [1.2.2.创建 `main.qml`](#1.2.2.创建 main.qml)
    - [1.2.3.创建 `MyQmlProject.qmlproject`](#1.2.3.创建 MyQmlProject.qmlproject)
    - [1.2.4.使用 Qt Creator 打开项目](#1.2.4.使用 Qt Creator 打开项目)
    - 1.2.5.运行项目
  - [1.3.`.qmlproject` 和 `.pro` 文件的区别](#1.3..qmlproject 和 .pro 文件的区别)
- 二.直接编译与运行(也称为预览)`qml`文件
- - 使用场景
  - [编译和预览纯 QML 文件](#编译和预览纯 QML 文件)
  - 注意事项
- [三.Qt Designer 可以打开.ui文件或.qml文件吗？](#三.Qt Designer 可以打开.ui文件或.qml文件吗？)

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

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

1.1.1.目录结构

复制代码

MyQmlApp/
├── main.qml
├── assets/
│   └── images/
├── qmldir
└── MyQmlApp.pro

1.1.2.main.qml

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.1.3.qmldir

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

plaintext 复制代码

# Leave empty or define custom modules

1.1.4.MyQmlApp.pro

plaintext 复制代码

TEMPLATE = app
QT += qml quick

SOURCES +=

RESOURCES += \
    assets.qrc

1.1.5.assets.qrc

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

xml 复制代码

<RCC>
    <qresource prefix="/">
        <file>images/example.png</file>
    </qresource>
</RCC>

1.1.6.使用说明

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

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

1.2.1.目录结构

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

复制代码

MyQmlProject/
│
├── main.qml
└── MyQmlProject.qmlproject

1.2.2.创建 `main.qml`

在 main.qml 中编写一个简单的 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.创建 `MyQmlProject.qmlproject`

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

qml 复制代码

Project {
    // 包含的 QML 文件
    files: [
        "main.qml"
    ]
    
    // 可指定资源目录
    // directories: [
    //     "resources"
    // ]
}

1.2.4.使用 Qt Creator 打开项目

打开 Qt Creator。
选择"打开文件或项目"。
导航到 MyQmlProject 目录并选择 MyQmlProject.qmlproject 文件。
项目加载后，可以在 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++ 代码。这种项目通常适合于简单的应用程序或快速原型设计。

使用场景

快速原型设计
- 利用 QML 的声明式语法快速设计和测试 UI。
- 适用于需要快速迭代和验证用户界面的项目。
简单应用程序
- 不需要复杂逻辑的应用程序可以完全用 QML 实现。
- 适合于展示内容、动画效果或其他简单交互的应用。
嵌入式设备
- 在资源受限的设备上，QML 的轻量特性非常适用。
- 通过 QML 实现高效的 UI 渲染。

编译和预览纯 QML 文件

使用 Qt Creator
- 创建项目：
  1. 打开 Qt Creator。
  2. 选择"新建项目"。
  3. 选择"Qt Quick 应用程序"。
  4. 在向导中选择"无 C++ 支持"选项，创建一个纯 QML 项目。
- 预览 QML 文件：
  1. 打开 QML 文件。
  2. 点击"设计"视图，可以看到实时设计预览。
  3. 使用"快速预览"（Ctrl + R 或 Command + R）在内置的 QML 预览器中运行。
使用命令行工具
- 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 来编辑和设计。

qt笔记之纯qml项目详解