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 заработал.
