Results 1 to 6 of 6

Thread: problem: how to navigate to different pages using qt quick

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. 1st November 2015, 19:17 #1
    Yogesh soni
    Yogesh soni is offline Beginner
    Join Date
    Aug 2015
    Posts
    7
    Qt products
    Qt5
    Platforms
    Windows Android

    Question 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

    Qt Code: 
    1. //welcome.qml
    2.  
    3. import QtQuick.Controls 1.2
    4. import QtQuick.Controls.Private 1.0
    5. import QtQuick.Controls.Styles 1.1
    6. import QtQuick 2.4
    7. import QtQuick.Window 2.2
    8. import QtQuick.Layouts 1.1
    9. import QtQuick.Dialogs 1.2
    10.  
    11.  
    12.  
    13. Window {
    14.     visible: true
    15.     id: window1
    16.  
    17.     color: "lightblue"
    18.     ColorAnimation on color { to: "steelblue"; duration: 3000 }
    19.  
    20.  
    21.  
    22.     Image {
    23.         id: img
    24.         width:540
    25.         height: 960
    26.         source: "qrc:/inside.PNG"
    27.     }
    28.  
    29.     Item {
    30.  
    31.         id:item1
    32.         anchors.horizontalCenter: parent.horizontalCenter
    33.         anchors.verticalCenter: parent.verticalCenter
    34.  
    35.         width: 570; height: 170
    36.         anchors.verticalCenterOffset: 190
    37.         anchors.horizontalCenterOffset: 0
    38.  
    39.  
    40.         Column {
    41.             width: 360
    42.             height: 221
    43.             anchors.verticalCenterOffset: 133
    44.             anchors.horizontalCenterOffset: 13
    45.             anchors.horizontalCenter: parent.horizontalCenter
    46.             anchors.verticalCenter: parent.verticalCenter
    47.  
    48.             spacing: 9
    49.  
    50.             Button{
    51.                 text:"Login"
    52.                 style: ButtonStyle{
    53.                     background: Rectangle {
    54.                         implicitWidth: 335
    55.                         implicitHeight: 53
    56.                         radius: 10.0
    57.                         border.width: control.activeFocus ? 2 : 1
    58.                                    border.color: "#888"
    59.                                    gradient: Gradient {
    60.                                        GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
    61.                                        GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
    62.                                    }
    63.                         color:"lightblue"
    64.                         ColorAnimation on color { to: "gold"; duration: 3000 }
    65.  
    66.                     }
    67.                 }
    68.  
    69.             }
    70.  
    71.             Button{
    72.  
    73.                 signal showAppPage;
    74.                     MouseArea{
    75.                         anchors.fill: parent
    76.                         onClicked: showAppPage()
    77.                     }
    78.  
    79.                 id: btn
    80.                 text:"Register"
    81.                 style: ButtonStyle{
    82.                     background: Rectangle {
    83.                         implicitWidth: 335
    84.                         implicitHeight: 53
    85.                         radius: 10.0
    86.                         border.width: control.activeFocus ? 2 : 1
    87.                                    border.color: "#888"
    88.                                    gradient: Gradient {
    89.                                        GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
    90.                                        GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
    91.                                    }
    92.                         color:"gold"
    93.                         ColorAnimation on color { to: "lightblue"; duration: 3000 }
    94.  
    95.                     }
    96.                 }
    97.             }
    98.  
    99.         }
    100.  
    101.     }
    102. }
    To copy to clipboard, switch view to plain text mode 
    Qt Code: 
    1. //login.qml
    2.  
    3. import QtQuick.Controls 1.2
    4. import QtQuick.Controls.Private 1.0
    5. import QtQuick.Controls.Styles 1.1
    6. import QtQuick 2.4
    7. import QtQuick.Window 2.2
    8. import QtQuick.Layouts 1.1
    9. import QtQuick.Dialogs 1.2
    10.  
    11.  
    12.  
    13. Window {
    14.     visible: true
    15.     id: window1
    16.     color:"white"
    17.  
    18.     Image {
    19.         id: img
    20.         width:540
    21.         height: 960
    22.         source: "qrc:/login.png"
    23.     }
    24.  
    25.     Item {
    26.  
    27.         id:item1
    28.         anchors.horizontalCenter: parent.horizontalCenter
    29.         anchors.verticalCenter: parent.verticalCenter
    30.  
    31.         width: 570; height: 170
    32.         anchors.verticalCenterOffset: 117
    33.         anchors.horizontalCenterOffset: 7
    34.  
    35.  
    36.         Column {
    37.             width: 360
    38.             height: 221
    39.             anchors.verticalCenterOffset: -115
    40.             anchors.horizontalCenterOffset: -5
    41.             anchors.horizontalCenter: parent.horizontalCenter
    42.             anchors.verticalCenter: parent.verticalCenter
    43.  
    44.             spacing: 20
    45.  
    46.  
    47.             TextField {
    48.                             placeholderText:"Email or username"
    49.                             style: TextFieldStyle
    50.                             {
    51.                                 textColor: "black"
    52.                                 background: Rectangle {
    53.                                     radius: 2
    54.                                     implicitWidth: 350
    55.                                     implicitHeight: 53
    56.                                     border.color: "#333"
    57.                                     border.width: 1
    58.                                 }
    59.                             }
    60.                         }
    61.  
    62.  
    63.                     TextField {
    64.                         echoMode: TextInput.Password
    65.                         placeholderText:"Password"
    66.                         style: TextFieldStyle
    67.                         {
    68.                             textColor: "black"
    69.                             background: Rectangle {
    70.                                 radius: 2
    71.                                 implicitWidth: 350
    72.                                 implicitHeight: 53
    73.                                 border.color: "#333"
    74.                                 border.width: 1
    75.                             }
    76.                         }
    77.                     }
    78.  
    79.  
    80. Button{
    81.  
    82.  
    83.     id: btn
    84.     text:"Submit"
    85.     style: ButtonStyle{
    86.         background: Rectangle {
    87.             implicitWidth: 350
    88.             implicitHeight: 53
    89.             radius: 10.0
    90.             border.width: control.activeFocus ? 2 : 1
    91.                        border.color: "#888"
    92.                        gradient: Gradient {
    93.                            GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
    94.                            GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
    95.                        }
    96.             color:"gold"
    97.             ColorAnimation on color { to: "lightblue"; duration: 3000 }
    98.  
    99.         }
    100.     }
    101. }
    102.  
    103. Button{
    104.  
    105.  
    106.     id: btn1
    107.     text:"forgot password"
    108.     style: ButtonStyle{
    109.         background: Rectangle {
    110.             implicitWidth: 350
    111.             implicitHeight: 53
    112.             radius: 10.0
    113.             border.width: control.activeFocus ? 2 : 1
    114.                        border.color: "#888"
    115.                        gradient: Gradient {
    116.                            GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
    117.                            GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
    118.                        }
    119.             color:"gold"
    120.             ColorAnimation on color { to: "lightblue"; duration: 3000 }
    121.  
    122.         }
    123.     }
    124. }
    125.  
    126.  
    127.         }
    128.  
    129.     }
    130. }
    To copy to clipboard, switch view to plain text mode 
    Last edited by anda_skoa; 1st November 2015 at 21:28. Reason: missing [code] tags
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Similar Threads

  1. Using Qt Quick 1 code model instead of Qt Quick 2; Invalid property name 'onNavigatio
    By TheIndependentAquarius in forum Qt Tools
    Replies: 3
    Last Post: 5th July 2016, 16:13
  2. problem with qt quick designer
    By davod in forum Qt Tools
    Replies: 0
    Last Post: 13th March 2014, 19:38
  3. Problem on multi-pages preview with QGraphicsScene
    By lni in forum Qt Programming
    Replies: 1
    Last Post: 31st August 2013, 06:30
  4. Problem with building Qt quick application
    By Taspa in forum Qt Quick
    Replies: 2
    Last Post: 30th November 2010, 23:03
  5. Problem with changing stackedwidget pages by QAction
    By dejvis in forum Newbie
    Replies: 2
    Last Post: 17th May 2009, 21:58

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules

Qt is a trademark of The Qt Company.