Qml文件的两种加载方式|启动Qt quick app的两种方法

本文详细介绍了使用QML与QtQuick进行应用开发的技术，包括如何使用QmlApplicationEngine与Window，以及如何利用QQuickView与Rectangle实现基本交互。通过鼠标事件和键盘事件的处理，展示了如何在Qt应用中实现用户输入响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一种是QQmlApplicationEngine搭配Window，例如：

#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文件是这样的：

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
//实现对鼠标事件的处理和对文本的移动处理（键盘事件）
Window {
    id:main;
    visible: true;
    MouseArea {
        acceptedButtons: Qt.LeftButton|Qt.RightButton;//确定接收哪些事件
        anchors.fill: parent;
        onClicked: {
            if(mouse.button==Qt.LeftButton)//鼠标事件
            {
                text.text="Leftbutton clicked";
            }
            else if(mouse.button==Qt.RightButton)
            {
                text.text="Rightbutton clicked";
            }
        }
    }
    Text {        
        id:text;
        focus: true;
        x:50;
        y:50;
        anchors.bottom: t.bottom;
        Keys.enabled: true;//设置键盘可用
        Keys.onPressed:
        {
            switch(event.key){//对键盘事件进行处理
            case Qt.Key_Left:
                x-=10;
                event.accepted=true;//对接受到事件处理，避免再次向上传递
                break;
            case Qt.Key_Right:
                x+=10;
                event.accepted=true;
                break;
            case Qt.Key_Up:
                y-=10;//因为原点在窗口的左上角
                event.accepted=true;
                break;
            case Qt.Key_Down:
                y+=10;
                event.accepted=true;
                break;
            default:return
            }
        }
        color: "blue";
        text: "hello world";
        font.bold: true;
        font.pointSize: 16;
        styleColor: "#f51515";
        verticalAlignment: Text.AlignVCenter;
        horizontalAlignment: Text.AlignHCenter;
        ColorAnimation on color {
            to: "black";
            duration: 2000;
        }
    }

还有一种是QQuickViuew搭配Item。

当然这里所说的item就无需多说了，item是其他盒子模型的老祖……

因此在qml文件中，有window这个item的地方，你都要替换成Rectangle

例如：

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickView>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);   
    QQuickView view;
    view.setResizeMode(QQuickView::SizeRootObjectToView);
    view.setSource(QUrl("qrc:/main.qml"));
    view.show();
    return app.exec();
}

相应的qml文件是这个样子的：

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
//实现对鼠标事件的处理和对文本的移动处理（键盘事件）
Rectangle {
    id:main;
    visible: true;
    MouseArea {
        acceptedButtons: Qt.LeftButton|Qt.RightButton;//确定接收哪些事件
        anchors.fill: parent;
        onClicked: {
            if(mouse.button==Qt.LeftButton)//鼠标事件
            {
                text.text="Leftbutton clicked";
            }
            else if(mouse.button==Qt.RightButton)
            {
                text.text="Rightbutton clicked";
            }
        }
    }
    Text {
        id:text;
        focus: true;
        x:50;
        y:50;
        anchors.bottom: t.bottom;
        Keys.enabled: true;//设置键盘可用
        Keys.onPressed:
        {
            switch(event.key){//对键盘事件进行处理
            case Qt.Key_Left:
                x-=10;
                event.accepted=true;//对接受到事件处理，避免再次向上传递
                break;
            case Qt.Key_Right:
                x+=10;
                event.accepted=true;
                break;
            case Qt.Key_Up:
                y-=10;//因为原点在窗口的左上角
                event.accepted=true;
                break;
            case Qt.Key_Down:
                y+=10;
                event.accepted=true;
                break;
            default:return
            }
        }
        color: "blue";
        text: "hello world";
        font.bold: true;
        font.pointSize: 16;
        styleColor: "#f51515";
        verticalAlignment: Text.AlignVCenter;
        horizontalAlignment: Text.AlignHCenter;
        ColorAnimation on color {
            to: "black";
            duration: 2000;
        }
    }
}

对比后发现，就是Window换成了Rectangle，如果你不更换，就会变成空白。