qml 和 c++ 与 qt quick 2 应用程序

Posted

技术标签:

【中文标题】qml 和 c++ 与 qt quick 2 应用程序【英文标题】:qml and c++ with qt quick 2 application 【发布时间】:2013-08-29 09:15:41 【问题描述】:

我的主窗口有一个 qml GUI。我刚刚创建了一个 qt quick2 应用程序并将我的主窗口的 qml GUI 复制并粘贴到 main.qml。当我运行应用程序时,它显示空白窗口,以下是我的 qml 日志:

    QML debugging is enabled. Only use this in a safe environment.
Both point size and pixel size set. Using pixel size. 
Both point size and pixel size set. Using pixel size. 
Both point size and pixel size set. Using pixel size. 
file:///home/khajvah/build-convQML-Desktop_Qt_5_1_0_GCC_64bit-Debug/qml/convQML/main.qml:99:9: QML Text: Cannot anchor to an item that isn't a parent or sibling.
file:///home/khajvah/build-convQML-Desktop_Qt_5_1_0_GCC_64bit-Debug/qml/convQML/main.qml:31:9: QML BasicButton: Cannot anchor to an item that isn't a parent or sibling.
file:///home/khajvah/Qt5.1.0/5.1.0/gcc_64/qml/QtQuick/Controls/Styles/Base/ToolButtonStyle.qml:73:9: QML Image: Cannot open: file:///home/khajvah/build-convQML-Desktop_Qt_5_1_0_GCC_64bit-Debug/logout-512.png
file:///home/khajvah/Qt5.1.0/5.1.0/gcc_64/qml/QtQuick/Controls/Styles/Base/ToolButtonStyle.qml:73:9: QML Image: Cannot open: file:///home/khajvah/build-convQML-Desktop_Qt_5_1_0_GCC_64bit-Debug/console.ico
file:///home/khajvah/Qt5.1.0/5.1.0/gcc_64/qml/QtQuick/Controls/Styles/Base/ToolButtonStyle.qml:73:9: QML Image: Cannot open: file:///home/khajvah/build-convQML-Desktop_Qt_5_1_0_GCC_64bit-Debug/mod.png
QQuickView only supports loading of root objects that derive from QQuickItem. 

If your example is using QML 2, (such as qmlscene) and the .qml file you 
loaded has 'import QtQuick 1.0' or 'import Qt 4.7', this error will occur. 

To load files with 'import QtQuick 1.0' or 'import Qt 4.7', use the 
QDeclarativeView class in the Qt Quick 1 module. 

以下是我的 qml 文件:

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0

ApplicationWindow 
    id: applicationwindow1
    title: qsTr("Converter")
    width: 500

    //height: 600




//    menuBar: MenuBar 

  //  

    ToolBar 

        id: tool_bars
        x: 0
        y: 0
        width: applicationwindow1.width
        height: 39
        clip: true
        smooth: false
        opacity: 1
        transformOrigin: Item.Center

        ToolButton 

            id: modify

            y: 1
            scale: 1
            anchors.right: tool_bars.left

            iconSource: "../../mod.png"

        

        ToolButton 

            id: consolebtn
            x: 32
            y: 1
            scale: 1
            anchors.left: modify.right
            anchors.leftMargin: 6
            iconSource: "../../console.ico"


        


        ToolButton 

            id: exit;
            x: 75
            y: 1
            scale: 1
            anchors.left: consolebtn.right;
            anchors.leftMargin: 6

            iconSource: "../../logout-512.png"

        

    

    GroupBox 
        id: group_box1
        x: 0
        y: 30
        width: 500
        height: 136
        anchors.top: tool_bars.bottom
        anchors.topMargin: -9
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0

        ComboBox 
            id: typebox



            anchors.left: text1.right
            anchors.leftMargin: 5

            width: 70
            height: 23
            anchors.top: parent.top
            anchors.topMargin: 37
        

        Text 
            id: text1

            anchors.left: group_box1.left
            anchors.leftMargin: 5

            text: "Type:"
            anchors.top: parent.top
            anchors.topMargin: 41
            font.italic: true
            style: Text.Normal
            font.pointSize: 12
            font.pixelSize: 12
        


        ComboBox 

            id: frombox
            x: 205


            anchors.left: text2.right
            anchors.leftMargin: 8

            width: 70
            height: 23
            anchors.top: parent.top
            anchors.topMargin: 37
        

        Text 
            id: text2
            x: 189


            anchors.leftMargin: 20

            text: "From:"
            anchors.top: parent.top
            anchors.topMargin: 41
            anchors.horizontalCenterOffset: -32
            anchors.horizontalCenter: parent.horizontalCenter
            font.italic: true
            style: Text.Normal
            font.pointSize: 12
            font.pixelSize: 12
        


        ComboBox 
            id: tobox
            x: 412


            anchors.right: parent.right
            anchors.rightMargin: 5

            width: 70
            height: 23
            anchors.top: parent.top
            anchors.topMargin: 37
        

        Text 
            id: text3
            x: 0


            text: "To:"
            anchors.top: parent.top
            anchors.topMargin: 41
            anchors.right: tobox.left
            anchors.rightMargin: 5
            font.italic: true
            style: Text.Normal
            font.pointSize: 12
            font.pixelSize: 12
        

        TextField 
            id: text_field1
            y: 78
            width: 197
            height: 22
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 15
            anchors.left: parent.left
            anchors.leftMargin: 5
            placeholderText: "Input"
        

        TextField 
            id: text_field2
            x: 293
            y: 78
            width: 186
            height: 22
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 15
            anchors.right: parent.right
            anchors.rightMargin: 5
            readOnly: true
            placeholderText: "Result"
        


    

    TextArea 
        id: text_area1
        x: 0
        y: 178
        width: 500
        height: 80
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.top: group_box1.bottom
        anchors.topMargin: 12
        anchors.bottom: addlogbtn.top
        anchors.bottomMargin: 5
    

    Button 

        id: addlogbtn
        x: 7
        y: 212
        width: 110
        height: 23
        text: "Add to Log"

        anchors.bottom: parent.bottom
        anchors.bottomMargin: 5
        anchors.left: parent.left
        anchors.leftMargin: 7


    

    Button 
        id: button1
        x: 195
        y: 212
        width: 118
        height: 23
        text: "Export"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 5
    

    Button 
        id: button2
        x: 359
        y: 212
        width: 117
        height: 23
        text: "Clear"
        anchors.right: parent.right
        anchors.rightMargin: 7
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 5
    



并自动生成main.cpp:

#include <QtGui/QGuiApplication>
#include "qtquick2applicationviewer.h"

int main(int argc, char *argv[])

    QGuiApplication app(argc, argv);

    QtQuick2ApplicationViewer viewer;
    viewer.setMainQmlFile(QStringLiteral("qml/convQML/main.qml"));
    viewer.showExpanded();

    return app.exec();

任何想法为什么这不起作用?我是 qml 的新手,我真的很困惑它是如何连接到 c++ 的。

【问题讨论】:

【参考方案1】:

你绝对可以使用ApplicationWindow,但是你需要使用QQmlApplicationEngine,并且你需要显式地显示你的顶层窗口。您可以在another answer 中看到一个完整的示例。下面只是一个适合您的 main.cpp 文件。

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickWindow>

int main(int argc, char *argv[])

    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    engine.load(QUrl("qml/convQML/main.qml"));
    QObject *topLevel = engine.rootObjects().value(0);
    QQuickWindow *window = qobject_cast<QQuickWindow *>(topLevel);
    window->show();
    return app.exec();

【讨论】:

以上是关于qml 和 c++ 与 qt quick 2 应用程序的主要内容,如果未能解决你的问题,请参考以下文章

Qt Widget Based Application与 Qt Quick Application的区别?

Qt和Qt Quick QML,

Qt Quick QML 实例之疯狂数字游戏(QML C++混合编程翻译QSetting )建议收藏

Qt Quick QML 实例之疯狂数字游戏(QML C++混合编程翻译QSetting )建议收藏

Qt Quick QML 实例之疯狂数字游戏(QML C++混合编程翻译QSetting )建议收藏

如何在 Qt Quick 中将 QML 项目转换为相应的 C++ 项目