problem: how to navigate to different pages using qt quick
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
Code:
//welcome.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: "lightblue"
ColorAnimation on color { to: "steelblue"; duration: 3000 }
Image {
id: img
width:540
height: 960
source: "qrc:/inside.PNG"
}
Item {
id:item1
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
width: 570; height: 170
anchors.verticalCenterOffset: 190
anchors.horizontalCenterOffset: 0
Column {
width: 360
height: 221
anchors.verticalCenterOffset: 133
anchors.horizontalCenterOffset: 13
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
spacing: 9
Button{
text:"Login"
style: ButtonStyle{
background: Rectangle {
implicitWidth: 335
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:"lightblue"
ColorAnimation on color { to: "gold"; duration: 3000 }
}
}
}
Button{
signal showAppPage;
MouseArea{
anchors.fill: parent
onClicked: showAppPage()
}
id: btn
text:"Register"
style: ButtonStyle{
background: Rectangle {
implicitWidth: 335
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 }
}
}
}
}
}
}
Code:
//login.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:/login.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:"Email or username"
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 }
}
}
}
Button{
id: btn1
text:"forgot password"
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 }
}
}
}
}
}
}
problem: how to navigate to different pages using qt quick
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
Code:
//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 }
}
}
}
}
}
}
Re: problem: how to navigate to different pages using qt quick
Which code is missing can u correct it or can u tell me which code should i use
Re: problem: how to navigate to different pages using qt quick
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,
_
Re: problem: how to navigate to different pages using qt quick
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
Re: problem: how to navigate to different pages using qt quick
Quote:
Originally Posted by
Yogesh soni
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
Code:
Registration {
id: registrationWindow
}
Cheers,
_
