qml multi step form wizard

neda

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

ekkescorner

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