Anchors

APIRendererItemAnchors

Source

Anchors describe position relations between two items.

Each item has few lines: top, bottom, verticalCenter, left, right, horizontalCenter.

Anchors give a posibility to say, that a line of the first item must be always in the same position as a line of the second item.

Anchors work only between siblings and in relation to the direct parent.

Item {
    height: 100
    Rectangle {
        id: rect1
        width: 100
        height: 100
        color: 'green'
    }
    Rectangle {
        width: 40
        height: 40
        color: 'red'
        anchors.left: rect1.right
    }
}

Source

Rectangle {
    width: 100
    height: 100
    color: 'green'
    Rectangle {
        width: 40
        height: 40
        color: 'red'
        anchors.left: parent.right
    }
}

Source

Horizontal anchors can't point to the vertical lines (and vice versa), so anchors.top = parent.left is not allowed.

Source

Anchors::left

Type:
Array

Source

Anchors::onLeftChange(oldValue)

Parameters:
  • oldValue — Array
Type:
Signal

Anchors::right

Type:
Array

Source

Anchors::onRightChange(oldValue)

Parameters:
  • oldValue — Array
Type:
Signal

Anchors::horizontalCenter

Type:
Array
<svg viewBox="0 0 1 1">
    <rect x="0.2" y="0.2" width="0.6" height="0.6" fill="lightgray" />
    <line x1="0.5" y1="0" x2="0.5" y2="1" stroke="black" stroke-width="0.01" />
</svg>
Item {
    height: 100
    Rectangle { id: rect1; color: 'green'; width: 100; height: 100; }
    Rectangle {
        color: 'red'; width: 40; height: 40
        anchors.horizontalCenter: rect1.horizontalCenter
    }
}

Source

Anchors::onHorizontalCenterChange(oldValue)

Parameters:
  • oldValue — Array
Type:
Signal

Anchors::top

Type:
Array
<svg viewBox="0 0 1 1">
    <rect x="0.2" y="0.2" width="0.6" height="0.6" fill="lightgray" />
    <line x1="0" y1="0.2" x2="1" y2="0.2" stroke="black" stroke-width="0.01" />
</svg>
Item {
    height: 100
    Rectangle { id: rect1; color: 'green'; width: 100; height: 100; }
    Rectangle {
        color: 'red'; width: 40; height: 40
        anchors.top: rect1.verticalCenter
    }
}

Source

Anchors::onTopChange(oldValue)

Parameters:
  • oldValue — Array
Type:
Signal

Anchors::bottom

Type:
Array
<svg viewBox="0 0 1 1">
    <rect x="0.2" y="0.2" width="0.6" height="0.6" fill="lightgray" />
    <line x1="0" y1="0.8" x2="1" y2="0.8" stroke="black" stroke-width="0.01" />
</svg>

Source

Anchors::onBottomChange(oldValue)

Parameters:
  • oldValue — Array
Type:
Signal

Anchors::verticalCenter

Type:
Array
<svg viewBox="0 0 1 1">
    <rect x="0.2" y="0.2" width="0.6" height="0.6" fill="lightgray" />
    <line x1="0" y1="0.5" x2="1" y2="0.5" stroke="black" stroke-width="0.01" />
</svg>
Item {
    height: 100
    Rectangle { id: rect1; color: 'green'; width: 100; height: 100; }
    Rectangle {
        color: 'red'; width: 40; height: 40
        anchors.verticalCenter: rect1.verticalCenter
    }
}

Source

Anchors::onVerticalCenterChange(oldValue)

Parameters:
  • oldValue — Array
Type:
Signal

Anchors::centerIn

Type:
Array

It's a shortcut for the horizontalCenter and verticalCenter anchors.

No target line is required.

Rectangle {
    id: rect1
    width: 100
    height: 100
    color: 'green'
    Rectangle {
        width: 40
        height: 40
        color: 'red'
        anchors.centerIn: parent
    }
}

Anchors::onCenterInChange(oldValue)

Parameters:
  • oldValue — Array
Type:
Signal

Source

Anchors::fill

Type:
Array

Changes item position and its size to be always equal the anchored target.

No target line is required.

Item {
    height: 100
    Rectangle { id: rect1; color: 'green'; width: 100; height: 100; }
    Rectangle {
        color: 'red'
        opacity: 0.5
        anchors.fill: rect1
    }
}

Anchors::onFillChange(oldValue)

Parameters:
  • oldValue — Array
Type:
Signal

Source

Anchors::fillWidth

Type:
Array

Anchors::onFillWidthChange(oldValue)

Parameters:
  • oldValue — Array
Type:
Signal

Source

Anchors::fillHeight

Type:
Array

Anchors::onFillHeightChange(oldValue)

Parameters:
  • oldValue — Array
Type:
Signal

Source