QML Navigate through Stackview; Signal slot possible?

Question

I want to build a simple application where i can Switch the forms (or pages) via Signal Slot. I use for the Frame of my app a Stackview. I can't connect the Signal in my ui.qml (or the .qml File) to my Slot in main.qml main.qml:

import QtQuick.Controls 2.5
import QtQuick.VirtualKeyboard 2.4

ApplicationWindow {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Stack")

   StackView{
        id: stackView
        initialItem:"InitializeForm.ui.qt"
        anchors.fill: parent
    }
}

Initialize.qml:

InitializeForm {
signal moveNextView(String nextView)
}

InitializeForm.ui.qml

Item {
    id: formId
    width: 400
    height: 400
    property alias initializeText: initializeText

    Text {
        id: initializeText
        x: 77
        y: 158
        width: 246
        height: 85
        text: qsTr("Initialize")
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 22
    }
}

Can anybody help me?

Answer 1

the issue is that you never connected the initial item to the stackView's push method, so QML never knew that something was supposed to happen..

I managed to figure this one out... see comments in code

--

main.qml

ApplicationWindow {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Stack")

   StackView{
        id: stackView
        initialItem:"InitializeForm.ui.qt"
        anchors.fill: parent

        /* add this code to connect your stackView current item to the stackView */
         onCurrentItemChanged: {
             stackView.currentItem.requestStackChange.connect(stackView.push);
         }
   }

}

--

Initialize.qml

InitializeForm {


}

InitializeForm.ui.qml

Item {
    id: formId
    width: 400
    height: 400
    property alias initializeText: initializeText

    /* heres your missing piece of the puzzle */
    signal requestStackChange(var stack, var properties)

    Text {
        id: initializeText
        x: 77
        y: 158
        width: 246
        height: 85
        text: qsTr("Initialize")
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 22
    }
    Button {
          text: "Change Stack View Item"
          width: 200
          height: 200
          onClicked: {

              requestStackChange("thirdMenu.qml", {});
          }
      }
    }
}

Answer 2

You need to use QML Connections to connect the signal. See example at: https://doc.qt.io/qt-5/qml-qtqml-connections.html