环境
- 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
Fn+F1查看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代码来实现的；
