Qt Quick - 포지셔닝의 중요 개념

QML의 시각적 항목은 다양한 방식으로 위치를 지정할 수 있습니다. 가장 중요한 위치 지정 관련 개념은 특정 경계에서 항목을 서로 고정(또는 부착)할 수 있는 상대적 위치 지정의 한 형태인 앵커링입니다. 다른 포지셔닝 개념으로는 절대 포지셔닝, 좌표 바인딩을 사용한 포지셔닝, 포지셔너, 레이아웃 등이 있습니다.

수동 위치 지정

항목은 수동으로 위치를 지정할 수 있습니다. 사용자 인터페이스가 정적일 경우 수동 위치 지정이 가장 효율적인 위치 지정 방식입니다.

모든 사용자 인터페이스에서 시각적 유형은 화면 좌표의 특정 위치에 어느 순간에나 존재합니다. 유동적으로 움직이는 동적 사용자 인터페이스가 Qt Quick 의 주요 초점이지만, 정적으로 배치된 사용자 인터페이스도 여전히 실행 가능한 옵션입니다. 또한 이러한 유형의 위치가 변경되지 않는 경우 다음 섹션에서 설명하는 동적 위치 지정 방법을 사용하는 것보다 수동으로 위치를 지정하는 것이 더 효율적일 수 있습니다.

Qt Quick 에서 모든 시각적 객체는 Qt Quick 시각적 캔버스에서 제공하는 좌표계 내에 위치합니다. 해당 문서에 설명된 대로 시각적 객체의 x 및 y 좌표는 시각적 부모의 좌표에 상대적이며 왼쪽 상단 모서리의 좌표는 (0, 0)입니다.

따라서 다음 예제에서는 수동으로 배치된 두 개의 직사각형을 표시합니다:

import QtQuick 2.0

Item {
    width: 200
    height: 200

    Rectangle {
        x: 50
        y: 50
        width: 100
        height: 100
        color: "green"
     }

     Rectangle {
        x: 100
        y: 100
        width: 50
        height: 50
        color: "yellow"
     }
}

바인딩으로 위치 지정

시각적 캔버스에서 해당 위치와 관련된 속성에 바인딩 표현식을 할당하여 항목의 위치를 지정할 수도 있습니다. 이 유형의 위치 지정은 가장 동적이지만, 이러한 방식으로 항목을 배치할 경우 약간의 성능 비용이 발생합니다.

시각적 개체의 위치와 치수는 속성 바인딩을 통해서도 설정할 수 있습니다. 이 경우 바인딩의 종속성이 변경되면 값이 자동으로 업데이트된다는 장점이 있습니다. 예를 들어 한 직사각형의 너비는 옆에 있는 직사각형의 너비에 따라 달라질 수 있습니다.

바인딩은 동적 레이아웃을 만드는 매우 유연하고 직관적인 방법을 제공하지만, 이와 관련된 약간의 성능 비용이 발생하므로 가능한 경우 깨끗한 앵커 레이아웃을 선호해야 합니다.

앵커

앵커를 사용하면 항목의 앵커 포인트(경계) 중 하나 이상을 다른 항목의 앵커 포인트에 연결하여 항목을 다른 항목에 인접하거나 내부에 배치할 수 있습니다. 이러한 앵커는 항목 중 하나의 크기나 위치가 변경되더라도 유지되므로 매우 동적인 사용자 인터페이스를 구현할 수 있습니다.

시각적 객체는 다양한 앵커 포인트(또는 더 정확하게는 앵커 라인)를 가진 것으로 생각할 수 있습니다. 다른 항목을 해당 지점에 앵커링할 수 있으며, 이는 어떤 개체가 변경되면 해당 개체에 앵커링된 다른 개체가 자동으로 조정되어 앵커링을 유지한다는 것을 의미합니다.

Qt Quick 는 앵커를 최상위 개념으로 제공합니다. 이 주제에 대한 자세한 내용은 앵커를 사용한 위치 지정에 대한 문서를 참조하세요.

앵커 기반 레이아웃은 깔끔한 경우 일반적으로 바인딩 기반 레이아웃보다 훨씬 성능이 뛰어나다는 점에 유의하세요. "깨끗한" 앵커 레이아웃은 앵커(객체 중첩 포함)만 사용하여 위치를 결정하는 레이아웃인 반면, "오염된" 앵커 레이아웃은 앵커와 바인딩(위치 관련 [x,y] 속성 또는 치수 관련 [너비,높이] 속성)을 모두 사용하여 위치를 결정하는 레이아웃입니다.

포지셔너

Qt Quick 는 몇 가지 기본 제공 포지셔너 항목도 제공합니다. 많은 사용 사례에서 가장 적합한 포지셔너는 간단한 그리드, 행 또는 열이며, Qt Quick 에서는 이러한 형식에 가장 효율적인 방식으로 자식을 배치하는 항목을 제공합니다. 사전 정의된 포지셔너를 활용하는 방법에 대한 자세한 내용은 항목 포지셔너 유형에 대한 문서를 참조하세요.

레이아웃

Qt 5.1부터 Qt Quick 레이아웃 모듈을 사용하여 사용자 인터페이스에서 Qt Quick 항목을 정렬할 수도 있습니다. 포지셔너와 달리 Qt Quick 레이아웃의 유형은 선언적 인터페이스에서 항목의 위치와 크기를 모두 관리합니다. 크기 조정이 가능한 사용자 인터페이스에 적합합니다.

오른쪽에서 왼쪽 지원

언어의 서면 형식의 방향성은 사용자 인터페이스의 시각적 유형이 어떻게 배치되어야 하는지에 큰 영향을 미치는 경우가 많습니다. Qt Quick 는 오른쪽에서 왼쪽으로 텍스트 레이아웃뿐만 아니라 미리 정의된 레이아웃을 통해 유형의 오른쪽에서 왼쪽 위치 지정을 지원합니다.

이 주제에 대한 자세한 내용은 오른쪽에서 왼쪽 지원에 대한 문서( Qt Quick )를 참조하세요.