Layout Items

QML provides a flexible way to layout items using anchors. The concept of anchoring is fundamental to Item, and is available to all visual QML elements. Anchors act like a contract and are stronger than competing geometry changes. Anchors are expressions of relativeness; you always need a related element to anchor with.

Layout Items - 图1

An element has 6 major anchor lines (top, bottom, left, right, horizontalCenter, verticalCenter). Additionally, there is the baseline anchor for text in Text elements. Each anchor line comes with an offset. In the case of the top, bottom, left, and right anchors, they are called margins. For horizontalCenter, verticalCenter and baseline they are called offsets.

Layout Items - 图2

  • (1) An element fills a parent element.

    1. GreenSquare {
    2.     BlueSquare {
    3.         width: 12
    4.         anchors.fill: parent
    5.         anchors.margins: 8
    6.         text: '(1)'
    7.     }
    8. }

  • (2) An element is left aligned to the parent.

    1. GreenSquare {
    2.     BlueSquare {
    3.         width: 48
    4.         y: 8
    5.         anchors.left: parent.left
    6.         anchors.leftMargin: 8
    7.         text: '(2)'
    8.     }
    9. }

  • (3) An element’s left side is aligned to the parent’s right side.

    1. GreenSquare {
    2.     BlueSquare {
    3.         width: 48
    4.         anchors.left: parent.right
    5.         text: '(3)'
    6.     }
    7. }

  • (4) Center-aligned elements. Blue1 is horizontally centered on the parent. Blue2 is also horizontally centered, but on Blue1, and its top is aligned to the Blue1 bottom line.

    1. GreenSquare {
    2.     BlueSquare {
    3.         id: blue1
    4.         width: 48; height: 24
    5.         y: 8
    6.         anchors.horizontalCenter: parent.horizontalCenter
    7.     }
    8.     BlueSquare {
    9.         id: blue2
    10.         width: 72; height: 24
    11.         anchors.top: blue1.bottom
    12.         anchors.topMargin: 4
    13.         anchors.horizontalCenter: blue1.horizontalCenter
    14.         text: '(4)'
    15.     }
    16. }

  • (5) An element is centered on a parent element

    1. GreenSquare {
    2.     BlueSquare {
    3.         width: 48
    4.         anchors.centerIn: parent
    5.         text: '(5)'
    6.     }
    7. }

  • (6) An element is centered with a left-offset on a parent element using horizontal and vertical center lines

    1. GreenSquare {
    2.     BlueSquare {
    3.         width: 48
    4.         anchors.horizontalCenter: parent.horizontalCenter
    5.         anchors.horizontalCenterOffset: -12
    6.         anchors.verticalCenter: parent.verticalCenter
    7.         text: '(6)'
    8.     }
    9. }

Hidden Gems

Our squares have been magically enhanced to enable dragging. Try the example and drag around some squares. You will see that (1) can’t be dragged as it’s anchored on all sides (although you can drag the parent of (1), as it’s not anchored at all). (2) can be vertically dragged, as only the left side is anchored. The same applies to (3). (4) can only be dragged vertically, as both squares are horizontally centered. (5) is centered on the parent, and as such, can’t be dragged. The same applies to (7). Dragging an element means changing its x,y position. As anchoring is stronger than setting the x,y properties, dragging is restricted by the anchored lines. We will see this effect later when we discuss animations.