Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

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

    QML and Qt Quick
    2
    3
    104
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • mbruel
      mbruel last edited by

      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 1 Reply Last reply Reply Quote 0
      • J.Hilk
        J.Hilk Moderators @mbruel last edited by

        @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

        Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct

        Qt Needs YOUR vote: https://bugreports.qt.io/browse/QTQAINFRA-4121


        Q: What's that?
        A: It's blue light.
        Q: What does it do?
        A: It turns blue.

        1 Reply Last reply Reply Quote 2
        • mbruel
          mbruel last edited by

          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?

          1 Reply Last reply Reply Quote 0
          • First post
            Last post