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

一种是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,如果你不更换,就会变成空白。

 

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Qt中使用.cpp文件展示QML页面,需要完成以下步骤: 1. 创建一个QML文件,例如main.qml,用于设计页面布局和逻辑。 2. 在Qt项目中创建一个C++类,例如MyClass,用于与QML页面进行交互。 3. 在MyClass类中,通过Q_PROPERTY宏将C++类中的变量暴露给QML页面,使得QML页面可以访问和修改这些变量。 4. 在MyClass类中,通过Q_INVOKABLE宏将C++类中的函数暴露给QML页面,使得QML页面可以调用这些函数。 5. 在main.cpp中,创建一个QApplication对象和QQuickView对象,并将QML文件加载到QQuickView对象中。 6. 在main.cpp中,实例化MyClass类,并将其注册到QML引擎中。 7. 在main.cpp中,将QQuickView对象设置为主窗口,并显示窗口。 具体实现可以参考以下代码: MyClass.h: ```cpp #ifndef MYCLASS_H #define MYCLASS_H #include <QObject> class MyClass : public QObject { Q_OBJECT Q_PROPERTY(QString message READ message WRITE setMessage NOTIFY messageChanged) public: explicit MyClass(QObject *parent = nullptr); QString message() const; void setMessage(const QString &message); Q_INVOKABLE void showMessage(); signals: void messageChanged(); private: QString m_message; }; #endif // MYCLASS_H ``` MyClass.cpp: ```cpp #include "MyClass.h" #include <QDebug> MyClass::MyClass(QObject *parent) : QObject(parent) { m_message = "Hello, world!"; } QString MyClass::message() const { return m_message; } void MyClass::setMessage(const QString &message) { if (m_message != message) { m_message = message; emit messageChanged(); } } void MyClass::showMessage() { qDebug() << "Message from QML:" << m_message; } ``` main.cpp: ```cpp #include <QApplication> #include <QQmlApplicationEngine> #include <QQmlContext> #include <QQuickView> #include "MyClass.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); QQmlApplicationEngine engine; engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); MyClass myClass; engine.rootContext()->setContextProperty("myClass", &myClass); QQuickView view; view.setResizeMode(QQuickView::SizeRootObjectToView); view.setSource(QUrl(QStringLiteral("qrc:/main.qml"))); view.show(); return app.exec(); } ``` main.qml: ```qml import QtQuick 2.0 Rectangle { width: 400 height: 400 color: "lightgray" Text { text: myClass.message font.pixelSize: 20 anchors.centerIn: parent } Button { text: "Change message" onClicked: myClass.message = "New message" anchors.bottom: parent.bottom anchors.horizontalCenter: parent.horizontalCenter } Button { text: "Show message" onClicked: myClass.showMessage() anchors.top: parent.top anchors.horizontalCenter: parent.horizontalCenter } } ``` 在这个例子中,我们创建了一个名为MyClass的C++类,其中包含一个message属性和一个showMessage函数。我们将MyClass类实例化并注册到QML引擎中,然后在QML文件中使用message属性和showMessage函数。最后,我们将QML文件加载到QQuickView对象中,并将QQuickView对象设置为主窗口。运行该应用程序后,您将看到一个带有文本和按钮的窗口,您可以点击按钮来更改文本或显示消息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值