Написание приложения
Теперь мы можем перейти к написанию непосредственно приложения, которое будет решать нашу задачу.
Построение интерфейса.
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.
Вот
и всё! Теперь запускаем программу и
нажимаем на кнопку. Если Вы всё сделали
правильно и я не допустил ошибок, то Вы
увидете:
Ссылка
на исходники:Скачать.
Ссылка
на исполняемый файл: Скачать.