Vary spacing in QML Row

Circuits

How do I specify the spacing between elements in a row? I know I can set the spacing like follows:

Row {
    spacing: 2
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }
}

but that will give me equal spacing between each element. What if I want the first rectangle to be 50 pixels away from the next two? How do I do that?

Markkyboy

By nesting each rectangle you want to space, as follows;

    Row { spacing: 10
        Rectangle { color: "red"; width: 50; height: 50
                 Label {
                     text: "<b>10 --></b>"
                     anchors.centerIn: parent
                 }
            }
            Row { spacing: 20
                Rectangle { color: "orange"; width: 50; height: 50
                    Label {
                        text: "<b>20 --></b>"
                        anchors.centerIn: parent
                    }
                }
                Row { spacing: 30
                    Rectangle { color: "yellow"; width: 50; height: 50
                        Label {
                            text: "<b>30 --></b>"
                            anchors.centerIn: parent
                        }
                    }
                    Row { spacing: 40
                        Rectangle { color: "green"; width: 50; height: 50
                            Label {
                                text: "<b>40 --></b>"
                                anchors.centerIn: parent
                            }
                        }
                        Row { spacing: 50
                            Rectangle { color: "blue"; width: 50; height: 50
                                Label {
                                    text: "<b>50 --></b>"
                                    anchors.centerIn: parent
                                }
                            }
                            Row { spacing: 60
                                Rectangle { color: "indigo"; width: 50; height: 50
                                    Label {
                                        text: "<b>60 --></b>"
                                        anchors.centerIn: parent
                                    }
                                }
                                Row { Rectangle { color: "violet"; width: 50; height: 50 }}
                            }
                        }
                    }
                }
            }
        }
    }

Markkyboy

This post is deleted!

Solved Vary spacing in QML Row