QML и C++. Простой пример связки из песочницы
QML технология красивая и радует глаз. Меня она очень заинтересовала, и я решил ее освоить. Но не тут то было, ибо я оказался тупым и беспомощным. Нигде в сети не нашел примера «для чайников» (наверно плохо искал), чтобы с нуля построить простейшее приложение QML и C++ в связке. Везде чего-то не хватало: или не учитывался Qt Creator, или код выдавал ошибки, или отсутствовали целые моменты, которые пользователи должны были сами знать. Официальная документация и примеры здесь на хабре также были с этими недостатками. Вот и решил после долгих попыток и ошибок написать такую статью для начинающих с подробнейшим описанием. Задача. Нужно написать программу QML в связке с С++, где 1. На форме располагается кнопка, строка ввода, и поле вывода. 2. Требуется считать из строки ввода число, прибавляется 1, и ответ выводится в поле вывода. 3. Интерфейс написан на QML. 4. Функционал на С++, то есть нам нужно обеспечить взаимосвязь между QML и C++: кнопка QML вызывает С++ функцию, а функция меняет свойства QML объектов.
Создание базового приложение qml
Используем Qt Creator. Я использовал версию 2.3 с Qt 4.7.4
Создание qml приложения
1. Создаем GUI Приложение: Файл -> Новый файл или проект.... Там слева выбираем Проект Qt Widget, с справа GUI приложение Qt. Потом жмем внизу кнопку "Выбрать...". 2. В следующем окне выбираем название нашего проекта (без пробелов и русских букв). Например, в нашем случае это "Example". 3. В следующем окне у Вас должна стоять галочка у "Desktop". Если ее у Вас ее нет, то Вы неверно установили Qt Creator (или Вы намерено не хотите создавать десктопные приложения). Та сборка Qt Creator официальная, которую я ставил (2.3), по умолчанию почему-то десктопные части не устанавливала. 4. В следующем окне снимите галочку с пункта "Создать форму". 5. В следующем окне можно ничего не менять. И жмем кнопку "Завершить".
Редактирование файла проекта
6. Отредактируем файл проекта (у нас это Example.pro): И добавим к строчке "QT += core gui" слово "declarative". В итоге получим строчку:
QT += core gui declarative
Создание qml проекта
7. По папке с проектом в Qt Creator щелкаем правой кнопкой и идем к пункту "Добавить новый..." 8. Выбираем слева "QML", а справа "Файл QML". 9. Назовем его "main". 10. Следующее окно без изменений. 11. В результате получим файл "main.qml" с текстом:
import QtQuick 1.0
Rectangle {
width: 100
height: 62
}
Создаем файл ресурсов
12. По папке с проектом в Qt Creator щелкаем правой кнопкой и идем к пункту "Добавить новый..." 13. Выбираем слева "Qt", а справа "Файл ресурсов Qt". 14. Назовем его "res". 15. Следующее окно без изменений. В результате получим файд "res.qrc" 16. Добавим префикс. Для этого щелкнем по кнопке "Добавить", а там щелкнуть "Добавить префикс". 17. Измените текст префикса на "/". 18. Добавим наш QML файл. Для этого щелкнем по кнопке "Добавить", а там щелкнуть "Добавить файлы". 19. И выберем наш файл "main.qml". И файл добавится к ресурсам нашего приложения: Если сейчас запустим наше приложение, то qml пока не увидим:
Редактирование исходников
Теперь займемся подключением qml, чтобы он заработал. 20. Перейдем к редактированию файла "mainwindow.h" (находится в заголовочных). Он имеет пока вид:
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QtGui/QMainWindow>
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
MainWindow(QWidget *parent = 0);
~MainWindow();
};
#endif // MAINWINDOW_H
Поменяем его на такой вид:
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QtDeclarative/QDeclarativeView>
#include <QGraphicsObject>
#include <QtGui>
#include <QDeclarativeContext>
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
private:
QDeclarativeView *ui;
};
#endif // MAINWINDOW_H
Мы добавили #include <QtDeclarative/QDeclarativeView>, #include <QGraphicsObject> и др, добавили namespace, добавили ключевое слово explicit, и главное добавили QDeclarativeView *ui. 21. Теперь займемся редактированием файла mainwindow.cpp. Он имеет пока вид:
#include "mainwindow.h"
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
{
}
MainWindow::~MainWindow()
{
}
Поменяем на такой:
#include "mainwindow.h"
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent)
{
//Включаем наш QML
ui = new QDeclarativeView;
ui->setSource(QUrl("qrc:/main.qml"));
setCentralWidget(ui);
ui->setResizeMode(QDeclarativeView::SizeRootObjectToView);
}
MainWindow::~MainWindow()
{
//Удаляем QML
delete ui;
}
22. Запускаем наше приложение и получаем белое окно. Наш QML заработал.