Switching views using states and transition

vishu_fcb

This post is deleted!

Wieland

Hi! Please be more specific.

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.

vishu_fcb

@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

Wieland

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

vishu_fcb

@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

dheerendra

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

vishu_fcb

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]

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.

vishu_fcb

@Yashpal Thanks ! i ll surely give it a shot