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. Switching views using states and transition
Forum Updated to NodeBB v4.3 + New Features

Switching views using states and transition

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
10 Posts 4 Posters 1.5k Views 2 Watching
  • 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.
  • V Offline
    V Offline
    vishu_fcb
    wrote on last edited by
    #1
    This post is deleted!
    1 Reply Last reply
    0
    • ? Offline
      ? Offline
      A Former User
      wrote on last edited by
      #2

      Hi! Please be more specific.

      V 1 Reply Last reply
      0
      • dheerendraD Offline
        dheerendraD Offline
        dheerendra
        Qt Champions 2022
        wrote on last edited by
        #3

        This is too generic question & requires complete tutorial on States & transition. Please read how states work from documentation. Try some example. If something does not work, post the question here.

        Dheerendra
        @Community Service
        Certified Qt Specialist
        http://www.pthinks.com

        V 1 Reply Last reply
        1
        • ? A Former User

          Hi! Please be more specific.

          V Offline
          V Offline
          vishu_fcb
          wrote on last edited by
          #4

          @Wieland Basically i have a main.qml and two other qml files .
          Default state will load my first qml over the main and when i press a button on the first qml , the second qml should overlap my first qml !!
          I tried using states and transitions but once i load my first qml , i am unable to load my second qml on the first qml ..
          I have tried ANCHORchange and Propertychange options but nothing worked

          1 Reply Last reply
          0
          • ? Offline
            ? Offline
            A Former User
            wrote on last edited by
            #5

            Do you mean like this?

            Item {
                id: item
                width: 600
                height: 400
            
                Rectangle {
                    id: plumRect
                    anchors.left: item.left
                    width: 400
                    height: 400
                    color: "plum"
                    Button {
                        text: "plumRect to top"
                        onClicked: item.state = "plumRectOnTop"
            
                    }
                }
            
                Rectangle {
                    id: pinkRect
                    anchors.right: item.right
                    width: 400
                    height: 400
                    color: "pink"
                    Button {
                        anchors.right: pinkRect.right
                        text: "pinkRect to top"
                        onClicked: item.state = "" // default state
                    }
                }
            
                states: [
                    State {
                        name: "plumRectOnTop"
                        PropertyChanges { target: plumRect; z: pinkRect.z+1 }
                    }
                ]
            }
            
            1 Reply Last reply
            0
            • dheerendraD dheerendra

              This is too generic question & requires complete tutorial on States & transition. Please read how states work from documentation. Try some example. If something does not work, post the question here.

              V Offline
              V Offline
              vishu_fcb
              wrote on last edited by
              #6

              @dheerendra @Wieland Basically i have a main.qml and two other qml files .
              Default state will load my first qml over the main and when i press a button on the first qml , the second qml should overlap my first qml !!
              I tried using states and transitions but once i load my first qml , i am unable to load my second qml on the first qml ..
              I have tried ANCHORchange and Propertychange options but nothing worked

              1 Reply Last reply
              0
              • dheerendraD Offline
                dheerendraD Offline
                dheerendra
                Qt Champions 2022
                wrote on last edited by
                #7

                Understood. Prepare the sample & post the code here. Then one of the forum person will help you.

                Dheerendra
                @Community Service
                Certified Qt Specialist
                http://www.pthinks.com

                1 Reply Last reply
                1
                • V Offline
                  V Offline
                  vishu_fcb
                  wrote on last edited by A Former User
                  #8
                  import QtQuick 2.5
                  import QtQuick.Window 2.2
                  
                  Window {
                      id:root
                      visible:true
                      width: 640
                      height: 480
                  //    flags: Qt.FramelessWindowHint | Qt.Window
                  
                   Rectangle{
                       id:base
                       width: root.width
                       height: root.height
                       state:Home
                  
                       Temp_selection {
                         id:main_window
                       }
                  
                       Menu_pop {
                           id:menu_disp
                           visible: false
                       }
                  
                       Status_line {
                          id:stauts_line_pointer
                       }
                  
                      states: [
                          State {
                              name: "Home"
                              AnchorChanges{
                                  target: main_window
                                  anchors.top:base.top
                                  anchors.bottom: base.bottom
                              }
                              PropertyChanges {
                                  target:main_window
                                  x: base.x
                                  y: base.y
                              }
                          },
                  
                          State {
                              name: "menu"
                  //            when: stauts_line_pointer.mouse_area.pressed
                              AnchorChanges{
                                  target: menu_disp
                                  anchors.right:main_window.right
                                  anchors.bottom: main_window.bottom
                              }
                              PropertyChanges {
                                  target:menu_disp
                                  x: base.x
                                  y: base.y
                                  visible:true
                  
                              }
                          }
                  ]
                      transitions: [
                          Transition {
                              from: "Home"
                              to: "menu"
                              NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
                              AnchorAnimation { duration: 800; easing.type: Easing.InOutBack; easing.overshoot: 2 }
                  //          PropertyAnimation{ property: x; duration: 1000}
                  //          PropertyAnimation{ property: y; duration: 1000}
                  //           ColorAnimation { duration: 3000}
                          }
                      ]
                  }
                  }
                  

                  My second state transition i.e from HOME to MENU is not taking place .

                  [Edit: Added code tags -- @Wieland]

                  1 Reply Last reply
                  0
                  • YashpalY Offline
                    YashpalY Offline
                    Yashpal
                    wrote on last edited by
                    #9

                    @vishu_fcb Make sure this statement <when: stauts_line_pointer.mouse_area.pressed> is proper. You can use children property of 'stauts_line_pointer' to access mousearea, if the later is the child of 'stauts_line_pointer'. Also, state:Home should be <state : "Home"> in base Rectangle.

                    V 1 Reply Last reply
                    2
                    • YashpalY Yashpal

                      @vishu_fcb Make sure this statement <when: stauts_line_pointer.mouse_area.pressed> is proper. You can use children property of 'stauts_line_pointer' to access mousearea, if the later is the child of 'stauts_line_pointer'. Also, state:Home should be <state : "Home"> in base Rectangle.

                      V Offline
                      V Offline
                      vishu_fcb
                      wrote on last edited by
                      #10

                      @Yashpal Thanks ! i ll surely give it a shot

                      1 Reply Last reply
                      1

                      • Login

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