启动QML(Qt quick app)的两种方法(包含python和QT）-电源网星球号

无论是用Qt还是PyQT编程时都要用到界面设计，但是用Qt Designer设计处来的界面都很难看，或者说看起来满满的廉价感，不过得益于Qt quick的推出，界面瞬间提升几个档次，但是交互起来有点麻烦，下面记录自己下自己踩过的坑，也备后续查看，刚开始学习的时候都是看别人的例子来调用实现，但是一直调用不成功，最后发现原来是这两种调用方式的区别

一种是QQmlApplicationEngine搭配Window，例如：

python代码:

from PySide2.QtGui import QGuiApplication
from PySide2.QtQml import qmlRegisterType, QQmlApplicationEngine

if __name__ == "__main__":
    app = QGuiApplication(sys.argv)
    engine = QQmlApplicationEngine()
    engine.load(os.path.join(os.path.dirname(__file__), "main.qml"))

    if not engine.rootObjects():
        sys.exit(-1)
    sys.exit(app.exec_())

Qt调用代码：

#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是其他盒子模型的根，所有模型都是基于item而来

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

python代码:

from PySide2.QtCore import QUrl
from PySide2.QtGui import QGuiApplication
from PySide2.QtQml import qmlRegisterType, QQmlApplicationEngine
from PySide2.QtQuick import QQuickView

if __name__ == "__main__":
     app = QGuiApplication(sys.argv)
     view = QQuickView()
     view.setResizeMode(QQuickView.SizeRootObjectToView)
     view.engine().quit.connect(app.quit)

     view.setSource(QUrl('main.qml'))
     view.show()
     sys.exit(app.exec_())

Qt代码：

#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，如果你不更换，就会变成空白。