Qt Quick学习---------------构建一个简单的qml程序

最新推荐文章于 2025-08-05 13:53:15 发布

我只是一只狗

最新推荐文章于 2025-08-05 13:53:15 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： c++ 文章标签： qt

本文链接：https://blog.youkuaiyun.com/u011619422/article/details/48050939

c++ 专栏收录该内容

229 篇文章

订阅专栏

本文介绍如何使用QtCreator创建QtQuick应用程序，并提供一个简单的qml程序示例。通过导入QtQuick模块，设置窗口属性及事件处理，展示HelloQtQuickApp文本。

我是在工作过程中才开始学习Qt Quick的，写这个的原因就是为了以后方便自己查找需要的资料。

qml的语法有点类似css，但是又可以像JavaScript那样的流程控制。在界面开发中，能够做到快速敏捷的开发（ps：虽然我也是在书上看到的）。

在本次的学习中，我们要学会如何去构建并运行一个简单的qml程序。

1.打开Qt Crteater，选择新建文件和项目

2.选择Qt Quick Appliction

3.修改项目名称，以及路径

4.Qt Quick版本选择2.2

就完成了对一个简单的程序的创建了。

这个程序自动生成了以下的东西：

deployment.pri 类似Qt中的.pro文件，都是用来包含库等东西的

main.cpp 用来运行qml窗口的

main.qml

下面来看下代码：

首先是main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

包含了qml库，窗口库等。

创建了一个一个窗口，创建了一个qml窗口，挂起窗口等待qml窗口

下面就是重点了，main.qml

import QtQuick 2.2
import QtQuick.Window 2.1

Window {
    visible: true
    width: 360
    height: 360

    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }

    Text {
        text: qsTr("Hello QtQuick App")
        anchors.centerIn: parent
    }
}

1.inport QtQuick 2.2 类似于java中导入包的写法

2. Window{} 创建了一个窗口，在里面包含了窗口的大小，是否可见，以及鼠标事件处理等，最后还在窗口中心添加了一个Hello QtQuick App的文本

以上就是一个简单的qml程序的全部了