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
Forum Updated to NodeBB v4.3 + New Features

Vary spacing in QML Row

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 884 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