Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Vary spacing in QML Row



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

    Capture.JPG



  • This post is deleted!

Log in to reply