Qt Quick 의 중요한 개념 - 위치 지정

QML의 시각적 항목은 다양한 방법으로 배치할 수 있습니다. 배치와 관련하여 가장 중요한 개념은 ‘앵커링(anchoring)’으로, 이는 항목들을 특정 경계에서 서로 고정(또는 연결)할 수 있는 상대적 배치 방식입니다. 그 밖의 배치 개념으로는 절대 배치, 좌표 바인딩을 이용한 배치, 포지셔너(positioner), 레이아웃 등이 있습니다.

수동 배치

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

어떤 사용자 인터페이스에서든 시각적 요소들은 특정 시점에 화면 좌표계의 특정 위치에 존재합니다. 유동적인 애니메이션과 동적인 사용자 인터페이스가 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"
     }
}

바인딩을 이용한 배치

항목은 시각적 캔버스 내 위치와 관련된 속성에 바인딩 표현식을 할당하여 배치할 수도 있습니다. 이러한 방식의 배치는 가장 동적이지만, 이 방법으로 항목을 배치할 경우 성능 저하가 다소 발생할 수 있습니다.

비주얼 객체의 위치와 크기도 속성 바인딩을 통해 설정할 수 있습니다. 이 방법의 장점은 바인딩의 종속성이 변경되면 값이 자동으로 업데이트된다는 점입니다. 예를 들어, 한 직사각형의 너비는 그 옆에 있는 직사각형의 너비에 따라 달라질 수 있습니다.

바인딩은 동적 레이아웃을 생성하는 매우 유연하고 직관적인 방법을 제공하지만, 이에 따른 성능 저하가 발생할 수 있으므로 가능한 경우 순수한 앵커(Anchor) 레이아웃을 우선적으로 사용하는 것이 좋습니다.

앵커

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

시각적 객체는 다양한 앵커 포인트(더 정확하게는 앵커 라인)를 가지고 있다고 생각할 수 있습니다. 다른 항목들은 이러한 포인트에 고정될 수 있으며, 이는 어떤 객체가 변경되더라도 그 객체에 고정된 다른 객체들이 고정 관계를 유지하기 위해 자동으로 조정된다는 것을 의미합니다.

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

앵커 기반 레이아웃은 순수한 상태일 경우, 바인딩 기반 레이아웃보다 일반적으로 훨씬 더 높은 성능을 발휘한다는 점을 유의해야 합니다. “순수한” 앵커 레이아웃은 위치를 결정하는 데 앵커(객체 중첩 포함)만을 사용하는 반면, “혼합된” 앵커 레이아웃은 앵커링과 바인딩(위치 관련 [x, y] 속성 또는 치수 관련 [width,height] 속성)을 모두 사용하여 위치를 결정하는 레이아웃을 말합니다.

포지셔너

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

레이아웃

Qt 5.1부터 Qt Quick Layouts 를 사용하여 사용자 인터페이스 내에서 Qt Quick 항목을 배열할 수도 있습니다. 포지셔너와 달리, Qt Quick Layouts 에 포함된 유형들은 선언적 인터페이스에서 항목의 위치와 크기를 모두 관리합니다. 이러한 유형들은 크기 조정이 가능한 사용자 인터페이스에 매우 적합합니다.

오른쪽에서 왼쪽으로(RTL) 지원

언어의 글쓰기 방향은 사용자 인터페이스의 시각적 요소가 어떻게 배치되어야 하는지에 종종 큰 영향을 미칩니다. Qt Quick 는 사전 정의된 레이아웃을 통해 요소의 우측에서 좌측으로(RTL) 배치를 지원하며, 우측에서 좌측으로(RTL) 텍스트 레이아웃도 지원합니다.

이 주제에 대한 자세한 내용은 Qt Quick 의 오른쪽에서 왼쪽으로(RTL) 지원에 관한 문서를 참조하십시오.