環(huán)境
- 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中我們自定義的標(biāo)簽
MainForm {
anchors.fill: parent
mouseArea.onClicked: {
Qt.quit();
}
}
}
- Window
Fn+F1查看Window的介紹和屬性集合,同時(shí)在幫助文檔的上方也可以根據(jù)鏈接找到Qt到底提供了多少個(gè)類似Window的標(biāo)簽含长,如下圖所示:
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這個(gè)qml文件和設(shè)計(jì)視圖對(duì)應(yīng)蛇尚,雙擊該文件名可以進(jìn)入到該文件的設(shè)計(jì)視圖(可視化編輯視圖);
- 可以在設(shè)計(jì)視圖編輯一下革半,然后切換到qml文件查看剛才在可視化的設(shè)計(jì)視圖的改動(dòng)系統(tǒng)是如何用qml代碼來(lái)實(shí)現(xiàn)的医增;