多步表单向导

Question

我正在使用Windows 10的Qt 5.6.0版。我想创建多步骤表单向导，其中包含3个步骤：link。

我使用了这个代码（为3步创建了3个组件），但我没有一个好的设计。 我的代码的结果：link

Rectangle{
    width:0.4*parent.width
    height:0.4*parent.height
    anchors.centerIn: parent
    color:"white"
    ColumnLayout{
        spacing: 0;anchors.fill: parent            
        Rectangle{
            id:rectTop
            Layout.fillWidth: true;height: 0.05*parent.height                
            color:"transparent"
            GridLayout{
                rows: 2;columns: 3                    
                Layout.bottomMargin: 10;anchors.fill: parent                    
                Rectangle{
                    width: 24;height: 24                        
                    color:"#27AE60";radius: 12                        
                    Text {id:textDialog
                        text:"1";color: "white"
                        font{
                            pointSize: 12
                        }                            
                    }
                }
                Text {
                    text:"Account Setup";color: "white"
                    font{
                        pointSize: 11
                    }                        
                }
                Rectangle{
                    width: 24;height: 24;color:"#27AE60"
                    radius: 12
                    Text {
                        text:"1";color: "white"
                        font{
                            pointSize: 12
                        }
                    }
                }
                Text {
                    text:"Social Profiles"
                }
                Rectangle{
                    width: 24;height: 24                        
                    color:"#27AE60";radius: 12                        
                    Text {
                        horizontalAlignment: parent.Center
                        text:"1";color: "white"
                        font{
                            pointSize: 12
                        }                            
                    }
                }
                Text {
                    text:"Personal Details"
                }
            }
        }

        Loader {
            anchors.top: rectTop.bottom
            width:parent.width;height: parent.height-rectTop.height                
            sourceComponent: step1
        }
        Component {
            id: step1
            Rectangle {
                id:rectstep1
                Layout.fillWidth: true
                Layout.fillHeight: true
                color:"white";radius: 8
                ColumnLayout{
                    Text {
                        horizontalAlignment: parent.Center
                        width: parent.width;text:"titr step1"
                        font{
                            pointSize: 10
                        }
                        style: {
                            color: "#2C3E50"
                            bottomMargin:10
                        }                            
                    }
                    Text {
                        font{
                            pointSize: 8
                        }
                        style: {
                            color: "#666";bottomMargin:20                                
                        }
                        text:"This is step 1"
                    }

                    TextField{
                        placeholderText:"Name"
                        width: parent.width
                        style: TextFieldStyle{
                            padding.left: 12;
                            font {
                                pointSize: 13;
                            }
                            background: Rectangle {
                                id:rex
                                width: parent.width;radius: 4
                                border {
                                    width: 1;
                                    color: "#ccc";
                                }                                    
                            }
                        }
                    }
                    TextField{
                        placeholderText:"Family"
                        width: parent.width
                        style: TextFieldStyle{
                            padding.left: 12;
                            font {
                                pointSize: 13;
                            }
                            background: Rectangle {
                                id:rex
                                width: parent.width; radius: 4
                                border {
                                    width: 1;color: "#ccc";                                        
                                }                                   
                            }
                        }
                    }
                    TextField{
                        placeholderText:"Email"
                        width: parent.width
                        style: TextFieldStyle{
                            padding.left: 12;
                            font {
                                pointSize: 13;
                            }
                            background: Rectangle {                                    
                                width: parent.width;radius: 4
                                border {
                                    width: 1; color: "#ccc";
                                }                                    
                            }
                        }
                    }

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