QML - Lesson 004. Signals and Slots in Qt QML

connections, example, qml, qml урок, qt, qt qml, qt урок, signal qml, slot qml, сигналы и слоты qml

And we got to transfer data between a layer of QML and C ++ layer. Frankly speaking, the principle is as simple as just using signals and slots in a single layer C ++. Especially in Qt 5.5.

An example will be shown on the basis of the code from the previous tutorial , where we have created a dialog box. But screenshots example works on Android will not be shown, but I assure you - Everything works like a Swiss watch.

Project Structure

Compared to the previous lesson, we had some changes. Namely, it adds a new class, which will be the core of the application.

  • appcore.h - application core file header;
  • appcore.cpp - application core source file.

And we continue to work and be with QQMLApplicationEngine. You will need to just take from the engine QML context and download it to a new class of object from which the signals in which data will be transmitted will be received.

appcore.h

Our class header file is as simple as a penny. In it there is a one meter (variable of type int), a slot that will increase the counter by one and run signal, which is also one in the class and which will transmit the counter value in QML-interface.

#ifndef APPCORE_H
#define APPCORE_H

#include <QObject>

class AppCore : public QObject
{
    Q_OBJECT
public:
    explicit AppCore(QObject *parent = 0);

signals:
    // Signal to transmit data to interface qml-interface
    void sendToQml(int count);

public slots:
    // The slot for the receiving of data from the QML-interface
    void receiveFromQml();

private:
    int count;  // Counter
};

#endif // APPCORE_H

appcore.cpp

#include "appcore.h"

AppCore::AppCore(QObject *parent) : QObject(parent)
{
    count = 0;
}

void AppCore::receiveFromQml()
{
    count++;
    emit sendToQml(count);
}

main.cpp

And here we have connected to our class interface written in QML.

#include <QApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "appcore.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QQmlApplicationEngine engine; 

    AppCore appCore;    
    QQmlContext *context = engine.rootContext();   
    /* Load the object in context to establish a connection,
     * also define the name by which the connection will be
     * */
    context->setContextProperty("appCore", &appCore);

    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

main.qml

Here is part of the code, so as not to distract you from the main. Namely, a compound layer in QML Connections by means of the object as a target is set your class is indicated in the context. Treatment is carried out on the text name that is loaded into the QML engine context, together with the object itself.

To receive signals from the C ++ layer is necessary in the Connections register a function that will be called in much the same way as the target signal, but will start on a signal and then the name with a capital letter. That is, the following logic

  • signalToQml - on C++
  • onSignalToQml - on QML

But the call Slot will be somewhat different. For example, we have a class object in C ++, to which we refer by name appCore (declared aim in Connections). And then we call the slot. That is as follows: appCore.slotSomething (count).

Call slot in this code is done by pressing the OK button in the dialog, and in Cancel the call does not occur. At the same time, appCore object in C ++ code, the counter increases by one and causes the signal to put counter value in a text label applications.

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs 1.2

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World") 
    color: "white"

    /* With Connections object
     * Set up a connection to the core application class
     * */
    Connections {
        target: appCore // Specify the target connection
        /* We declare and implement a function as an object parameter and 
         * first name similar to the name of the signal. 
         * The difference is that we add at the beginning on and 
         * then write with a capital letter
         * */
        onSendToQml: {
            labelCount.text = count // Set the counter to a text label
        }
    }

    MainForm {
        // Stretch the object of the main window over the parent element
        anchors.fill: parent

        // Create text label
        Text {
            id: labelCount
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
            height: 300
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            text: "Hello, World !!!"
        }

        button1.style: ButtonStyle {
            // The code from the previous lesson
        }

        // Стилизуем вторую кнопку
        button2.style: ButtonStyle {
            // The code from the previous lesson
        }

        // Start a dialogue by pressing any of the buttons in the main window
        button1.onClicked: dialogAndroid.open();
        button2.onClicked: dialogAndroid.open();

        Dialog {
            id: dialogAndroid
            width: 600  // set the width of the dialog works on the desktop, but it does not work on Android
            height: 500 // set the height of the dialog works on the desktop, but it does not work on Android

            contentItem: Rectangle {
                width: 600          // Set the width, necessary for Android-devices
                height: 500         // Set the width, necessary for Android-devices
                color: "#f7f7f7"    // 

                // The area for the dialog box message
                Rectangle {
                    // The code from the previous lesson
                }

                Rectangle {
                    id: dividerHorizontal
                    // The code from the previous lesson
                }

                Row {
                    id: row
                    // The code from the previous lesson

                    Button {
                        id: dialogButtonCancel

                        // The code from the previous lesson
                        onClicked: dialogAndroid.close()
                    }

                    Rectangle {
                        id: dividerVertical
                        // The code from the previous lesson
                    }

                    Button {
                        id: dialogButtonOk

                        // The code from the previous lesson

                        onClicked: {
                            /* Before you close the dialog by clicking on OK,
                             * Send the data in the slot application core
                             * */
                            appCore.receiveFromQml()
                            // And then close the dialogue
                            dialogAndroid.close()
                        }
                    }
                }
            }
        }
    }
}

Result

The result is a simple interaction between the C ++ and QML based on all of the same signals and slots. But the result of the application you can see in the video tutorial.

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.
Support the author Donate
x

Не понял, как будет передаваться значение count в QML, если нигде он не описан через Q_PROPERTY

Так и будет передаваться. Это аргумент сигнала.

void sendToQml(int count);
Видите сигнатуру? аргумент называется count . Вот он и передаётся.
А описывать в Q_PROPERTY его не нужно. Не обязательно всё описывать через Q_PROPERTY . Зачастую достаточно объявлять метод сигналом, слотом или Q_INVOKABLE.
M

Статья интересная, как и реализация, но в упор ругается на

Qt\untitled1\main.cpp:21: ошибка: 'appCore' was not declared in this scope
appCore appCore;
^

А почему у вас название класса и имя переменной одинаковые?

appCore appCore;
В моём примере название класса с заглавной буквы AppCore
M
AppCore appCore;
QQmlContext *context = engine.rootContext();
context->setContextProperty("appCore", &appCore);
Вставил эти строки, ошибка никуда не делась, заголовочный файл подключен. Почему не видит класс?

Проект ваш смотреть нужно, что ещё не доделали, либо просто пересобрать билд для начала, возможно, что при создании файлов класса не обновилась информация для qmake. То есть как минимум перезапустить qmake требуется.

Огромное спасибо за статью.

В очередной раз уже выручают ваши подсказки. Если не знаю как реализовать - знаю у кого найти ответ.
Дизайнеры показали проект интерфейса, была попытка через StyleSheet, но возможностей там меньше, в итоге изучил новую для себя технологию, и проект представленный дизайнерами выглядит и работает именно так как они его себе вообразили. Из меня дизайнер фиговый и таких красивых интерфейсов я бы не нарисовал никогда. В итоге технология показала свою замечательность на 90% (остальное еще стоит изучить и возрадоваться).




Спасибо за отзыв!

V

Здраствуйте сново обращаюсь к вам. Ваш клас appcore.h и исходник appcore.cpp

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>

#include <QtGui/QGuiApplication>
#include <QScreen>

#include "appcore.h"
#include <QQmlContext>



int main(int argc, char *argv[])
{

    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    AppCore appCore; 


    QQmlApplicationEngine engine;
    QQmlContext *context = engine.rootContext(); 
    context->setContextProperty("appCore", &appCore);


    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;



    return app.exec();
}

вот main.qml

V
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs 1.2

import QtQuick 2.0
import QtQuick.Window 2.2

Window {
    flags: Qt.ToolTip | Qt.FramelessWindowHint | Qt.WA_TintedBackground |Qt.WindowStaysOnTopHint

    color: "#00000000"




visible: true
width: 100
height: 460
x: (Screen.width - width)
y: (Screen.height - height)





Rectangle {
    anchors.fill: parent
    color: "transparent"


}
AnimatedSprite {


    Connections {
    target: appCore // Указываем целевое соединение
    /* Объявляем и реализуем функцию, как параметр
    * объекта и с имененем похожим на название сигнала
    * Разница в том, что добавляем в начале on и далее пишем
    * с заглавной буквы
    * */
    onSendToQml: {
    Count = count // Устанавливаем счётчик в текстовый лейбл
    }
    }




    id: sprite;
    width: 100;
    height: 100;
    anchors.centerIn: parent;
     source: "Donald.png"
     frameX: 0
     frameY: Number (count)




     frameRate: 18;
     frameWidth: 100
     frameHeight: 100
     frameCount: 6
     running: folse;

}




}


V

Вот этот момент

frame Y:

не получается перенести значения из С++

Добрый день

И что вы хотели сделать в этом коде?

    target: appCore
    onSendToQml: {
    Count = count // конкретно это, где Count в вашем коде
    }

и это

frameY: Number (count) // откуда взялся Number?
V

Думал что через:

frameY: Number (count)

буду контролировать чередование анимаций, картинка 600 на 600 с кадром 100. если сразу указать: frameCount: 36 то вся анимация пролистается, а мне необходимо конкретная строка анимации ( ну например пролистать 6 кадров с Y= 200, а потом с Y= 400)

пока на сайтах искал наткнулся на Namber, но не получилось.

Ну ок, такой тип в документации есть, но откуда-то это взяли?

Count = count // конкретно это, где Count в вашем коде

я и намёка не вижу на сам вот этот Count.

Впрочем, после пояснения уже немного яснее стало, думаю, что можете так попробовать сделать

Connections {
    target: appCore 
    onSendToQml: {
        sprite.frameY = count
    }
    }
V

Нет. Не читает. Попробывал сразу задать значение в appcore

#include "appcore.h"

AppCore::AppCore(QObject *parent) : QObject(parent)
{
    count = 200;
}

void AppCore::receiveFromQml()
{
    count++;
    emit sendToQml(count);
}

не работает, хотя без ошибок.

Чтобы работало, нужно сигнал высылать, то есть

emit sendToQml(count);

V

Спасибо огромное! Заработало!

m

Доброй ночи. А почему вы не используете MainForm.ui.qml.? В нем я так понимаю надо верстать а в main.qml реализовывать логику?

Добрый день. Формы в QML на мой взгляд не так удобно реализованы, как в классических виджетах. Да, их удобно набрасывать в дизайнере, но при этом много функционала недоступно полноценно через дизайнер. Поэтому мне проще верстать и напрямую писать логику без дизайнера и форм QML.

m

Добрый день. У меня при реализации проекта по идеалогии описаной выше возникла проблема. Немогу достучатся до элемента ListView.

Item {
    id: mainTabLayout
    property alias spinBoxPlusMinus:spinBoxPlusMinus
    clip: true
    ListView {
        id: view
        anchors.fill: parent
        cacheBuffer: 100 * 10
        anchors.margins: 10
        spacing: 10
        model: productListModel
        delegate: Rectangle {
            id: delegateproduct
            width: view.width
            height: 50
            Item  {
                property alias spinBoxPlusMinus: spinBoxPlusMinus
                id: row
                width: parent.width
                anchors.margins: 10

             Image {
                    id: image
                    width: 50
                    height: 50
                    anchors.left: parent.left
                    anchors.leftMargin: 0
                    source: model.imgresurs


                }

                     SpinBox {
                         anchors.right: parent.right
                         anchors.rightMargin: 10
                         id: spinBoxPlusMinus
                         visible: false
                         value: 1
                        /*property alias spinBoxPlusMinus: spinBoxPlusMinus*/
                     }

        }

    }

}

Пишет : Invalid alias reference. Unable to find id "spinBoxPlusMinus" Не поможите?) Все таки хочется разделить логику от дизайна)

Ну вы не сможете так прокинуть

property alias spinBoxPlusMinus:spinBoxPlusMinus

На самый верх из делегата. Делегат отвечает за внешнее представление элемента в ListView, а таких элементов могут быть сотни и тысячи. Поэтому в третьей строке вашего кода такой alias является бессмысленным. Поскольку QML не знает к какому именно элементу в списке ему нужно пробрасывать alias.

А вообще ваш вопрос тут немного не по теме. Здесь вопрос сигналов и слотов. А ващ вопрос о доступе к элементу через его парента. Лучше создайте на форуме отдельное обсуждение.

m

Спасибо. Так и сделаю.

MB

А если мне нужно сделать конект из дочернего qml? Сигнал работает только из main.qml

Придётся делать ещё сигнал в дочернем qml и пробрасывать через коннекты и обработчики. А вообще нужно смотреть конкретный код и что вы пытаетесь сделать.

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

MB

Извиняюсь, все работает(из-за невнимательности).

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

Приветствую всех! Внедрил данный урок в свой проект, идеально никакой ругани на синтаксис, но...

QML Connections: Cannot assign to non-existent property "onSendToQml"

Добрый день.
У вас сигнал sendToQml в вашем классе объявлен в секции singals? Просто вы говорите о том, что внедрили в свой проект, поэтому следует вопрос о том, что чего-то у вас не хватает.

Добрый день.
У вас сигнал sendToQml в вашем классе объявлен в секции singals? Просто вы говорите о том, что внедрили в свой проект, поэтому следует вопрос о том, что чего-то у вас не хватает.

Внедрен.

Единственное, что было измененно, это название класса.

Внедрен.

Единственное, что было измененно, это название класса.

Наверное, нужно смотреть ваш код, поскольку других мыслей у меня нет, что может быть не так. Можете создать тему на форуме и там показать код, касающийся внедрённой части?

И вообще, qml только ругается этой строчкой, но при этом работает, или тот слот вообще не срабатывает? (уверен, что не срабатывает, но мало ли)

Comments

Only authorized users can post comments.
Please, Log in or Sign up
Donate

Hello, Dear Users of EVILEG!!!

If the site helped you, then support the development of the site financially, please.

You can do it by following ways:

Thank you, Evgenii Legotckoi

SB
Dec. 5, 2019, 8:01 a.m.
Sergej Bederin

C++ - Test 001. The first program and data types

  • Result:60points,
  • Rating points-1
AS
Dec. 4, 2019, 6:39 a.m.
Artur Salmin

C++ - Test 005. Structures and Classes

  • Result:33points,
  • Rating points-10
ST
Dec. 2, 2019, 4:05 p.m.
Sergej Timchenko

Qt - Test 001. Signals and slots

  • Result:68points,
  • Rating points-1
Last comments
Dec. 5, 2019, 4:15 p.m.
Evgenij Legotskoj

В этом слоте ваам нужно будет правильно смаппить координату. У QGraphicsView есть методы mapToScene, mapFromScene. Попробуйте использовать их.
LP
Dec. 5, 2019, 8:30 a.m.
Leonid Pivovarov

А без переопределения qgraphicsScene это сделать возможно? Есть же коорината нажатия кнопки мыши slotCustomMenuRequested(QPoint)
Dec. 5, 2019, 8:11 a.m.
Mihailll

//qDebug()<<"position:"<<event->pos(); //qDebug()<<"position:"<<event->screenPos(); qDebug()<<"position:"<<event->scenePos();
LP
Dec. 5, 2019, 8:09 a.m.
Leonid Pivovarov

Подскажите пожалуйста, К graphicsView я подключил обработку контекстного меню: сonnect(ui->graphicsView, SIGNAL(customContextMenuRequested(QPoint)), this, SLOT(slotCustomMenuRequest…
Dec. 4, 2019, 3:49 p.m.
Evgenij Legotskoj

resources_big - это флаг для сборки c++ приложения. Если Nuitka не предоставляет какой-либо функционал для прикручивания конфигурационных директив типа CONFIG при компиляции, то сомнева…
Now discuss on the forum
Dec. 5, 2019, 4:12 p.m.
Evgenij Legotskoj

Это уже кастомная стилизация. Придётся отключать обрамление и самостоятельно реализовывать ресайз окна, его перемещение, стиль и т.д. Вот статья, как отключить обрамление окна - QML …
Dec. 5, 2019, 4:27 a.m.
qml_puthon_user

Вот код, вдруг, кому поможет. Код основной формы: import QtQuick 2.12import QtQuick.Controls 2.12import QtQuick.Layouts 1.3import "./Components/Panels" as PanelsApplicationWindow{…
Dec. 5, 2019, 2:50 a.m.
Evgenij Legotskoj

Создавайте новые темы, чтобы не было всё в куче.
Dec. 4, 2019, 10:07 p.m.
qml_puthon_user

Спасибо за помощь! :) Я попытаю надежды в ожидании QtQuick3D от Riverbank'a. :)
V
Dec. 4, 2019, 7:02 a.m.
Vitali

Со временем распаковки соласен - для слабых ноутов это проблема и именно Nuitka мог бы здесь помочь, если бы заработало. А QtlFW - это уже фреймфорк для создания инсталятора из имеющихся па…
EVILEG
About
Services
© EVILEG 2015-2019
Recommend hosting TIMEWEB