Как связать QML и С++

Question

TerabaytusFeb. 28, 2018, 7:41 a.m.

Как связать QML и С++

Добрый день, подскажите уже какой день бьюсь с этим вопросом. Работаю в QT5.10

Есть написанный на javaskript переключатель

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick 2.6
import QtQuick.Controls 2.1


Window {
    visible: true
    width: 200
    height: 50
    maximumHeight: height
    maximumWidth: width
    minimumHeight: height
    minimumWidth: width
    title: qsTr("")




    SwitchDelegate {
                id: control
                text: qsTr("          ")
                checked: false

                contentItem: Text {
                    rightPadding: control.indicator.width + control.spacing
                    text: control.text
                    font: control.font
                    opacity: enabled ? 1.0 : 0.3
                    color: control.down ? "#17a81a" : "#21be2b"
                    elide: Text.ElideRight
                    verticalAlignment: Text.AlignVCenter
                }

                indicator: Rectangle {
                    implicitWidth: 48
                    implicitHeight: 26
                    x: control.width - width - control.rightPadding
                    y: parent.height / 2 - height / 2
                    radius: 13
                    color: control.checked ? "#17a81a" : "transparent"
                    border.color: control.checked ? "#17a81a" : "#cccccc"

                    Rectangle {
                        x: control.checked ? parent.width - width : 0
                        width: 26
                        height: 26
                        radius: 13
                        color: control.down ? "#cccccc" : "#ffffff"
                        border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999"
                    }
                }

                background: Rectangle {
                    implicitWidth: 100
                    implicitHeight: 40
                    visible: control.down || control.highlighted
                    color: control.down ? "#bdbebf" : "#eeeeee"
                }
            }
}

как мне теперь получить сигнал о его состоянии влючён/выключен и вторым этапом включить его из кода и так же выключить в своём классе backend.cpp знаю что через SLOT и SIGNAL, но немогу понять.

We recommend hosting TIMEWEB

Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Subscribe to the discussion2

Section subscription248

The question is asked by the articleQML - Lesson 004. Signals and Slots in Qt QML

Do you like it? Share on social networks!

Feb. 28, 2018, 3:47 p.m.

Добрый день.

Вообще делегаты используются для создания внешнего вида элемента в списке (ListView), например. Но никак не самостоятельные переключатели.

Это первый момент. Поэтому надеюсь, что Вы не будете его использовать как самостоятельный объект.

Но тем не менее, что касается самой возможность забрать испустить сигнал, то можно через обработку сигнала clicked, с добавлением нового сигнала.

Это будет выглядеть так.

signal isChecked(var checked)

onClicked: {
    isChecked(checked)
}

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

onClicked: {
    appCore.receiveFromQml(checked)
}

Просто придётся добавить аргумент в слот, например, так

void AppCore::receiveFromQml(bool checked);

March 1, 2018, 3:02 a.m.

Можно по шагам всё пройти я добавил делегат в список (ListView) как мне теперь к нему обратиться- вызвать его в коде С++ ?

 ListView {
        id: listView
        x: 0
        y: 0
        width: 200
        height: 50
        SwitchDelegate {
            id: control
            x: 0
            y: 0
            width: 200
            height: 50
            text: qsTr("Сервер           ")
            checked: false

            contentItem: Text {
                rightPadding: control.indicator.width + control.spacing
                text: control.text
                font: control.font
                opacity: enabled ? 1.0 : 0.3
                color: control.down ? "#17a81a" : "#21be2b"
                elide: Text.ElideRight
                verticalAlignment: Text.AlignVCenter
            }

            indicator: Rectangle {
                implicitWidth: 48
                implicitHeight: 26
                x: control.width - width - control.rightPadding
                y: parent.height / 2 - height / 2
                radius: 13
                color: control.checked ? "#17a81a" : "transparent"
                border.color: control.checked ? "#17a81a" : "#cccccc"

                Rectangle {
                    x: control.checked ? parent.width - width : 0
                    width: 26
                    height: 26
                    radius: 13
                    color: control.down ? "#cccccc" : "#ffffff"
                    border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999"
                }
            }

            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                visible: control.down || control.highlighted
                color: control.down ? "#bdbebf" : "#eeeeee"
            }
        }


    }

Evgenii Legotckoi → Terabaytus
#

March 1, 2018, 4:02 p.m.

Я, возможно, не так ясно выразился.

Сам по себе SwitchDelegate является лишь делегатом внешнего вида для списка объектов например, которые повторяются в ListView, например. Делегаты используются для стилизации частей приложения, но никак не самостоятельные объекты.

Вам Нужно использовать не SwitchDelegate, а просто Switch. А обращаться так, как я Вам показал в предыдущем сообщении. В статье, по которой Вы задали вопрос, есть пример с регистрацией бэкенда в контексте QML. То есть можете именно таким образом и обратиться к это объекту. То есть по событию onClicked проверить состояние и закинуть его в бекенд.

March 2, 2018, 8:04 a.m.
(edited)

Как Вы и сказали, сменил delegat на swich и переключатель ожил при переводе тумблера в консоль выдаёт

qrc:/main.qml:75:29 : Unable to assign [undefined] to bool

ругается вот на этот участок кода

background: Rectangle {
                   implicitWidth: 100
                   implicitHeight: 40
                   visible: control.down || control.highlighted
                   color: control.down ? "#bdbebf" : "#eeeeee"
               }

но в начале выдаёт

qrc:/main.qml:20:5 : QML Connections: Cannot assign to non-existent property "onClicked"

взгляните пожалуйста на код что я не так делаю

QML

Window {
    visible: true
    width: 200
    height: 50
    maximumHeight: height
    maximumWidth: width
    minimumHeight: height
    minimumWidth: width
    title: qsTr("Hi")

    /* С помощью объекта Connections
     * Устанавливаем соединение с классом ядра приложения
     * */
    Connections {
        target: backend  // Указываем целевое соединение



        onSendToQml: {

            console.log(count); // выводит в консоль
        }

        onClicked: {
            backend.receiveFromQml(control);
        }

 }
         Switch {
               id: control
               x: 0
               y: 0
               width: 200
               height: 50
               text: qsTr("Hi           ")
               checked: false
               contentItem: Text {
                   rightPadding: control.indicator.width + control.spacing
                   text: control.text
                   font: control.font
                   opacity: enabled ? 1.0 : 0.3
                   color: control.down ? "#17a81a" : "#21be2b"
                   elide: Text.ElideRight
                   verticalAlignment: Text.AlignVCenter
               }

               indicator: Rectangle {
                   implicitWidth: 48
                   implicitHeight: 26
                   x: control.width - width - control.rightPadding
                   y: parent.height / 2 - height / 2
                   radius: 13
                   color: control.checked ? "#17a81a" : "transparent"
                   border.color: control.checked ? "#17a81a" : "#cccccc"

                   Rectangle {
                       x: control.checked ? parent.width - width : 0
                       width: 26
                       height: 26
                       radius: 13
                       color: control.down ? "#cccccc" : "#ffffff"
                       border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999"
                   }
               }

               background: Rectangle {
                   implicitWidth: 100
                   implicitHeight: 40
                   visible: control.down || control.highlighted
                   color: control.down ? "#bdbebf" : "#eeeeee"
               }
           }

       }

main.cpp

int main(int argc, char *argv[])
{
#if defined(Q_OS_WIN)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif

    QGuiApplication app(argc, argv);

  
    QQmlApplicationEngine engine;// Создаём движок qml

    Backend backend; // Создаём ядро приложения
    QQmlContext *context = engine.rootContext();    // Создаём корневой контекст

    /* Загружаем объект в контекст для установки соединения,
     * а также определяем имя, по которому будет происходить соединение
     * */
    context->setContextProperty("backend", &backend);

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

    return app.exec();
}

backend.cpp

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

void Backend::receiveFromQml(bool control)
{
  std::cout << control << std::endl;
    count++;
    emit sendToQml(count);//отправляем данные в qml
}

backend.h

class Backend : public QObject
{
    Q_OBJECT
    //Q_PROPERTY(QString userName READ userName WRITE setUserName NOTIFY userNameChanged)

public:
    explicit Backend(QObject *parent = nullptr);

signals:
    // Сигнал для передачи данных в qml-интерфейс
    void sendToQml(int count);

public slots:
    // Слот для приёма данных из qml-интерфейса
    void receiveFromQml(bool control);

private:
    // Данные, которыми будем оперировать
    int count;
};


#endif // BACKEND_H

March 2, 2018, 8:10 a.m.
(edited)
The answer was marked as a solution.

У Switch не свойства highlighted, поэтому тот участок кода нужно переписать так

background: Rectangle {
    implicitWidth: 100
    implicitHeight: 40
    visible: control.down
    color: control.down ? "#bdbebf" : "#eeeeee"
}

А Сигнал onClicked не туда поместили, его нужно было поместить в Switch, поскольку Switch имеет сигнал clicked, а не ваш Backend класс, к которому Вы подключаетесь через тип Connections

Switch {
    onClicked: {
        backend.receiveFromQml(control);
    }
}

May 31, 2018, 4:15 a.m.
(edited)

Добрый день, обращаюсь к вам с вопросом на туже тему.

У меня пропала связь QML слоя с С++ в лог выводиться:

TypeError: Property 'setBackend' of object BackEnd(0x7fff41680340) is not a function

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick 2.6
import QtQuick.Controls 1.4
import QtQuick.Controls 2.1

Window {
    id: window
    visible: true
    width: 300
    height: 310
    maximumHeight: height
    maximumWidth: width
    minimumHeight: height
    minimumWidth: width
    title: qsTr("ServerARS")

    /* С помощью объекта Connections
     * Устанавливаем соединение с классом ядра приложения
     * */
    Connections {

        target: backend  



        onSendToQml: {

          console.log(countitch {
        id: control
        x: 0
        y: 0
        width: 300
        height: 50
        text: qsTr("")
        checked: false
        onClicked: {
            backend.setBackend(control);
            console.log("count"); 
        }
        contentItem: Text {
            rightPadding: control.indicator.width + control.spacing
            text: control.text
            font: control.font
            opacity: enabled ? 1.0 : 0.3
            color: control.down ? "#17a81a" : "#21be2b"
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
        }

        indicator: Rectangle {
            implicitWidth: 48
            implicitHeight: 26
            x: control.width - width - control.rightPadding
            y: parent.height / 2 - height / 2
            radius: 13
            color: control.checked ? "#17a81a" : "transparent"
            border.color: control.checked ? "#17a81a" : "#cccccc"

            Rectangle {
                x: control.checked ? parent.width - width : 0
                width: 26
                height: 26
                radius: 13
                color: control.down ? "#cccccc" : "#ffffff"
                border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999"
            }
        }

        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 40
            visible: control.down /*|| control.highlighted*/
            color: control.down ? "#bdbebf" : "#eeeeee"
        }
    }


}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "backend.h"

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;// Создаём движок qml

    BackEnd backend; // Создаём ядро приложения

    QQmlContext *context = engine.rootContext(); // Создаём корневой контекст, загружаем объект в контекст для установки соединения

    context->setContextProperty("backend", &backend); //определяем имя, по которому будет происходить соединение

    engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); // загружаем в него исходник qml
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

backend.h

#ifndef BACKEND_H
#define BACKEND_H

#include <QObject>
#include <QString>

class BackEnd : public QObject
{
    Q_OBJECT

public:
    explicit BackEnd(QObject *parent = 0);
 

signals: 

    void sendToQml(int count);

private slots: 
    void setBackend(bool control);

public: 

};
#endif // BACKEND_H

backend.cpp

#include "backend.h"
#include <iostream>

BackEnd::BackEnd(QObject *parent) : QObject(parent)
{
   
    count =0;


}


void BackEnd::setBackend(bool control) 
{
   std::cout << control << std::endl ;

     count++       
emit sendToQml(count);


    std::cout << count << std::endl ;

}

В чём может быть дело, ещё как мне кажется у меня не инициализируются переменная count QT5.11 подсвечивает её красным.

Evgenii Legotckoi → Terabaytus
#

May 31, 2018, 4:20 a.m.

Добрый день!

Проблема скорее всего в том, что слот setBackend объявлен приватным. переместите его в public slots секцию

Terabaytus → Evgenii Legotckoi
#

May 31, 2018, 4:30 a.m.

Спасибо, действительно всё так. Я столько времени на это потратил (

Как связать QML и С++

We recommend hosting TIMEWEB

Comments