Using property expressions for all positioning can quickly become cumbersome. Anchors provide an alternative to explicitly positioning items, by allowing you to declaring a relationships between one item and another.

You can achieve the previous example using anchors like this:

Rectangle {
    width: 100; height: 100
    color: #orange
    radius: 2
    
    Rectangle {
        anchor centerX
        anchor bottom
        width: 50; height: 50
        color: #lightblue
    }
}

Anchors and explicit values can be mixed. We used the width and height properties to specify the size, but used anchors to set the position. Just like with property expressions, the position is correctly updated as the the orange rectangle's size changes.

Anchors can be chained together to create more complex layouts.

Rectangle as icon {
    anchor left = 10
    width: 30; height: 30
    color: #lightblue
}

Text {
    anchor left = icon.right + 8
    anchor right = more.left - 8
    text: "Samantha Louise Applebee"
}

Ellipse as more {
    anchor right = parent.right - 10
    width: 20; height: 20
    color: #lightblue
}

This is the general form of an anchor.

anchor Attribute = Coefficient * Source Attribute + Constant

The available attributes are left, centerX, right, boundsX, top, centerY, bottom, boundsY, width, height, center, bounds and size.

For each attribute, there is also a equivalent for the same value in the item's safe area. They are named safeAreaLeft, safeAreaCenterX, safeAreaRight, safeAreaBoundsX, safeAreaTop, safeAreaCenterY, safeAreaBottom, safeAreaBoundsY, safeAreaWidth, safeAreaHeight, safeAreaCenter, safeAreaBounds and safeAreaSize.