problem: how to navigate to different pages using qt quick

[Yogesh soni]

this is my gui code can anyone help me how to navigate to different pages on button click for ex: if i click on login page thaan login page display and if click on register button than registration page shoul display

//registration.qml
 
import QtQuick.Controls 1.2
import QtQuick.Controls.Private 1.0
import QtQuick.Controls.Styles 1.1
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
import QtQuick.Dialogs 1.2
 
 
 
Window {
    visible: true
    id: window1
    color:"white"
 
    Image {
        id: img
        width:540
        height: 960
        source: "qrc:/registration.png"
    }
 
 
 
    Item {
 
        id:item1
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
 
        width: 570; height: 170
        anchors.verticalCenterOffset: 117
        anchors.horizontalCenterOffset: 7
 
 
        Column {
            width: 360
            height: 221
            anchors.verticalCenterOffset: -115
            anchors.horizontalCenterOffset: -5
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
 
            spacing: 20
 
 
 
            TextField {
                            placeholderText:"Address"
                            style: TextFieldStyle
                            {
                                textColor: "black"
                                background: Rectangle {
                                    radius: 2
                                    implicitWidth: 400
                                    implicitHeight: 53
                                    border.color: "#333"
                                    border.width: 1
                                }
                            }
                        }
 
 
        TextField {
                        placeholderText:"Username"
                        style: TextFieldStyle
                        {
                            textColor: "black"
                            background: Rectangle {
                                radius: 2
                                implicitWidth: 350
                                implicitHeight: 53
                                border.color: "#333"
                                border.width: 1
                            }
                        }
                    }
 
 
    TextField {
                    placeholderText:"Phone number"
                    style: TextFieldStyle
                    {
                        textColor: "black"
                        background: Rectangle {
                            radius: 2
                            implicitWidth: 350
                            implicitHeight: 53
                            border.color: "#333"
                            border.width: 1
                        }
                    }
                }
 
                    TextField {
                        echoMode: TextInput.Password
                        placeholderText:"Password"
                        style: TextFieldStyle
                        {
                            textColor: "black"
                            background: Rectangle {
                                radius: 2
                                implicitWidth: 350
                                implicitHeight: 53
                                border.color: "#333"
                                border.width: 1
                            }
                        }
                    }
 
 
Button{
 
 
    id: btn
    text:"Submit"
    style: ButtonStyle{
        background: Rectangle {
            implicitWidth: 350
            implicitHeight: 53
            radius: 10.0
            border.width: control.activeFocus ? 2 : 1
                       border.color: "#888"
                       gradient: Gradient {
                           GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
                           GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
                       }
            color:"gold"
            ColorAnimation on color { to: "lightblue"; duration: 3000 }
 
        }
    }
}
        }
 
    }
}

//registration.qml

import QtQuick.Controls 1.2
import QtQuick.Controls.Private 1.0
import QtQuick.Controls.Styles 1.1
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
import QtQuick.Dialogs 1.2



Window {
    visible: true
    id: window1
    color:"white"

    Image {
        id: img
        width:540
        height: 960
        source: "qrc:/registration.png"
    }



    Item {

        id:item1
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        width: 570; height: 170
        anchors.verticalCenterOffset: 117
        anchors.horizontalCenterOffset: 7


        Column {
            width: 360
            height: 221
            anchors.verticalCenterOffset: -115
            anchors.horizontalCenterOffset: -5
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            spacing: 20



            TextField {
                            placeholderText:"Address"
                            style: TextFieldStyle
                            {
                                textColor: "black"
                                background: Rectangle {
                                    radius: 2
                                    implicitWidth: 400
                                    implicitHeight: 53
                                    border.color: "#333"
                                    border.width: 1
                                }
                            }
                        }


        TextField {
                        placeholderText:"Username"
                        style: TextFieldStyle
                        {
                            textColor: "black"
                            background: Rectangle {
                                radius: 2
                                implicitWidth: 350
                                implicitHeight: 53
                                border.color: "#333"
                                border.width: 1
                            }
                        }
                    }


    TextField {
                    placeholderText:"Phone number"
                    style: TextFieldStyle
                    {
                        textColor: "black"
                        background: Rectangle {
                            radius: 2
                            implicitWidth: 350
                            implicitHeight: 53
                            border.color: "#333"
                            border.width: 1
                        }
                    }
                }

                    TextField {
                        echoMode: TextInput.Password
                        placeholderText:"Password"
                        style: TextFieldStyle
                        {
                            textColor: "black"
                            background: Rectangle {
                                radius: 2
                                implicitWidth: 350
                                implicitHeight: 53
                                border.color: "#333"
                                border.width: 1
                            }
                        }
                    }


Button{


    id: btn
    text:"Submit"
    style: ButtonStyle{
        background: Rectangle {
            implicitWidth: 350
            implicitHeight: 53
            radius: 10.0
            border.width: control.activeFocus ? 2 : 1
                       border.color: "#888"
                       gradient: Gradient {
                           GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
                           GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
                       }
            color:"gold"
            ColorAnimation on color { to: "lightblue"; duration: 3000 }

        }
    }
}
        }

    }
}

To copy to clipboard, switch view to plain text mode 

[Yogesh soni]

Which code is missing can u correct it or can u tell me which code should i use

[anda_skoa]

Make the visible property of the two windows false or do not set it at all.
Add one instance each to the welcome.qml

Instead of emitting a signal, call show() on the respective window.

Cheers,
_

[Yogesh soni]

Thnx
can u tell me how to create instance

---

Added after 5 minutes:

Can u tell me how to store data in sqlite on button click in qt quick with example

[anda_skoa]

Thnx
can u tell me how to create instance

The easiest way is to use filenames starting with an uppercase letter for the two Windows and then just using that file name in your main QML like if it where an element type.

E.g. if you rename registration.qml to Registration.qml, you can instantiate an object of Registration like this in welcome.qml

Registration {
    id: registrationWindow
}

Registration {
    id: registrationWindow
}

To copy to clipboard, switch view to plain text mode 

Cheers,
_