qml multi step form wizard



  • 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"
                    }
                }
            }
        }
    
    

  • Qt Champions 2016

    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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.