Rows and Columns

The Row/Column element in QML are called positioners. They position their children horizontally/vertically in a line-up.

The Column and Row elements have the same properties: spacing, add and move. Spacing defines the space between positioned elements and add/move defines transitions when an element is added or moved (removed).

First a simple example using Row and Column. You need to take care that the Row and Column element can determine the size of the elements.

Note: In my first try I tried to set the Rectangles width based on the Columns width, which resulted in 0 width. As no element had any real width defined.

import Qt 4.6

Rectangle {
    width: 200
    height: 200

    Column { /* outer column */
      spacing: 10
      Text { text: "Column Element"}
      Column { /* inner column */
        x: 10; y: 10
        spacing: 10
        Rectangle { width: 40; height: 20; color: "red" }
        Rectangle { width: 40; height: 20; color: "green" }
        Rectangle { width: 40; height: 20; color: "blue" }
      }
      Text { text: "Row Element" }
      Row { /* inner row */
        spacing: 10
        Rectangle { width: 40; height: 20; color: "red" }
        Rectangle { width: 40; height: 20; color: "green" }
        Rectangle { width: 40; height: 20; color: "blue" }
      }
    }
}

The result looks like this:

Dynamic Positioners

For trying out a dynamic aspect, I added a mouse region, which cover the whole scene. When pressed two selected rectangles will get invisible. To animate the whole process I added a number animation to the move property to the outer column. As this is a Column, only ‘y’ as a matching property is interesting to us.

import Qt 4.6

Rectangle {
    width: 200
    height: 200

    Column {
      spacing: 10
      move: Transition {
               NumberAnimation {
                   matchProperties: "y"
                   easing: "easeLinear"
                   duration: 500
               }
           }
      Text { text: "Column Element"}
      Column {
        x: 10; y: 10
        spacing: 10
        Rectangle { width: 40; height: 20; color: "green" }
        Rectangle {
          width: 40; height: 20; color: "red"
          opacity: region.pressed? 0 : 1
        }
        Rectangle { width: 40; height: 20; color: "blue" }
      }
      Text { text: "Row Element" }
      Row {
        spacing: 10
        Rectangle { width: 40; height: 20; color: "green" }
        Rectangle {
          width: 40; height: 20; color: "red";
          opacity: region.pressed? 0 : 1
        }
        Rectangle { width: 40; height: 20; color: "blue" }
      }
    }
    MouseRegion {
      id: region
      anchors.fill: parent
    }
}

What happens now is that when you press the mouse region, two rectangles will change to invisible. The column will update it’s size and reposition the remaining rectangles. The repositioning is animated via the number animation. Please have a try and see for yourself.

If you ever wondered which easing curves are available. They are documented here.