Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
QML Qt / Qml / 6_QML и C (пример).doc
Скачиваний:
96
Добавлен:
28.03.2016
Размер:
978.94 Кб
Скачать

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