Back to Qt.io
Contact Us Blog Download Qt
이 페이지에서

Qt Quick Layouts - 반응형 레이아웃 예시

LayoutItemProxy 를 사용하여 반응형 UI를 만드는 방법을 보여줍니다.

이 예제는 LayoutProxyItems를 레이아웃과 함께 사용하여 반응형 레이아웃을 만드는 방법을 보여줍니다.

예제 실행

다음 경로에서 예제를 실행할 수 있습니다.

항목 생성

LayoutItemProxy 유형을 사용하면 서로 다른 레이아웃에서 동일한 항목을 사용할 수 있지만, 한 번에 표시될 수 있는 레이아웃은 하나뿐입니다. 이를 통해 창이나 화면 크기에 맞춰 조정되는 반응형 레이아웃을 만들 수 있습니다.

반응형 레이아웃을 보여주는 두 개의 창: 콤팩트 그리드가 적용된 좁은 화면과 사이드바가 있는 넓은 화면

먼저 UI에 언젠가 표시되어야 할 모든 항목을 정의해야 합니다. 여기서는 텍스트가 추가된 간단한 Rectangle인 AnnotatedRect를 사용합니다.

Rectangle {
    id: contentItem
    Layout.fillWidth: true
    implicitHeight: grid.implicitHeight
    implicitWidth: grid.implicitWidth
    color: "#00414A"

    GridLayout {
        id: grid
        anchors {
            fill: parent
            margins: 8
        }
        columns: Math.max(1, Math.min(Math.round(width / 130), 6))
        Repeater {
            model: 60
            delegate: Rectangle {
                required property int index
                Layout.fillWidth: true
                Layout.margins: 8
                implicitWidth: 200
                implicitHeight: width
                radius: width / 10
                gradient: Gradient {
                    GradientStop { position: -0.2; color: "#2CDE85" }
                    GradientStop { position: 1.2; color: "#00414A" }
                }
                Text {
                    color: "#ffffff"
                    font.pointSize: 22
                    anchors.centerIn: parent
                    text: parent.index + 1
                }
            }
        }
    }
}

Button {
    id: a
    text: "Text"
    icon.source: "./icons/text.svg"
    Layout.fillWidth: true
    Layout.margins: 3
}

Button {
    id: b
    text: "Grid 1"
    icon.source: "./icons/grid.svg"
    Layout.fillWidth: true
    Layout.margins: 3
}

Button {
    id: c
    text: "Grid 2"
    icon.source: "./icons/grid.svg"
    Layout.fillWidth: true
    Layout.margins: 3
}

Button {
    id: d
    text: "Settings"
    icon.source: "./icons/settings.svg"
    Layout.fillWidth: true
    Layout.margins: 3
}

레이아웃 생성

이제 ` LayoutItemProxies`를 사용하여 앞서 선언한 항목을 대상으로 다양한 레이아웃을 선언할 수 있습니다. 단일 레이아웃은 다음과 같이 정의할 수 있습니다.

ColumnLayout {
    id: smallLayout
    anchors.fill: parent

    Flickable {
        Layout.fillHeight: true
        Layout.fillWidth: true
        contentWidth: width
        contentHeight: gl.implicitHeight
        clip: true
        ScrollIndicator.vertical: ScrollIndicator { }
        LayoutItemProxy {
            id: gl
            width: parent.width
            height: implicitHeight
            target: contentItem
        }
    }

    RowLayout {
        Layout.fillHeight: false
        Layout.fillWidth: true
        Layout.margins: 5
        LayoutItemProxy{ target: a; }
        LayoutItemProxy{ target: b; }
        LayoutItemProxy{ target: c; }
    }
}

이 코드 조각은 ` LayoutItemProxy`을 사용하는 여러 가지 방법을 보여줍니다. 가장 간단한 방법은 여기에서 ` RowLayout `처럼 ` LayoutItemProxies `을 레이아웃에 추가하는 것입니다. 또한 LayoutProxyItem에 추가적인 ‘ Layout ’ 부착 속성을 설정하여, 이 특정 레이아웃 내에서만 대상 항목에 영향을 미치도록 할 수 있습니다. 또한, ‘ d ’ 항목은 첫 번째 레이아웃에서는 사용되지 않는 것을 볼 수 있습니다. 그러면 두 번째 레이아웃에서 ‘ LayoutItemProxy ’에 의해 자동으로 숨겨집니다. 또 다른 사용 방법은 ‘ LayoutItemProxy ’을 ‘ Flickable ’의 콘텐츠로 설정하는 것입니다.

또 다른 레이아웃은 다음과 같이 선언됩니다.

RowLayout {
    id: largeLayout
    anchors.fill: parent
    ColumnLayout {
        Layout.minimumWidth: 100
        Layout.fillWidth: true
        Layout.margins: 2
        LayoutItemProxy{ target: a }
        LayoutItemProxy{ target: b }
        LayoutItemProxy{ target: c }
        Item { Layout.fillHeight: true }
        LayoutItemProxy{ target: d }
    }

    LayoutItemProxy {
        Layout.fillHeight: true
        Layout.fillWidth: true
        target: contentItem
    }
}

여기서는 LayoutItemProxies 를 동일한 계층 수준에서 실제 Items 와 함께 사용할 수 있음을 보여줍니다. 일반적으로 LayoutItemProxy 는 유연하며, 항목과 레이아웃의 중첩 구조를 허용합니다.

레이아웃 설정

smallLayout 와 largeLayout 라는 두 레이아웃이 정의된 후, 애플리케이션의 현재 크기에 맞는 레이아웃을 설정할 수 있습니다. 이를 위해 창이 초기화될 때와 너비가 변경될 때마다 호출되는 새로운 함수를 정의합니다:

function setFittingLayout() {
    if (width < 450) {
        smallLayout.visible = true
        largeLayout.visible = false
    } else {
        smallLayout.visible = false
        largeLayout.visible = true
    }
}
onWidthChanged: setFittingLayout()
Component.onCompleted: setFittingLayout()

초기화 후 이 함수를 호출하는 대신, 선언형 코드에서 초기 크기에 맞는 레이아웃을 제외한 나머지는 모두 숨길 수도 있습니다.

예제 프로젝트 @ code.qt.io

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.