Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. qml multi step form wizard
QtWS25 Last Chance

qml multi step form wizard

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 2 Posters 860 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • N Offline
    N Offline
    neda
    wrote on last edited by neda
    #1

    Hi,
    I want to create multi step form wizard like this link.
    Please guide me.

    Rectangle{
            RowLayout{
                Layout.bottomMargin: 10
    
                Rectangle{
                    width: 24
                    height: 24
                    color:"white"
                    radius: 12
                    Text {
                        text:"1"
                        font{
                            pointSize: 12
                        }
                        color: "#333"
                    }
                }
                Text {
                    text:"Account Setup"
                    font{
                        pointSize: 11
                    }
                    color: "white"
                }
                Rectangle{
                    width: 24
                    height: 24
                    color:"white"
                    radius: 12
                    Text {
                        text:"1"
                        font{
                            pointSize: 12
                        }
                        color: "#333"
                    }
                }
                Text {
                    text:"Social Profiles"
                }
                Rectangle{
                    width: 24
                    height: 24
                    color:"white"
                    radius: 12
                    Text {
                        text:"1"
                        font{
                            pointSize: 12
                        }
                        color: "#333"
                    }
                }
                Text {
                    text:"Personal Details"
                }
            }
            Loader { sourceComponent: step1 }
            Component {
                id: step1
                Rectangle {
                    id:rectstep1
                    width:0.9*parent.width
                    height: 0.9*parent.height
                    color:"white"
                    radius: 8
                    Text {
                        font{
                            pointSize: 15
                        }
                        style: {
                            color: "#2C3E50"
                            bottomMargin:10
                        }
                        text:"titr step1"
                    }
                    Text {
                        font{
                            pointSize: 15
                        }
                        style: {
                            color: "#666"
                            bottomMargin:20
                        }
                        text:"This is step 1"
                    }
    
                    TextField{
                        placeholderText:"Name"
                    }
                    TextField{
                        placeholderText:"Family"
                    }
                    TextField{
                        placeholderText:"Email"
                    }
    
                    Button{
                        id:nextbutton
                        style: ButtonStyle{
                            background: Rectangle {
                                implicitWidth: 100
                                implicitHeight: 35
                                color:"#27AE60"
    
                                radius: 1
                            }
                            label: Text {
                                renderType: Text.NativeRendering
                                verticalAlignment: Text.AlignVCenter
                                horizontalAlignment: Text.AlignHCenter
                                font{
                                    pointSize: 12
                                    bold: true
                                }
                                color: "white"
                                text:"Next"
                            }
    
                        }
    
                    }
                    DropShadow {
                        id: btnshadow
                        source: nextbutton
                        anchors.fill: source
                        width: source.width
                        height: source.height
                        cached: true
                        radius: 8.0
                        samples: 16
                        color: "#80000000"
                        smooth: true
                    }
                    DropShadow {
                        id: btnshadow2
                        source: rectstep1
                        anchors.fill: source
                        width: source.width
                        height: source.height
                        cached: true
                        radius: 8.0
                        samples: 16
                        color: "#80000000"
                        smooth: true
                    }
    
                }
            }
            Component {
                id: step2
                Rectangle {
                    Text {
                        text:"titr step2"
                    }
                    Text {
                        text:"This is step 2"
                    }
    
                    TextField{
                        placeholderText:"Name"
                    }
                    TextField{
                        placeholderText:"Family"
                    }
                    TextField{
                        placeholderText:"Email"
                    }
                    Button{
                        text:"Previous"
                    }
                    Button{
                        text:"Next"
                    }
                }
            }
            Component {
                id: step3
                Rectangle {
                    Text {
                        text:"titr step3"
                    }
                    Text {
                        text:"This is step 3"
                    }
    
                    TextField{
                        placeholderText:"Name"
                    }
                    TextField{
                        placeholderText:"Family"
                    }
                    TextField{
                        placeholderText:"Email"
                    }
                    Button{
                        text:"Previous"
                    }
                    Button{
                        text:"Finish"
                    }
                }
            }
        }
    
    
    1 Reply Last reply
    0
    • ekkescornerE Offline
      ekkescornerE Offline
      ekkescorner
      Qt Champions 2016
      wrote on last edited by
      #2

      if your app is a mobile app, you should think about Qt Quick Controls 2 StackView or SwipeView to navigate.
      I just blogged about StackView: http://bit.ly/qt-stacked-pages-x
      blog about SwipeView will be next

      ekke ... Qt Champion 2016 | 2024 ... mobile business apps
      5.15 --> 6.8 https://t1p.de/ekkeChecklist
      QMake --> CMake https://t1p.de/ekkeCMakeMobileApps

      1 Reply Last reply
      1

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved