Solved QStackedWidget doesn't exist in QML? sounds like StackView behaviour is quite different...

[mbruel]

Hi,
I'm doing a Wizard (that doesn't seem to exist in QML either.. :'( ).
I would have use a QStackedWidget to have my few pages loaded and just navigate from one to the other playing on the index of the page. I'm having a Back and Next button.
Sounds like StackView wouldn't work I suppose as we can only display the top Item right?
Is there another Item I could use?
SwipeView could be ok, but is there a way to block enable/disable swipe in a specific direction?
What other solution do I have?
Do I really need to have all my Pages in my Item and play on their visibility by hand in a JS function?
Thanks in advance for the help,
Cheers

[J.Hilk]

@mbruel said in QStackedWidget doesn't exist in QML? sounds like StackView behaviour is quite different...:

SwipeView could be ok, but is there a way to block enable/disable swipe in a specific direction?

sure is!
there's the
https://doc.qt.io/qt-5/qml-qtquick-controls2-swipeview.html#properties
to define if the swipe view should be horizontal or vertical
and interactive decides, if you're allowed to actually swipe, or not :D

[mbruel]

Well I'd like to control swipe on a specific direction, basically always allow swiping back (left) but not forward until I decide it.
I've designed something like this (cf video). It's working, I guess I'll keep that...
It would have been cleaner with a QStackedWidget equivalent but I guess there isn't...
Here is my SignUpWizard.qml

import QtQuick 2.0
import QtQuick.Controls 2.15


Item {
    id: root

    WizardPage {
        id: page1
        anchors.fill  : parent
        lbl.text: qsTr("SignUp Page1")
        backButton.visible: false
    }

    WizardPage {
        id: page2
        anchors.fill  : parent
        lbl.text: qsTr("SignUp Page2")
        visible: false
    }

    WizardPage {
        id: page3
        anchors.fill  : parent
        lbl.text: qsTr("SignUp Page3")
        nextButton.visible: false
        finishButton.visible: true
        visible: false
    }

    Connections {
        target: page1
        function onGoNext(){
            page1.visible = false
            page2.visible = true
        }
    }
    Connections {
        target: page2
        function onGoBack(){
            page1.visible = true
            page2.visible = false
        }
        function onGoNext(){
            page2.visible = false
            page3.visible = true
        }
    }
    Connections {
        target: page3
        function onGoBack(){
            page2.visible = true
            page3.visible = false
        }
    }

}

and the WizardPage.qml

import QtQuick 2.0

Item {
    id: root

    property alias lbl: lbl

    property alias backButton   : backButton
    property alias nextButton   : nextButton
    property alias finishButton : finishButton


    property string imgBack  : "img/back.png"
    property string imgNext  : "img/next.png"

    property int iconSize: 30
    property double opacityButton: 0.7
    property double opacityButtonHover: 1


    signal goBack
    signal goNext
    signal finished;

    Text  {
        id: lbl
        anchors {
            horizontalCenter: parent.horizontalCenter
            verticalCenter: parent.verticalCenter;
        }
        text: "not set...";
    }

    TextButton {
        id: finishButton
        visible: false
        anchors {
            bottom: parent.bottom
            horizontalCenter: parent.horizontalCenter
            margins:20
        }
        text: qsTr("Finish")
        borderRadius: 10
        fontSize: 12

        onClicked: finished();
    }

    Item {
        id: backButton
        anchors {
            bottom: parent.bottom
            left: parent.left
            margins:20
        }

        width: back.width
        height: back.height

        Image {
            id: back
            source: imgBack;
            fillMode: Image.PreserveAspectFit;
            width: iconSize
            height: iconSize
            opacity: opacityButtonHover
        }
        MouseArea{
            hoverEnabled: true
            anchors.fill: back
            onEntered: back.opacity = opacityButton;
            onExited : back.opacity = opacityButtonHover;
            onClicked: goBack();
        }
    }

    Item {
        id: nextButton
        anchors {
            bottom: parent.bottom
            right: parent.right
            margins:20
        }

        width: next.width
        height: next.height

        Image {
            id: next
            source: imgNext;
            fillMode: Image.PreserveAspectFit;
            width: iconSize
            height: iconSize
            opacity: opacityButtonHover
        }
        MouseArea{
            hoverEnabled: true
            anchors.fill: next
            onEntered: next.opacity = opacityButton;
            onExited : next.opacity = opacityButtonHover;
            onClicked: goNext();
        }
    }
}

Any comment on the design?