無論是用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，如果你不更換，就會變成空白。