Switching views using states and transition



  • This post is deleted!

  • Moderators

    Hi! Please be more specific.



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



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


  • Moderators

    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 }
            }
        ]
    }
    


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



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



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



  • @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.



  • @Yashpal Thanks ! i ll surely give it a shot


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.