Qt Reference Documentation

QML Column Element

The Column item arranges its children vertically. More...

Inherits Item

  • List of all members, including inherited members
  • Properties

    Detailed Description

    The Column item positions its child items so that they are vertically aligned and not overlapping. Spacing between items can be added.

    The below example positions differently shaped rectangles using a Column.

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

    Column also provides for transitions to be set when items are added, moved, or removed in the positioner. Adding and removing apply both to items which are deleted or have their position in the document changed so as to no longer be children of the positioner, as well as to items which have their opacity set to or from zero so as to appear or disappear.

     Column {
         spacing: 2
         add: ...
         move: ...

    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 height 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 Column.

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

    See also Row and Positioners example.

    Property Documentation

    This property holds the transition to be applied when adding an item to the positioner. The transition will only be applied to the added item(s). Positioner transitions will only affect the position (x,y) of items.

    Added can mean that either the object has been created or reparented, and thus is now a child or the positioner, or that the object has had its opacity increased from zero, and thus is now visible.

    move : Transition

    This property holds the transition to apply when moving an item within the positioner. Positioner transitions will only affect the position (x,y) of items.

    This can happen when other items are added or removed from the positioner, or when items resize themselves.

     Column {
         move: Transition {
             NumberAnimation {
                 properties: "y"
                 easing.type: Easing.OutBounce

    spacing : int

    spacing is the amount in pixels left empty between each adjacent item, and defaults to 0.

    The below example places a Grid containing a red, a blue and a green rectangle on a gray background. The area the grid positioner occupies is colored white. The top positioner has the default of no spacing, and the bottom positioner has its spacing set to 2.


    Thank you for giving your feedback.

    Make sure it is related to this specific page. For more general bugs and requests, please use the Qt Bug Tracker.

    [0]; s.parentNode.insertBefore(ga, s); })();