Qt Quick QML 与 C++ 交互系列之二

上次说了 C++ 与 QML 交互一共有四种：

1. 注册 C++ 对象到 QML，在 QML 中访问 C++对象；
2. QML 暴露对象给 C++ 进行交互；
3. C++ 创建 QML 对象并进行交互；
4. C++ 对象与 QML 通过信号槽进行交互；

我们再次强调一下，这四种交互方式，是每一个要学习 QML 的程序员必须要深刻理解并熟掌握的。

今天重点介绍三种方式：C++ 创建 QML 对象并进行交互 的方法；

---

为了更快的进入节奏，我们今天还是在上次项目的基础上进行修改。

1. 首先，我们创建一个 “Window.qml” 的 QML 文件

这个window 窗口200X200，设置成红色，设置不可见。

2. 我们改造 C++

打开main.cpp， 首先添加我们今天使用的头文件

#include <QQmlComponent>

通过名称，我们就能看出来，这是 QML 组件的头文件，就是我们想在 C++ 中创建一个 QML 的组件，就需要使用这个类。我们接下来就需要用这个类，进行创建一个 QML 对象。

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;

//    MyQmlClass myQmlImp;
//    engine.rootContext()->setContextProperty("myQmlImp", &myQmlImp);

//    qmlRegisterType<MyQmlClass>("com.company.myqmlclass", 1, 0, "MyQmlClass");

    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    /
    QQmlComponent compont(&engine);
    compont.loadUrl(QUrl(QString("qrc:/Window.qml")));
    QObject *qmlWindow = compont.create();
    qmlWindow->setParent(engine.rootObjects()[0]);
    engine.rootContext()->setContextProperty("qmlWindows", qmlWindow);
    /

    return app.exec();
}

我们在 main.qml 加载完成后，我们使用 QQmlComponent::create()  加载 Window.qml 来创建一个 QML 的对象, 其中 engine.rootObject()[0] 代表主窗体。

接下来，我们来改造 main.qml。 我们的思路是这样的：

• 在主窗体中写两个按钮 “显示” 和 “变色”
• 点击 “显示” 按钮，我们将 C++ 创建的 Window.qml 窗口显示出来。
• 点击 “变色” 按钮，我们将 显示出来的 Window.qml 变换颜色。

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("demo")

    Button{                        //Button 用于显示
        id: viewBtn                //按钮控件，唯一标识ID：getBtn
        text: "显示"                //按钮显示文字
        width: 120                 //按钮宽度
        height: 40                 //按钮高度

        anchors.centerIn: parent   //按钮放到窗口中心

        onClicked: {               //点击按钮事件;
            qmlWindows.visible = true;
        }
    }

    Button{                        //Button 用于改变颜色
        id: changeColorBtn         //按钮控件，唯一标识ID：getBtn
        text: "变色"                //按钮显示文字
        width: 120                 //按钮宽度
        height: 40                 //按钮高度

        anchors.top: viewBtn.bottom   //按钮放到窗口中心
        anchors.topMargin: 10
        anchors.left: viewBtn.left

        onClicked: {               //点击按钮事件;
            qmlWindows.color = "blue"
            qmlWindows.visible = true;
        }
    }
}

• qmlWindows 为 C++ 中创建的QML对象；
• 可以直接使用 “qmlWindows.xxx” 来更改 window窗口的属性

 我来看一下效果：

我们可以看到，我们在C++ 中创建的 QML 窗口，点击 主窗口的按钮，可以与子窗口进行交互。

这个例子中，我们是 在 main.qml 来更改 window.qml 里面的属性的。接下来，我们来尝试一下 在 C++ 中来更改 windows.qml 里面的属性。

我们首先在 Window.qml 中增加一个 Rectangle ，并设置 objectName :

这里最重要的一点就是将 新添加的Rectangle 的 objectName 进行设置，并非 id.

接下来，我们在 main.cpp 中操作刚添加的Rectangle：

我们首先通过 C++ 创建的窗口对象的findChild 来在 qmlWindow 中寻找到名字为 “myRectangle” 的控件

    QObject *rect = qmlWindow->findChild<QObject*>("myRectangle");
    rect->setProperty("color", "white");

我们这里的QObject  *rect  就是我们找到的Window.qml 中的 Rectangle； 然后通过设置 rect 设置属性来更改QML中 Rectangle 的颜色。

我们来看一下效果：

可以看到，中间的黑色方块，通过我们在 C++ 中的设置属性，变更为了白色。

 

到这里，我们就已经把 C++ 与 QML 交互系列二 ：C++ 创建 QML 对象，并进行交互 的内容一起学习完了。

这里面的重点就是：

1. 使用 QQmlCompont 进行创建 QML 对象；
2. 通过 findChid 来获取 QML 中 控件的指针；
3. 使用 setProperty 来改变 QML 中控件的属性；