环境

• OS:Mac-OSX
• Qt 5.6.0
• Qt Creator 3.6.2

代码git地址

main.cpp

int main(int argc, char *argv[])
{
 QGuiApplication app(argc, argv);

 QQmlApplicationEngine engine;
 //Loads the root QML file located at filePath. filePath must be a path to a local file. If filePath is a relative path, it is taken as relative to the application's working directory. The object tree defined by the file is instantiated immediately.
 engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

 return app.exec();
}

• QQmlApplicationEngine

＊This class combines a QQmlEngine and QQmlComponent to provide a convenient way to load a single QML file.
＊Unlike QQuickView, QQmlApplicationEngine does not automatically create a root window. If you are using visual items from Qt Quick, you will need to place them inside of a Window.

main.qml

import QtQuick 2.4
import QtQuick.Window 2.2

Window {
 visible: true

   //MainForm是引用MainForm.ui.qml中我们自定义的标签
   MainForm {
       anchors.fill: parent
       mouseArea.onClicked: {
       Qt.quit();
   }
 }
}

• Window

F_n+F₁查看Window的介绍和属性集合，同时在帮助文档的上方也可以根据链接找到Qt到底提供了多少个类似Window的标签，如下图所示：

Window帮助文档截屏

MainForm.ui.qml

import QtQuick 2.4

Rectangle {
 property alias mouseArea: mouseArea

 width: 360
 height: 360
 color: "#e9ff86"

 MouseArea {
 id: mouseArea
 anchors.leftMargin: 0
 anchors.topMargin: 0
 anchors.fill: parent
 }

 Text {
 anchors.centerIn: parent
 text: "Hello World"
 }
}

• MainForm.ui.qml这个qml文件和设计视图对应，双击该文件名可以进入到该文件的设计视图（可视化编辑视图）；

• 可以在设计视图编辑一下，然后切换到qml文件查看刚才在可视化的设计视图的改动系统是如何用qml代码来实现的；