Qt Quick 반응형 레이아웃

레이아웃은 사용자 인터페이스의 크기를 조절할 수 있게 하는 훌륭한 기법입니다. 하지만 이 방식에는 한계가 있는데, 사용성과 미적 요소를 희생하지 않고는 항목을 무제한으로 축소하거나 확장할 수 없기 때문입니다. 어느 시점에서는 특정 요소를 재구성하거나 제거하거나 추가하는 것이 더 합리적입니다. 다양한 기기(예: 휴대폰 및 태블릿)와 화면 방향(가로 또는 세로)에 적응하는 것도 비슷한 방식으로 구현할 수 있습니다. 이것이 바로 우리가 일반적으로 반응형 레이아웃이라고 이해하는 것이며, Qt Quick Layouts 이를 구현하기 위한 다양한 API를 제공합니다.

정적 계층 구조, 적응형 레이아웃

레이아웃에는 계층 구조가 있으며, 이는 대개 선언적 QML 코드로 정의됩니다. 일부 간단한 반응형 레이아웃의 경우, 계층 구조를 변경하지 않고 레이아웃에 영향을 미치는 일부 속성만 조정하는 것으로 충분합니다.

선언적 설명

레이아웃을 변경하는 가장 간단한 방법은 레이아웃 속성과 Layout 에 연결된 속성을 간단한 표현식으로 수정하는 것입니다. 예를 들어, 삼항 연산자를 사용하여 레이아웃의 너비에 따라 레이아웃을 변경할 수 있습니다. Item 인터페이스의 다양한 부분을 숨기거나 표시하는 Item.visible 와 같은 속성도 같은 방식으로 수정할 수 있습니다.

다음 코드 조각에서는 이 개념을 활용하여 창 너비가 특정 값보다 작을 경우 2열 레이아웃을 1열 레이아웃으로 변경합니다.

GridLayout {
    columns: width < 300 ? 1 : 2
    anchors.fill: parent

    Rectangle {
        id: rectangle1
        color: "tomato"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        id: rectangle2
        color: "lightskyblue"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }
}

창의 너비에 따라 결과 레이아웃은 다음과 같이 표시됩니다.

다양한 수준의 레이아웃과 항목을 중첩할 수 있지만, Items 는 해당 Item.parent 내에서만 이동할 수 있습니다.

상태

Qt Quick 의 상태를 사용해도 동일한 결과를 얻을 수 있습니다. 상태를 사용하면 특정 레이아웃에 대한 Layout 속성(적어도 변경되는 속성)이 QML 파일의 한 곳에 모인다는 장점이 있습니다. 앞서 보여준 예제는 다음과 같이 구현할 수 있으며, 결과의 모양과 동작은 완전히 동일합니다.

GridLayout {
    anchors.fill: parent

    Rectangle {
        id: rectangle1
        color: "tomato"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        id: rectangle2
        color: "lightskyblue"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    states: [
        State {
            when: width < 300
            PropertyChanges { target: rectangle2; Layout.row: 1 }
            PropertyChanges { target: rectangle2; Layout.column: 0 }
        },
        State {
            when: width >= 300
            PropertyChanges { target: rectangle2; Layout.row: 0 }
            PropertyChanges { target: rectangle2; Layout.column: 1 }
        }
    ]
}

LayoutItemProxy

세 번째 접근 방식은 ` LayoutItemProxy`를 적용하는 것입니다. 앞서 보여준 최소한의 예제 구현은 타입 문서에서 확인할 수 있습니다. 앞서 소개한 해결책들과 달리, ` LayoutItemProxy `를 사용하면 다양한 폼 팩터에 대해 완전히 별개의 레이아웃을 선언할 수 있습니다. 특히 더 복잡한 레이아웃의 경우, 합리적인 소스 코드 구조를 개선하고 유지하는 데 유용할 수 있습니다.

LayoutItemProxy API는 현재 기술 미리보기(Technology Preview) 단계에 있으므로, 향후 Qt 버전에서 변경되거나 제거될 수 있다는 점에 유의하십시오.

적응형 계층 구조, 적응형 레이아웃

레이아웃을 더 복잡하게 재구성하려면 계층 구조를 변경해야 할 수도 있습니다. 작은 레이아웃에 있는 작은 독립형 버튼이 다른 버튼들과 결합되어 더 큰 레이아웃의 상자 안에 배치될 수 있습니다. 한 레이아웃에서는 완전히 표시되던 항목이, 다른 더 작은 레이아웃에서는 ` Flickable `가 필요할 수 있습니다. 이러한 시나리오에서는 ` LayoutItemProxy`를 활용하는 것이 가장 좋습니다. ` LayoutItemProxy `를 사용하면 ` Items `를 다양한 계층 수준 간 및 서로 다른 ` Item.parent` 간에 이동할 수 있습니다.

Qt Quick Layouts - Responsive Layout Example 예제에서는 항목을 서로 다른 계층 수준 간에 이동시켜, 한 경우에는 Flickable 에 배치하고 다른 레이아웃에서는 최상위 수준에 배치하는 사례를 보여줍니다. 그 결과 생성된 두 레이아웃은 다음과 같습니다.

유용한 링크: 디자인 가이드라인 참조

많은 디자인 가이드라인에서 반응형 레이아웃을 만드는 데 도움이 되는 정보와 팁을 제공합니다. 앞서 언급한 API를 사용하면 해당 기법을 구현할 수 있습니다. 자세한 내용은 다음 링크를 참고하시기 바랍니다:

• Apple 휴먼 인터페이스 가이드라인
• Material3 레이아웃
• Microsoft Fluent 반응형 디자인 기법