앵커를 사용한 위치 지정

전통적인 Grid, Row, Column 외에도 Qt Quick 에서도 앵커 개념을 사용하여 항목을 레이아웃하는 방법을 제공합니다. 각 항목에는 보이지 않는 7개의 "앵커 라인" 세트가 있다고 생각할 수 있습니다: left, horizontalCenter, right, top, verticalCenter, baseline, bottom 입니다.

기준선(위 그림에 표시되지 않음)은 텍스트가 놓일 가상의 선에 해당합니다. 텍스트가 없는 항목의 경우 상단과 동일합니다.

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은 또 다른 편의 앵커로 대상 항목의 수직중심과 수평중심에 수직Center 및 수평중심 앵커를 설정하는 것과 동일한 기능입니다.

앵커 여백 및 오프셋

앵커링 시스템을 사용하면 항목의 앵커에 여백 및 오프셋을 지정할 수도 있습니다. 여백은 항목의 앵커 바깥쪽에 남길 빈 공간을 지정하는 반면, 오프셋은 중앙 앵커 라인을 사용하여 위치를 조작할 수 있도록 합니다. leftMargin , rightMargin, topMargin 및 bottomMargin 을 통해 항목의 앵커 여백을 개별적으로 지정하거나 anchors.margins 을 사용하여 네 가장자리 모두에 동일한 여백 값을 지정할 수 있습니다. 앵커 오프셋은 horizontalCenterOffset, verticalCenterOffset 및 baselineOffset 을 사용하여 지정합니다.

다음 예는 왼쪽 여백을 지정합니다:

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

이 경우 rect2의 왼쪽에 5픽셀의 여백이 예약되어 다음과 같은 결과가 생성됩니다:

앵커 변경

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
}

앵커는 자바스크립트 내에서 필수적으로 변경할 수도 있습니다. 그러나 이러한 변경은 신중하게 수행해야 하며, 그렇지 않으면 예기치 않은 결과가 발생할 수 있습니다. 다음 예시는 이 문제를 설명합니다:

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

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

reanchorToRight 이 호출되면 이 함수는 먼저 오른쪽 앵커를 설정합니다. 이 시점에서 왼쪽 및 오른쪽 앵커가 모두 설정되고 항목이 가로로 늘어나 상위 항목을 채웁니다. 왼쪽 앵커가 설정 해제되면 새 너비는 그대로 유지됩니다. 따라서 자바스크립트 내에서 앵커를 업데이트할 때는 아래 그림과 같이 더 이상 필요하지 않은 앵커를 먼저 설정 해제하고 필요한 앵커만 새로 설정해야 합니다:

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 을 설정하는 경우에도 마찬가지입니다. 항목의 x 및 y 속성을 설정할 수 있는 행 및 그리드 등의 포지셔너를 사용하는 경우에도 마찬가지입니다. 앵커 기반 위치 지정에서 절대 위치 지정으로 변경하려면 앵커 값을 undefined 으로 설정하여 지우면 됩니다.