Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Solved Vary spacing in QML Row

    QML and Qt Quick
    2
    3
    283
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      Circuits last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • Markkyboy
        Markkyboy last edited by 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 }}
                                    }
                                }
                            }
                        }
                    }
                }
            }
        

        Capture.JPG

        1 Reply Last reply Reply Quote 3
        • Markkyboy
          Markkyboy last edited by

          This post is deleted!
          1 Reply Last reply Reply Quote 0
          • First post
            Last post