Qt Software / [Из песочницы] 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 заработал.

Написание приложения

Теперь мы можем перейти к написанию непосредственно приложения, которое будет решать нашу задачу.

Построение интерфейса.

23. На данный момент main.qml выглядит так:

import QtQuick 1.0  Rectangle {     width: 100     height: 62 }

Отредактируем его, изменив главный прямоугольник-окно:

import QtQuick 1.0  //Главное окно Rectangle {     width: 300     height: 300     anchors.fill: parent  }

24. Добавим простейшую кнопку на нашу форму.

    //Кнопка     Rectangle {         id: button //Имя кнопки          //Размещаем в центре         x: parent.width / 2 - button.width / 2;         y: parent.height / 2 - button.height / 2;          //Размеры кнопки         width: 100         height: 30          //Цвет кнопки         color: "gray"          //Текст кнопки         Text {             id: buttonLabel             text: "Пуск"             anchors.centerIn: parent;         }          //Действие мыши         MouseArea {             anchors.fill: parent             id: mouseArea         }     }

В результате main.qml примет вид:

import QtQuick 1.0  Rectangle {     width: 300     height: 300     anchors.fill: parent          //Кнопка     Rectangle {         id: button //Имя кнопки          //Размещаем в центре         x: parent.width / 2 - button.width / 2;         y: parent.height / 2 - button.height / 2;          //Размеры кнопки         width: 100         height: 30          //Цвет кнопки         color: "gray"          //Текст кнопки         Text {             id: buttonLabel             text: "Пуск"             anchors.centerIn: parent;         }          //Действие мыши         MouseArea {             anchors.fill: parent             id: mouseArea         }     } }

Если мы запустим приложение,

то получим следующее:

25. Добавим строку ввода, куда пользователь будет вводить информацию с именем textinput.

//Строка ввода     Rectangle {         id: textinputRect //Имя строки ввода          //Размещаем ниже         x: parent.width / 2 - button.width / 2;         y: parent.height / 2 - button.height / 2+40;          //Размеры строки ввода         width: 100         height: 18          //цвет строки ввода         color: "gray"          TextInput {             id: textinput             objectName: "textinput"             color: "#151515";             selectionColor: "blue"             font.pixelSize: 12;             width: parent.width-4             anchors.centerIn: parent             focus: true             text:"1"             }     }

В результате main.qml примет вид:

import QtQuick 1.0  Rectangle {     width: 300     height: 300     anchors.fill: parent      //Кнопка     Rectangle {         id: button //Имя кнопки          //Размещаем в центре         x: parent.width / 2 - button.width / 2;         y: parent.height / 2 - button.height / 2;          //Размеры кнопки         width: 100         height: 30          //Цвет кнопки         color: "gray"          //Текст кнопки         Text {             id: buttonLabel             text: "Пуск"             anchors.centerIn: parent;         }          //Действие мыши         MouseArea {             anchors.fill: parent             id: mouseArea         }     }          //Строка ввода         Rectangle {             id: textinputRect //Имя строки ввода                  //Размещаем ниже             x: parent.width / 2 - button.width / 2;             y: parent.height / 2 - button.height / 2+40;                  //Размеры строки ввода             width: 100             height: 18                  //цвет строки ввода             color: "gray"                  TextInput {                 id: textinput                 objectName: "textinput"                 color: "#151515";                 selectionColor: "blue"                 font.pixelSize: 12;                 width: parent.width-4                 anchors.centerIn: parent                 focus: true                 text:"1"                 }         } }

Обратите внимание на следующее:

• Для того, чтобы мы смогли обращаться к строке ввода из С++ у нас кроме параметра id есть еще параметр objectName, который заключается в двойные кавычки.
• Информация, которая нам потом будет нужна, содержится в параметре text.

При запуске получим следующее:

26. Добавим поле вывода, куда программа будет выводить ответ с именем memo.

    //Поле вывода     Rectangle {         id: memoRect //Имя поля вывода          //Размещаем ниже         x: parent.width / 2 - button.width / 2;         y: parent.height / 2 - button.height / 2+70;          //Размеры поле вывода         width: 100         height: 35          //Цвет поля вывода         color: "gray"          TextEdit{             id: memo             objectName: "memo"             wrapMode: TextEdit.Wrap             width:parent.width;             readOnly:true         }     }

В результате main.qml примет вид:

import QtQuick 1.0  Rectangle {     width: 300     height: 300     anchors.fill: parent      //Кнопка     Rectangle {         id: button //Имя кнопки          //Размещаем в центре         x: parent.width / 2 - button.width / 2;         y: parent.height / 2 - button.height / 2;          //Размеры кнопки         width: 100         height: 30          //Цвет кнопки         color: "gray"          //Текст кнопки         Text {             id: buttonLabel             text: "Пуск"             anchors.centerIn: parent;         }          //Действие мыши         MouseArea {             anchors.fill: parent             id: mouseArea         }     }      //Строка ввода         Rectangle {             id: textinputRect //Имя строки ввода              //Размещаем ниже             x: parent.width / 2 - button.width / 2;             y: parent.height / 2 - button.height / 2+40;              //Размеры строки ввода             width: 100             height: 18              //цвет строки ввода             color: "gray"              TextInput {                 id: textinput                 objectName: "textinput"                 color: "#151515";                 selectionColor: "blue"                 font.pixelSize: 12;                 width: parent.width-4                 anchors.centerIn: parent                 focus: true                 text:"1"                 }         }          //Поле вывода         Rectangle {             id: memoRect //Имя поля вывода              //Размещаем ниже             x: parent.width / 2 - button.width / 2;             y: parent.height / 2 - button.height / 2+70;              //Размеры поле вывода             width: 100             height: 35              //Цвет поля вывода             color: "gray"              TextEdit{                 id: memo                 objectName: "memo"                 wrapMode: TextEdit.Wrap                 width:parent.width;                 readOnly:true             }         } } 

При запуске получим следующее:

Итак, мы описали интерфейс нашей программы.

C++ часть

27. При нажатии на кнопку пока ничего не происходит. Исправим это. Для начала установим взаимосвязь между QML моделью и C++ кодом. Для этого отредактируем файл mainwindow.cpp, а именно функцию MainWindow, добавив строчки:

 //Находим корневой элемент     Root = ui->rootObject();     //Соединяем C++ и QML, делая видимым функции С++ через элемент window     ui->rootContext()->setContextProperty("window", this);

Получим следующее:

#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);          //Находим корневой элемент     Root = ui->rootObject();     //Соединяем C++ и QML, делая видимым функции С++ через элемент window     ui->rootContext()->setContextProperty("window", this); }  MainWindow::~MainWindow() {     //Удаляем QML     delete ui; }

28. В добавленном коде у нас присутствует необъявленная переменная Root . Через нее мы потом будем производить поиск всех других дочерних элементов. Объявим ее в mainwindow.h в классе в разделе private:

QObject *Root;//корневой элемент QML модели

В результате получим:

#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;     QObject *Root;//корневой элемент QML модели };  #endif // MAINWINDOW_H

29. Пусть у нас кнопка из QML будет вызывать С++ функцию под произвольным именем FunctionC. Объявим ее в mainwindow.h в классе в разделе public:

Q_INVOKABLE void FunctionC();//Функция C++ вызываемая из QML

В результате получим:

#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();          Q_INVOKABLE void FunctionC();//Функция C++ вызываемая из QML  private:     QDeclarativeView *ui;     QObject *Root;//корневой элемент QML модели };  #endif // MAINWINDOW_H

Обратите внимание на ключевое слово Q_INVOKABLE. Именно она делает видимой функцию для QML.

30. Теперь опишем нашу функцию в mainwindow.cpp:

void MainWindow::FunctionC() {     //Найдем строку ввода     QObject* textinput = Root->findChild<QObject*>("textinput");          //Найдем поле вывода      QObject* memo = Root->findChild<QObject*>("memo");          QString str;//Создадим новую строковую переменную          //Считаем информацию со строки ввода через свойство text     str=(textinput->property("text")).toString();          int a;     a=str.toInt();//Переведем строку в число     a++;//Добавим к числу 1          QString str2;//Создадим еще одну строковую переменную     str2=QString::number(a);//Переведем число в строку          //Ну и наконец выведем в поле вывода нашу информацию     memo->setProperty("text", str+"+1="+str2); }

31. Ну и наконец добавим нашу функцию в обработчике нашей кнопки QML в файле main.qml. Обработчик действий мыши сейчас выглядит так:

//Действие мыши         MouseArea {             anchors.fill: parent             id: mouseArea         }

Теперь же он станет таким:

        //Действие мыши         MouseArea {             anchors.fill: parent             id: mouseArea             //При нажатии вызвать фугкцию window.FunctionC()             onClicked: window.FunctionC()         }

В итоге получим:

import QtQuick 1.0  Rectangle {     width: 300     height: 300     anchors.fill: parent      //Кнопка     Rectangle {         id: button //Имя кнопки          //Размещаем в центре         x: parent.width / 2 - button.width / 2;         y: parent.height / 2 - button.height / 2;          //Размеры кнопки         width: 100         height: 30          //Цвет кнопки         color: "gray"          //Текст кнопки         Text {             id: buttonLabel             text: "Пуск"             anchors.centerIn: parent;         }          //Действие мыши         MouseArea {             anchors.fill: parent             id: mouseArea             //При нажатии вызвать фугкцию window.FunctionC()             onClicked: window.FunctionC()         }     }      //Строка ввода         Rectangle {             id: textinputRect //Имя строки ввода              //Размещаем ниже             x: parent.width / 2 - button.width / 2;             y: parent.height / 2 - button.height / 2+40;              //Размеры строки ввода             width: 100             height: 18              //цвет строки ввода             color: "gray"              TextInput {                 id: textinput                 objectName: "textinput"                 color: "#151515";                 selectionColor: "blue"                 font.pixelSize: 12;                 width: parent.width-4                 anchors.centerIn: parent                 focus: true                 text:"1"                 }         }          //Поле вывода         Rectangle {             id: memoRect //Имя поля вывода              //Размещаем ниже             x: parent.width / 2 - button.width / 2;             y: parent.height / 2 - button.height / 2+70;              //Размеры поле вывода             width: 100             height: 35              //Цвет поля вывода             color: "gray"              TextEdit{                 id: memo                 objectName: "memo"                 wrapMode: TextEdit.Wrap                 width:parent.width;                 readOnly:true             }         } }

Обратите внимание на то, что функцию вызываем через window.

Вот и всё! Теперь запускаем программу и нажимаем на кнопку. Если Вы всё сделали правильно и я не допустил ошибок, то Вы увидете:

Ссылка на исходники: Скачать.
Ссылка на исполняемый файл: Скачать.

Автор: Harrix