Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Invisible buttons are still functioning
QtWS25 Last Chance

Invisible buttons are still functioning

Scheduled Pinned Locked Moved QML and Qt Quick
qtqmlqtquickdifferentviewsstatesvisibility
13 Posts 3 Posters 9.9k Views
  • 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.
  • B Offline
    B Offline
    BlueMagma
    wrote on last edited by
    #4

    It is probably not the best solution :

    You could add "enabled : visible" on the button

    1 Reply Last reply
    1
    • vishnuV vishnu

      @p3c0
      I tried with an example it still does the same behaviour. If press on the area where buttons are pressed it is changing the views.Moreover with stakeView i know only to and forth .With stakeview how to go to upto 3 indepth views? any smal example would really help me a lot.Also, How to connect properties of one view to another view if I am simply pushing and poping out qml files from Stakeview? Thanks .

      import QtQuick 2.3
      import QtQuick.Window 2.2
      import QtQuick.Controls 1.3
      
      Window {
          visible: true
          width: 360
      
          Column{
              spacing: 40
              anchors.centerIn: parent
              Button{
                  id:openLelyview
                  text:"Detailed View"
                  onClicked: {
                      stackView.push(Qt.resolvedUrl("LelyView.qml"))
                  }
              }
              Button{
                  id:homingButton
                  text:"Homing"
                  onClicked: {
                      stackView.push(Qt.resolvedUrl("Register.qml"))
                  }
              }
              Button{
                  id:joggingButton
                  text:"Jogging"
                  onClicked: {
                      stackView.push(Qt.resolvedUrl("LelyView.qml"))
                  }
              }
          }
      
          StackView {
              id: stackView
              anchors.fill: parent
              // Implements back key navigation
              focus: true
          }
      }
      
      p3c0P Offline
      p3c0P Offline
      p3c0
      Moderators
      wrote on last edited by
      #5

      @vishnu Here's an example to pop off an item of any depth. This link clearly explains.
      Here's an example I prepared:

      //Adds 10 items into StackView and also pops to an item at index 4
      import QtQuick 2.4
      import QtQuick.Controls 1.3
      
      Rectangle {
          width: 200
          height: 100
      
          StackView {
              id: stack
              anchors.fill: parent
          }
      
          Component {
              id: item
              Text { }
          }
      
          Row {
              anchors.bottom: parent.bottom
              Button {
                  text: "Add"
                  onClicked: {
                      for(var a=0; a<10; a++) {
                          var comp = item
                          stack.push(comp.createObject(stack,{"text": "Item"+a}));
                      }
                  }
              }
      
              Button {
                  text: "Pop"
                  onClicked: {
                      var current = stack.get(4)
                      stack.pop(current)
                  }
              }
          }
      }
      

      You will also need to set destroyOnPop to true as documented here to not allow items destroy on pop.

      157

      vishnuV 1 Reply Last reply
      0
      • p3c0P p3c0

        @vishnu Here's an example to pop off an item of any depth. This link clearly explains.
        Here's an example I prepared:

        //Adds 10 items into StackView and also pops to an item at index 4
        import QtQuick 2.4
        import QtQuick.Controls 1.3
        
        Rectangle {
            width: 200
            height: 100
        
            StackView {
                id: stack
                anchors.fill: parent
            }
        
            Component {
                id: item
                Text { }
            }
        
            Row {
                anchors.bottom: parent.bottom
                Button {
                    text: "Add"
                    onClicked: {
                        for(var a=0; a<10; a++) {
                            var comp = item
                            stack.push(comp.createObject(stack,{"text": "Item"+a}));
                        }
                    }
                }
        
                Button {
                    text: "Pop"
                    onClicked: {
                        var current = stack.get(4)
                        stack.pop(current)
                    }
                }
            }
        }
        

        You will also need to set destroyOnPop to true as documented here to not allow items destroy on pop.

        vishnuV Offline
        vishnuV Offline
        vishnu
        wrote on last edited by vishnu
        #6

        @p3c0
        sorry for late reply. As you said I modified my program from visible concept to StackView. But now the status of the buttons (on/off) is not preserved.Because when i am pushing I am not making destroyOnPop to false. How to do that with this syntax.

        Button{
                    id:openDetailedview
                    text:"Detailed View"
                    onClicked: {
                        stackView.push(Qt.resolvedUrl("DetailedView.qml"))
                    }
                }
        

        In DetailedView.qml there are many on/off buttons.
        Also, It says that qml: Warning: StackView: cannot transition an item that is anchored!.May i know when do we get this kind of error because i even set anchors.fill:parent. Thanks.

        p3c0P 1 Reply Last reply
        0
        • vishnuV vishnu

          @p3c0
          sorry for late reply. As you said I modified my program from visible concept to StackView. But now the status of the buttons (on/off) is not preserved.Because when i am pushing I am not making destroyOnPop to false. How to do that with this syntax.

          Button{
                      id:openDetailedview
                      text:"Detailed View"
                      onClicked: {
                          stackView.push(Qt.resolvedUrl("DetailedView.qml"))
                      }
                  }
          

          In DetailedView.qml there are many on/off buttons.
          Also, It says that qml: Warning: StackView: cannot transition an item that is anchored!.May i know when do we get this kind of error because i even set anchors.fill:parent. Thanks.

          p3c0P Offline
          p3c0P Offline
          p3c0
          Moderators
          wrote on last edited by
          #7

          @vishnu

          How to do that with this syntax.

          stackView.push( { item: Qt.resolvedUrl("DetailedView.qml"), destroyOnPop:false } );
          

          Also, It says that qml: Warning: StackView: cannot transition an item that is anchored!.May i know when do we get this kind of error because i even set anchors.fill:parent

          That is the problem. Don't do it.

          157

          vishnuV 1 Reply Last reply
          0
          • p3c0P p3c0

            @vishnu

            How to do that with this syntax.

            stackView.push( { item: Qt.resolvedUrl("DetailedView.qml"), destroyOnPop:false } );
            

            Also, It says that qml: Warning: StackView: cannot transition an item that is anchored!.May i know when do we get this kind of error because i even set anchors.fill:parent

            That is the problem. Don't do it.

            vishnuV Offline
            vishnuV Offline
            vishnu
            wrote on last edited by
            #8

            @p3c0
            stackView.push( { item: Qt.resolvedUrl("DetailedView.qml"), destroyOnPop:false } );
            I did like this but still status it not restored. So what i did is instantiate the component and make is invisible.
            MainView.qml

             Button{
                        id:openDetailedview
                        text:"Detailed View"
                        onClicked: {
                            stackView.push({item:detailedView,destroyOnPop:false})
                        }
                    }
            DetailedView{
                    id:detailedView
                    visible: false
                }
            

            works perfect like this but still qml: Warning: StackView: cannot transition an item that is anchored! is not solved what should i do?
            I even tried replacing
            anchors.fill:parent
            with
            width: parent.width
            height: parent.height
            anchors.left: parent.left but no use.

            p3c0P 1 Reply Last reply
            0
            • vishnuV vishnu

              @p3c0
              stackView.push( { item: Qt.resolvedUrl("DetailedView.qml"), destroyOnPop:false } );
              I did like this but still status it not restored. So what i did is instantiate the component and make is invisible.
              MainView.qml

               Button{
                          id:openDetailedview
                          text:"Detailed View"
                          onClicked: {
                              stackView.push({item:detailedView,destroyOnPop:false})
                          }
                      }
              DetailedView{
                      id:detailedView
                      visible: false
                  }
              

              works perfect like this but still qml: Warning: StackView: cannot transition an item that is anchored! is not solved what should i do?
              I even tried replacing
              anchors.fill:parent
              with
              width: parent.width
              height: parent.height
              anchors.left: parent.left but no use.

              p3c0P Offline
              p3c0P Offline
              p3c0
              Moderators
              wrote on last edited by
              #9

              @vishnu qml: Warning: StackView: cannot transition an item that is anchored!
              That is what I said don't anchor it. It will fill automatically.

              157

              vishnuV 1 Reply Last reply
              0
              • p3c0P p3c0

                @vishnu qml: Warning: StackView: cannot transition an item that is anchored!
                That is what I said don't anchor it. It will fill automatically.

                vishnuV Offline
                vishnuV Offline
                vishnu
                wrote on last edited by vishnu
                #10

                @p3c0
                Sorry.Now i removed it but still. the warning is not shown when pushing deatiledView.qml. But inside deatiledView. I have different buttons.upon clicking i am pushing another qml files.here is the problem.In my case when I am pushing the AcyclicRegister.qml I am getting the error
                DetailedView.qml

                Item {
                    id:centralView
                //    width: parent.width
                //    height: parent.height
                 ControlView{
                
                        id:controlview
                        height: (centralView.height)
                        width: centralView.width/2
                        anchors.left: centralView.left
                        anchors.leftMargin: festodesign.buttonGap
                        Connections{
                            onAcyclicButtonClicked: {
                            stackView.push({item:acyclicRegister,destroyOnPop:false})
                            }
                      }
                   AcyclicRegister{
                        id:acyclicRegister
                        visible: false
                        property int byteIndex: 1
                        onRegisterstatus: {
                            tcpCommunicationPort.datafromQml(byteIndex,index,data);//sending to cpp
                        }
                    }
                 DisplayView{
                        id: displayView
                        height: (centralView.height)
                        width: centralView.width/2
                        anchors.left: controlview.right
                        anchors.leftMargin: festodesign.buttonGap
                        anchors.top: parent.top
                        Connections{
                            onAcyclicButtonClicked: {stackView.push({item:sAcyclicRegister,destroyOnPop:false})}
                       }
                SAcyclicRegister{
                        id:sAcyclicRegister
                        visible: false
                        property int byteIndex: 1
                        onRegisterstatus: {
                            //            tcpCommunicationPort.datafromQml(byteIndex,index,-1);//sending to cpp
                        }
                    }
                

                AcyclicRegister.qml

                Register{
                    id:acyclicRegister
                 //not showing inside text elements
                }
                

                Register.qml

                Rectangle {
                    id: register
                 //not showing inside text elements
                }
                p3c0P 1 Reply Last reply
                0
                • vishnuV vishnu

                  @p3c0
                  Sorry.Now i removed it but still. the warning is not shown when pushing deatiledView.qml. But inside deatiledView. I have different buttons.upon clicking i am pushing another qml files.here is the problem.In my case when I am pushing the AcyclicRegister.qml I am getting the error
                  DetailedView.qml

                  Item {
                      id:centralView
                  //    width: parent.width
                  //    height: parent.height
                   ControlView{
                  
                          id:controlview
                          height: (centralView.height)
                          width: centralView.width/2
                          anchors.left: centralView.left
                          anchors.leftMargin: festodesign.buttonGap
                          Connections{
                              onAcyclicButtonClicked: {
                              stackView.push({item:acyclicRegister,destroyOnPop:false})
                              }
                        }
                     AcyclicRegister{
                          id:acyclicRegister
                          visible: false
                          property int byteIndex: 1
                          onRegisterstatus: {
                              tcpCommunicationPort.datafromQml(byteIndex,index,data);//sending to cpp
                          }
                      }
                   DisplayView{
                          id: displayView
                          height: (centralView.height)
                          width: centralView.width/2
                          anchors.left: controlview.right
                          anchors.leftMargin: festodesign.buttonGap
                          anchors.top: parent.top
                          Connections{
                              onAcyclicButtonClicked: {stackView.push({item:sAcyclicRegister,destroyOnPop:false})}
                         }
                  SAcyclicRegister{
                          id:sAcyclicRegister
                          visible: false
                          property int byteIndex: 1
                          onRegisterstatus: {
                              //            tcpCommunicationPort.datafromQml(byteIndex,index,-1);//sending to cpp
                          }
                      }
                  

                  AcyclicRegister.qml

                  Register{
                      id:acyclicRegister
                   //not showing inside text elements
                  }
                  

                  Register.qml

                  Rectangle {
                      id: register
                   //not showing inside text elements
                  }
                  p3c0P Offline
                  p3c0P Offline
                  p3c0
                  Moderators
                  wrote on last edited by
                  #11

                  @vishnu The item that you are pushing should not be anchored. In your case you are pushingAcyclicRegister and it is anchored to its parent. Remove that. It will automatically be filled.

                  157

                  vishnuV 1 Reply Last reply
                  0
                  • p3c0P p3c0

                    @vishnu The item that you are pushing should not be anchored. In your case you are pushingAcyclicRegister and it is anchored to its parent. Remove that. It will automatically be filled.

                    vishnuV Offline
                    vishnuV Offline
                    vishnu
                    wrote on last edited by
                    #12

                    @p3c0
                    Ooops.I missed it. Thanks a lot ! works perfect :).
                    I have a right-arrow button on my footer where i am pushing a qml file upon clicking. when it is loaded how to disable this button on the footer? Also, I don't want to push the same qml file again and again.How can make a check before pushing If that is alread in the stack i don't the push it? I tried like getting the current item but i always get stacknull.
                    var comp=stackView.get(Stack.index);
                    console.log("latest stack"+comp)

                    p3c0P 1 Reply Last reply
                    0
                    • vishnuV vishnu

                      @p3c0
                      Ooops.I missed it. Thanks a lot ! works perfect :).
                      I have a right-arrow button on my footer where i am pushing a qml file upon clicking. when it is loaded how to disable this button on the footer? Also, I don't want to push the same qml file again and again.How can make a check before pushing If that is alread in the stack i don't the push it? I tried like getting the current item but i always get stacknull.
                      var comp=stackView.get(Stack.index);
                      console.log("latest stack"+comp)

                      p3c0P Offline
                      p3c0P Offline
                      p3c0
                      Moderators
                      wrote on last edited by p3c0
                      #13

                      @vishnu

                      I have a right-arrow button on my footer where i am pushing a qml file upon clicking. when it is loaded how to disable this button on the footer?

                      enabled = false on click

                      How can make a check before pushing If that is alread in the stack i don't the push it?

                      2 ways.

                      var myItem = stackView.push( { item: Qt.resolvedUrl("DetailedView.qml"), destroyOnPop:false } );
                      //check myItem and store it somewhere
                      if(myItem) { }
                      
                      var myItem = stackView.push( { item: Qt.resolvedUrl("DetailedView.qml"), destroyOnPop:false } );
                      var comp=stackView.get(myItem.Stack.index); //need the item to get its index and not just Stack.index 
                      

                      157

                      1 Reply Last reply
                      0

                      • Login

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Groups
                      • Search
                      • Get Qt Extensions
                      • Unsolved