比较简洁大方的网站/做网站推广的公司

上次说了 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: truewidth: 640height: 480title: qsTr("demo")Button{                        //Button 用于显示id: viewBtn                //按钮控件，唯一标识ID：getBtntext: "显示"                //按钮显示文字width: 120                 //按钮宽度height: 40                 //按钮高度anchors.centerIn: parent   //按钮放到窗口中心onClicked: {               //点击按钮事件;qmlWindows.visible = true;}}Button{                        //Button 用于改变颜色id: changeColorBtn         //按钮控件，唯一标识ID：getBtntext: "变色"                //按钮显示文字width: 120                 //按钮宽度height: 40                 //按钮高度anchors.top: viewBtn.bottom   //按钮放到窗口中心anchors.topMargin: 10anchors.left: viewBtn.leftonClicked: {               //点击按钮事件;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 中控件的属性；