Qt Quick 반응형 레이아웃

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

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

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

선언적 설명

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

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

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는 기술 미리보기이며 향후 Qt 버전에서 변경되거나 제거될 수 있습니다.

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

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

Qt Quick 레이아웃 - 반응형 레이아웃 예시에서는 항목을 여러 계층 수준 간에 이동하여 한 경우에는 Flickable 에, 다른 레이아웃의 최상위 수준에는 배치하는 경우를 보여줍니다. 두 레이아웃의 결과물은 다음과 같습니다.

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

많은 디자인 가이드라인에서 반응형 레이아웃을 만드는 데 도움이 되는 도움말과 팁을 제공합니다. 위에서 언급한 API를 사용하여 각 기술을 구현할 수 있습니다. 자세한 내용은 다음 링크를 참조하세요:

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