Qt World Summit: Register Today!

Integrate C++ and QML. Qt 5.4

  • I was reading the Qt documentation for the past couple of hours trying to figure out a way to make a UI created with Qt Quick UI (QML) communicate (interact) with C++ code (functions... etc.).

    I've read the 5 or 6 similar questions on here to but I'm kind of confused, I have problems figuring out where to start or what to do first. I'd appreciate it a lot if someone could take the time and list the steps needed to make this work.

    What i've done so far. I tried doing ...>add new Item> C++ class but I failed with an error saying:" failed to add one or more files to project"> It seems like the files (.. .cpp and .h) are created, they were in the folder where the other project files were but not included in the project. What I wanna do is just something simple like changing the text of the textedit through a C++ function or any other way possible.

    //Test.qml (main.qml)
    @import QtQuick 2.1
    import QtQuick.Window 2.0

    Rectangle {
    id: rootRect
    width: Screen.width/2
    height: Screen.height/2
    color: "gray"

        id: textField
        width: 120
        height: 40
        color: "white"
        x:274; y: 61
        border.color: "blue"
        border.width: 4
        radius: 2
    TextEdit {
        id: display
        x: 274
        y: 61
        width: 80
        height: 20
        text: qsTr("Text Edit")
        font.pixelSize: 22
        color: "black"
        anchors.centerIn: textField
        id: inputField
        width: textField.width
        height: textField.height
        border.color: "green"
        border.width: 3
        color: "white"
        x: 140; y: 61
        id: input
        color: "red"
        font.pixelSize: 30
        anchors.centerIn: inputField
        text: "Some Text"



    @import QtQuick 2.0
    import QtQuick.Window 2.0

    Item {

    property string defaultText: "New Text"
    id: button
    width: rootRect.width/6
    height: rootRect.height/8
    color: "black"
    x: 200; y: 200
    radius: 10
        id: buttonClickArea
        width: 0
        anchors.rightMargin: 0
        anchors.bottomMargin: 0
        anchors.fill: button
        onClicked: {
                display.text = defaultText


    Thank you for taking the time to read this and/or any replies.

  • Lifetime Qt Champion

    Hi and welcome to devnet,

    Is your project based on the Qt Quick application template ?

  • Thank you.

    Yes, SGaist, it is. It's just a simple UI with a button and two textedit fields.

  • Lifetime Qt Champion

    I meant: is it a pure QML project or do you use e.g. a QtQuick2ApplicationViewer to show your QML window ?

  • I'm preety new to Qt, actually, It's my first time I got my hands on it (not new to c++ though). To be hones I don't know what that "QtQuick2ApplicationViewer" is.

    I just went: new project>Application>Qt Quick UI and then after that i added another new item - right click (on the project, left side window of Qt) > add new > QML File (Qt Quick 2).

    I don't know if I'm allowed to paste links here but if it's not I'll remove it right away. Was following this guys tutorials. https://www.youtube.com/watch?v=QvQAu8n8FRI&index=9&list=PLB22HyVdO1GkLFrvRi5vIo5XcWS0EflxD

  • Lifetime Qt Champion

    No problem with sharing links as long as they are related to Qt :)

    Ok, so the tutorial is using a Qt Quick UI project which means QML only and no C++. You need to create a new project using the Qt Quick Application template. With that one you'll be able to use both C++ and QML. You also have the "Extending QML Functionalities using C++" chapter in Qt's documentation that should help you get started with mixing QML and C++

  • Thank You very much.

    I guess I'll have to dig into the documentation some more.

    Thanks again.

Log in to reply