Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Vary spacing in QML Row

Vary spacing in QML Row

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 1.2k Views
  • 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 Offline
    C Offline
    Circuits
    wrote on last edited by
    #1

    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
    0
    • MarkkyboyM Offline
      MarkkyboyM Offline
      Markkyboy
      wrote on last edited by Markkyboy
      #2

      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
      3
      • MarkkyboyM Offline
        MarkkyboyM Offline
        Markkyboy
        wrote on last edited by
        #3
        This post is deleted!
        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved