Anchors

API ReferenceRendererItemAnchors

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


left

Type
Array

Source


onLeftChange()

Parameters
  • oldValue — Array
Type
Signal

Type
Array

Source


onRightChange()

Parameters
  • oldValue — Array
Type
Signal

horizontalCenter

Type
Array
Item {
    height: 100
    Rectangle { id: rect1; color: 'green'; width: 100; height: 100; }
    Rectangle {
        color: 'red'; width: 40; height: 40
        anchors.horizontalCenter: rect1.horizontalCenter
    }
}

Source


onHorizontalCenterChange()

Parameters
  • oldValue — Array
Type
Signal

top

Type
Array
Item {
    height: 100
    Rectangle { id: rect1; color: 'green'; width: 100; height: 100; }
    Rectangle {
        color: 'red'; width: 40; height: 40
        anchors.top: rect1.verticalCenter
    }
}

Source


onTopChange()

Parameters
  • oldValue — Array
Type
Signal

bottom

Type
Array

Source


onBottomChange()

Parameters
  • oldValue — Array
Type
Signal

verticalCenter

Type
Array
Item {
    height: 100
    Rectangle { id: rect1; color: 'green'; width: 100; height: 100; }
    Rectangle {
        color: 'red'; width: 40; height: 40
        anchors.verticalCenter: rect1.verticalCenter
    }
}

Source


onVerticalCenterChange()

Parameters
  • oldValue — Array
Type
Signal

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
    }
}

onCenterInChange()

Parameters
  • oldValue — Array
Type
Signal

Source


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
    }
}

onFillChange()

Parameters
  • oldValue — Array
Type
Signal

Source


fillWidth

Type
Array

onFillWidthChange()

Parameters
  • oldValue — Array
Type
Signal

Source


fillHeight

Type
Array

onFillHeightChange()

Parameters
  • oldValue — Array
Type
Signal

Source

results matching ""

    No results matching ""