앵커를 이용한 위치 지정

기존의 ` Grid`, ` Row`, ` Column` 외에도, ` Qt Quick `는 앵커 개념을 활용하여 항목을 레이아웃하는 방법을 제공합니다. 각 항목은 7개의 보이지 않는 "앵커 라인" 세트를 가지고 있다고 볼 수 있습니다: ` left`, ` horizontalCenter`, ` right`, ` top`, ` verticalCenter`, ` baseline`, ` bottom`.

기준선(위 그림에는 표시되지 않음)은 텍스트가 배치되는 가상의 선을 의미합니다. 텍스트가 없는 항목의 경우, 이 값은 top과 동일합니다.

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 `는 또 다른 편의 앵커로, ` verticalCenter ` 및 ` horizontalCenter ` 앵커를 대상 항목의 ` verticalCenter ` 및 ` horizontalCenter `에 설정하는 것과 동일합니다.

앵커 여백 및 오프셋

이 앵커링 시스템에서는 항목의 앵커에 대해 여백과 오프셋을 지정할 수도 있습니다. 여백은 항목 앵커 바깥쪽에 남겨둘 빈 공간의 크기를 지정하는 반면, 오프셋을 사용하면 중심 앵커 선을 통해 위치를 조정할 수 있습니다. 항목은 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
}

앵커는 자바스크립트 내에서 명령형 방식으로 변경할 수도 있습니다. 그러나 이러한 변경은 순서를 신중하게 정해야 하며, 그렇지 않으면 예상치 못한 결과가 발생할 수 있습니다. 다음 예제는 이 문제를 보여줍니다:

// May produce unexpected results
Rectangle {
    width: 50
    anchors.left: parent.left

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

reanchorToRight 가 호출되면, 함수는 먼저 오른쪽 앵커를 설정합니다. 이 시점에서 왼쪽과 오른쪽 앵커가 모두 설정되어, 항목은 부모 요소를 채우기 위해 가로 방향으로 늘어나게 됩니다. 왼쪽 앵커를 해제해도 새로운 너비는 유지됩니다. 따라서 자바스크립트 내에서 앵커를 업데이트할 때는, 더 이상 필요하지 않은 앵커를 먼저 해제한 다음, 필요한 새로운 앵커만 설정해야 합니다. 아래 예제와 같이 말이죠:

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

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

바인딩의 평가 순서가 정의되어 있지 않기 때문에, 조건부 바인딩을 통해 앵커를 변경하는 것은 권장되지 않습니다. 이는 앞서 설명한 순서 문제를 야기할 수 있기 때문입니다. 다음 예제에서 ` Rectangle `은 바인딩 업데이트 중에 왼쪽 및 오른쪽 앵커가 동시에 설정되므로, 결국 부모 요소의 전체 너비까지 확장될 것입니다.

// May produce unexpected results
Rectangle {
    width: 50; height: 50
    anchors.left: state == "right" ? undefined : parent.left;
    anchors.right: state == "right" ? parent.right : undefined;
}

이 코드는 AnchorChanges 을 사용하도록 재작성해야 합니다. AnchorChanges 는 내부적으로 순서 문제를 자동으로 처리하기 때문입니다. 위 예제를 올바르게 재작성하는 방법은 다음과 같습니다:

// Correct code
Rectangle {
    id: rect
    width: 50; height: 50
    anchors.left: parent.left  // initial position

    states: State {
        name: "rightAligned"
        AnchorChanges {
            target: rect
            anchors.left: undefined
            anchors.right: parent.right
        }
    }
    function toggleAnchoring() {
        parent.state = (parent.state == "" ? "rightAligned" : "")
    }
}

제한 사항

성능상의 이유로, 항목을 형제 요소나 직접 상위 요소에만 앵커로 고정할 수 있습니다. 예를 들어, 다음 앵커는 유효하지 않으며 경고가 발생합니다:

//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 ` 속성을 설정할 수 있는 Row 및 Grid와 같은 포지셔너를 사용할 때도 동일한 원칙이 적용됩니다. 앵커 기반 위치 지정을 절대 위치 지정으로 변경하려면, 해당 값을 ` undefined`으로 설정하여 앵커 값을 지울 수 있습니다.