Размещение с помощью якорей

Помимо более традиционных сеток, строк и столбцов, Qt Quick также предоставляет способ размещения элементов с использованием концепции якорей. Каждый элемент можно представить как имеющий набор из 7 невидимых «линий якоря»: левый, горизонтальный центр, правый, верхний, вертикальный центр, базовая линия и нижний.

Базовая линия (не показана выше) соответствует воображаемой линии, на которой располагается текст. Для элементов без текста она совпадает с верхним якорем.

Система якорей Qt Quick позволяет определять отношения между линиями якорей различных элементов. Например, можно написать:

Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; ... }

В этом случае левая граница rect2 привязана к правой границе rect1, что приводит к следующему:

Можно указать несколько якорей. Например:

Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... }

Указав несколько горизонтальных или вертикальных якорей, можно управлять размером элемента. Ниже rect2 привязан к правому краю rect1 и левому краю rect3. Если любой из синих прямоугольников перемещается, rect2 будет растягиваться и сжиматься по мере необходимости:

Rectangle { id: rect1; x: 0; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... }
Rectangle { id: rect3; x: 150; ... }

Также существуют некоторые удобные якоря. anchors.fill — это удобство, которое эквивалентно установке якорей слева, справа, сверху и снизу к левому, правому, верхнему и нижнему якорям целевого элемента. anchors.centerIn — еще один удобный якорь, эквивалентный установке якорей вертикального и горизонтального центров к вертикальному и горизонтальному центрам целевого элемента.

Поля и смещения якорей

Система якорей также позволяет задавать поля и смещения для якорей элемента. Поля задают количество свободного места, которое нужно оставить по внешним краям якоря элемента, а смещения позволяют изменять позиционирование с использованием центральных линий якорей. Элемент может задать свои поля якорей индивидуально через leftMargin, rightMargin, topMargin и bottomMargin, или использовать anchors.margins для задания одного значения поля для всех четырех границ. Смещения якорей задаются с помощью horizontalCenterOffset, verticalCenterOffset и baselineOffset.

Следующий пример задает левое поле:

Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... }

В этом случае отступом слева от rect2 будет 5 пикселей, что приведет к следующему:

Примечание: Поля якорей применяются только к якорям; они не являются общим способом применения полей к элементу Item. Если для грани задано поле якоря, но элемент не привязан к элементу на этой грани, поле не применяется.

Изменение якорей

Qt Quick предоставляет тип AnchorChanges для задания якорей в состоянии.

State {
    name: "anchorRight"
    AnchorChanges {
        target: rect2
        anchors.right: parent.right
        anchors.left: undefined  //remove the left anchor
    }
}

AnchorChanges можно анимировать с помощью типа AnchorAnimation.

Transition {
    AnchorAnimation {}  //animates any AnchorChanges in the corresponding state change
}

Якоря также можно изменять императивно в JavaScript. Однако эти изменения должны быть тщательно упорядочены, иначе могут возникнуть неожиданные результаты. Следующий пример иллюстрирует эту проблему:

//bad code
Rectangle {
    width: 50
    anchors.left: parent.left

    function reanchorToRight() {
        anchors.right = parent.right
        anchors.left = undefined
    }
}

Когда reanchorToRight вызывается, функция сначала устанавливает правый якорь. В этот момент и левый, и правый якоря установлены, и элемент будет растягиваться по горизонтали, чтобы заполнить свой родительский элемент. Когда левый якорь снимается, новая ширина сохраняется. Таким образом, при обновлении якорей в JavaScript вы должны сначала снять все якоря, которые больше не нужны, и только затем установить новые необходимые якоря, как показано ниже:

Rectangle {
    width: 50
    anchors.left: parent.left

    function reanchorToRight() {
        anchors.left = undefined
        anchors.right = parent.right
    }
}

Поскольку порядок оценки связей не определен, не рекомендуется изменять якоря с помощью условных связей, так как это может привести к упомянутой выше проблеме порядка. В следующем примере прямоугольник в конечном итоге будет занимать всю ширину родительского элемента, поскольку левый и правый якоря будут одновременно установлены во время обновления связей.

//bad code
Rectangle {
    width: 50; height: 50
    anchors.left: state == "right" ? undefined : parent.left;
    anchors.right: state == "right" ? parent.right : undefined;
}

Вместо этого следует использовать AnchorChanges, так как AnchorChanges автоматически управляет проблемами порядка внутри себя.

Ограничения

По соображениям производительности вы можете привязывать элемент только к своим братьям и непосредственному родителю. Например, следующий якорь недопустим и вызовет предупреждение:

//bad code
Item {
    id: group1
    Rectangle { id: rect1; ... }
}
Item {
    id: group2
    Rectangle { id: rect2; anchors.left: rect1.right; ... }    // invalid anchor!
}

Кроме того, макеты на основе якорей не могут быть смешаны с абсолютным позиционированием. Если элемент задает свое положение x и также устанавливает anchors.left, или устанавливает левые и правые границы, но дополнительно задает width, результат неопределен, поскольку неясно, следует ли элементу использовать привязку или абсолютное позиционирование. То же самое можно сказать о задании позиции элемента y и высоты height с помощью anchors.top и anchors.bottom, или установки anchors.fill вместе с width или height. То же самое относится к использованию позиционеров, таких как Row и Grid, которые могут задавать свойства элемента x и y. Если вы хотите перейти от использования привязки к абсолютной позиции, вы можете очистить значение якоря, установив его в undefined.