Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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



  • 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


  • Moderators

    @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



  • 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?


Log in to reply