Vary spacing in QML Row
Solved
QML and Qt Quick
-
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?
-
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 }} } } } } } } }