Qt QML презентация

Qt QML

lesson2.pro файл проекта, содержит необходимую информацию для того, чтобы qmake собрал приложение

main.cpp #include #include int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); QQmlApplicationEngine engine; engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); return app.exec(); }

main.qml import QtQuick 2.6 import QtQuick.Window 2.2 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") MainForm { anchors.fill: parent mouseArea.onClicked: { console.log(qsTr('Clicked on background. Text: "' + textEdit.text + '"')) } } }

MainForm.ui.qml import QtQuick 2.6 Rectangle { property alias mouseArea: mouseArea property alias textEdit: textEdit width: 360 height: 360 MouseArea { id: mouseArea anchors.fill: parent }

Идеология приложений Qt QML минимум C++ кода, (в main.cpp создано приложение и запущен "движок" работы с QML), файлы *.qml - это для программиста (в main.qml создано окно и вставили в него главную форму) файлы *.ui.qml - для дизайнера (в MainForm.ui.qml уже создаётся весь дизайн)

Модель программы на Qt дизайн на QML код на C++

Загрузка QML объектов из C++ QML загрузка QQmlComponent загружает QML как объект C++, который затем может быть изменен из C++ кода QQuickView является потомком QWindow класса (через QQuickWindow) - QML не только загружается, но и отображается визуально.

MyItem.qml  import QtQuick 2.0 Item { width: 100; height: 100 }

QQmlComponent QQmlEngine engine; QQmlComponent component(&engine, QUrl::fromLocalFile ("MyItem.qml")); QObject *object = component.create(); ... delete object;

QQuickView QQuickView view; view.setSource(QUrl::fromLocalFile("MyItem.qml")); view.show(); QObject *object = view.rootObject();

Изменение свойств object object->setProperty("width", 500); QQmlProperty(object, "width").write(500); QQuickItem *item = qobject_cast<QQuickItem*>(object); item->setWidth(500);

Доступ к загруженным QML-объектам import QtQuick 2.0 Item { width: 100; height: 100 Rectangle { anchors.fill: parent objectName: "rect" } }

Доступ свойствам QML-объектов // MyItem.qml import QtQuick 2.0 Item { property int someNumber: 100 }

qDebug() << "Property value:" << QQmlProperty::read(object, "someNumber").toInt(); QQmlProperty::write(object, "someNumber", 5000); qDebug() << "Property value:" << object->property("someNumber").toInt(); object->setProperty("someNumber", 100);

Вызов методов QML // MyItem.qml import QtQuick 2.0 Item { function myQmlFunction(msg) { console.log("Got message:", msg) return "some return value" } }

// main.cpp QQmlEngine engine; QQmlComponent component(&engine, "MyItem.qml"); QObject *object = component.create(); QVariant returnedValue; QVariant msg = "Hello from C++"; QMetaObject::invokeMethod(object, "myQmlFunction", Q_RETURN_ARG(QVariant, returnedValue), Q_ARG(QVariant, msg)); qDebug() << "QML function returned:" << returnedValue.toString(); delete object;

Подключение к сигналам QML // MyItem.qml import QtQuick 2.0 Item { id: item width: 100; height: 100 signal qmlSignal(string msg) MouseArea { anchors.fill: parent onClicked: item.qmlSignal("Hello from QML") } }

// C++ class MyClass : public QObject { Q_OBJECT public slots: void cppSlot(const QString &msg) { qDebug() << "Called the C++ slot with message:" << msg; } };

// MyItem.qml import QtQuick 2.0 Item { id: item width: 100; height: 100 signal qmlSignal(var anObject) MouseArea { anchors.fill: parent onClicked: item.qmlSignal(item) } }

// C++ class MyClass : public QObject { Q_OBJECT public slots: void cppSlot(const QVariant &v) { qDebug() << "Called the C++ slot with value:" << v; QQuickItem *item = qobject_cast<QQuickItem*>(v.value<QObject*>()); qDebug() << "Item dimensions:" << item->width() << item->height(); } };

QML + C++  проект //main.cpp #include <QGuiApplication> #include <QQmlApplicationEngine> int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); QQmlApplicationEngine engine; engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); return app.exec(); }

//main.qml import QtQuick 2.6 import QtQuick.Window 2.2 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") MainForm { anchors.fill: parent mouseArea.onClicked: { console.log(qsTr('Clicked on background. Text: "' + textEdit.text + '"')) } } }

Корневой объект Window QList<QObject*> lst = engine.rootObjects(); int count = lst.count(); qDebug() << count; //Убеждаемся, что кол-во объектов один! if (count == 0) return -1; //Ошибка, выходим из приложения QObject *object = lst[0];

свойства width и title у Window qDebug() << "width: " << QQmlProperty::read(object, "width").toInt(); qDebug() << "width: " << QQmlProperty::read(object, "title").toString();

Задание текста в поле ввода QObject *mainForm = object->findChild<QObject*>("mainForm"); if (mainForm) { QObject *textEdit1 = mainForm->findChild<QObject*>("textEdit1"); if (textEdit1) { qDebug() << "text:" << textEdit1->property("text"); textEdit1->setProperty("text", "Hello from C++"); } else qDebug() << "textEdit1 == null"; } else qDebug() << "mainForm == null";

Позиционирование элементов QML Каждый элемент имеет следующие "якорные линии": left, horizontalCenter, right, top, verticalCenter, и bottom

Привязка левой стороны прямоугольника rect2 к правой прямоугольника rect1 Rectangle { id: rect1 } Rectangle { id: rect2 anchors.left: rect1.right }

Rectangle { id: rect1 } Rectangle { id: rect2 anchors.left: rect1.right anchors.top: rect1.bottom }

Rectangle { id: rect1 x: 0 } Rectangle { id: rect2 anchors.left: rect1.right anchors.right: rect3.left } Rectangle { id: rect3; x: 150 }

"якорная линия" baseline, она соответствует воображаемой линии, на которой помещается текст. Для элементов без текста - это линия top anchors.fill устанавливает сразу все left, right, top и bottom якоря к целевому элементу anchors.centerIn аналогичен использованию verticalCenter и horizontalCenter одновременно

Anchors Margins (Поля) и Offsets (смещения) Пустое пространство между якорной линией и элементом. Можно указать для каждого якоря через leftMargin, rightMargin, topMargin, bottomMargin или использовать anchors.margins для всех четырёх сторон

Rectangle { id: rect1 } Rectangle { id: rect2 anchors.left: rect1.right anchors.leftMargin: 5 }

QML FileDialog MainForm Text, TextField, Button FileDialog с selectFolder

mainForm import QtQuick 2.6 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.0 import QtQuick.Dialogs 1.0 Rectangle { property alias txfPath: txfPath property alias btnSelect: btnSelect property alias fileDialog: fileDialog width: 360 height: 360

Text { id: text1 text: qsTr("Path to Source:") anchors.left: parent.left anchors.top: parent.top anchors.leftMargin: 20 anchors.topMargin: 20 verticalAlignment: Text.AlignVCenter height: 30 }

TextField { id: txfPath anchors.left: text1.right anchors.leftMargin: 20 anchors.top: parent.top anchors.topMargin: 20 anchors.right: btnSelect.left anchors.rightMargin: 20 placeholderText: qsTr("Text Field") height: 30 }

Button { id: btnSelect anchors.right: parent.right anchors.top: parent.top anchors.rightMargin: 20 anchors.topMargin: 20 text: qsTr("...") width: 40 height: 30 }

FileDialog { id: fileDialog title: "Please choose a Path to Source" folder: shortcuts.home selectFolder: true } }

main.qml mport QtQuick 2.6 import QtQuick.Window 2.2 import QtQuick.Dialogs 1.0 Window { visible: true width: 640 height: 480 title: qsTr("Hello World")

обрабатываем два события: btnSelect.onClicked и fileDialog.onAccepted. По первому событию мы открываем диалог, а по второму, если директория была выбрана, мы копируем эту директорию в поле ввода.