qml multi step form wizard
Unsolved
QML and Qt Quick
-
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" } } } }
-
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