QML Row Element

The Row item arranges its children horizontally. More...

Inherits Item

Properties

• add : Transition
• move : Transition
• spacing : int

Detailed Description

The Row item positions its child items so that they are horizontally aligned and not overlapping.

Use spacing to set the spacing between items in a Row, and use the add and move properties to set the transitions that should be applied when items are added to, removed from, or re-positioned within the Row.

See Using QML Positioner and Repeater Items for more details about this item and other related items.

Example Usage

The following example lays out differently shaped rectangles using a Row.

 import Qt 4.7

 Row {
     spacing: 2
     Rectangle { color: "red"; width: 50; height: 50 }
     Rectangle { color: "green"; width: 20; height: 50 }
     Rectangle { color: "blue"; width: 50; height: 20 }
 }

Using Transitions

Transitions can be used to animate items that are added to, moved within, or removed from a Grid item. The add and move properties can be set to the transitions that will be applied when items are added to, removed from, or re-positioned within a Row item.

Limitations

Note that the positioner assumes that the x and y positions of its children will not change. If you manually change the x or y properties in script, bind the x or y properties, use anchors on a child of a positioner, or have the width of a child depend on the position of a child, then the positioner may exhibit strange behaviour. If you need to perform any of these actions, consider positioning the items without the use of a Row.

Items with a width or height of 0 will not be positioned.

See also Column, Grid, Flow, and Positioners example.

Property Documentation

 Row {
     id: positioner
     move: Transition {
         NumberAnimation {
             properties: "x"
             ease: "easeOutBounce"
         }
     }
 }