Back to Qt.io
Contact Us Blog Download Qt

Qt Quick 레이아웃 개요

Qt Quick 레이아웃을 사용하여 사용자 인터페이스에서 항목을 정렬합니다. Qt Quick 레이아웃은 항목의 크기를 조정할 수 있으므로 크기 조정이 가능한 사용자 인터페이스에 적합합니다.

주요 기능

Qt Quick 레이아웃의 주요 기능은 다음과 같습니다:

또한 GridLayout 은 이러한 기능을 추가합니다:

시작하기

Qt Quick 레이아웃 사용을 시작하려면 .qml 파일에 다음 import 문을 사용하여 QML 유형을 애플리케이션으로 가져옵니다:

import QtQuick.Layouts

다음 단계는 간단한 레이아웃을 만드는 것입니다. Qt Quick 레이아웃 - 기본 예제를 참조할 수도 있습니다.

간단한 레이아웃

레이아웃을 사용하는 목적은 레이아웃의 크기가 변경될 때마다 하위 레이아웃을 재정렬하는 것입니다. 즉, 애플리케이션은 레이아웃의 크기가 조정되도록 해야 합니다. 다음 스니펫에서 RowLayout은 anchors.fill: parent 을 지정하여 이를 보장합니다. 그러나 width 및 height 속성을 지정하는 등 다른 방법으로도 이를 달성할 수 있습니다. 같은 코드 조각에서 주황색 직사각형은 크기가 100×150픽셀로 고정되어 있고, 자두색 직사각형은 할당된 모든 공간을 차지하도록 확장됩니다.

Window {
    RowLayout {
        anchors.fill: parent
        spacing: 6
        Rectangle {
            color: 'azure'
            Layout.preferredWidth: 100
            Layout.preferredHeight: 150
        }
        Rectangle {
            color: "plum"
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
    }
}

레이아웃은 자식의 지오메트리를 담당합니다. 여기에는 width, height, x, y, anchors) 등과 같은 속성이 포함됩니다.

중요: 애플리케이션에서 하위 항목의 지오메트리에 영향을 주는 속성을 지정하지 마세요. 하위 항목에 이러한 속성을 설정하면 이해 상충이 발생하고 결과가 정의되지 않습니다. 이는 자식 항목이 레이아웃인 경우에도 적용됩니다. 따라서 부모 레이아웃이 없는 레이아웃만 anchors.fill: parent 을 가질 수 있습니다.

간격

이전 스니펫에서 볼 수 있듯이 RowLayout의 간격은 6으로 설정되어 있습니다. 이렇게 하면 레이아웃의 모든 항목 사이에 6픽셀의 간격이 생깁니다:

spacing: 6

간격 값 지정을 생략하면 레이아웃은 기본값인 5픽셀을 사용합니다. 간격과 모든 자식의 implicitWidth는 레이아웃의 implicitWidth에 영향을 줍니다. 기본 동작에 의존하는 경우 레이아웃 디자인에 영향을 미칠 수 있으므로 이 점을 염두에 두어야 합니다. 예를 들어, 두 ColumnLayout는 모두 다음 스니펫에서 Layout.fillWidth: true로 설정되어 있습니다. 둘 다 같은 너비를 가져올 것이라고 생각하는 것이 당연합니다. 그러나 내부 RowLayout의 항목 간 기본 5픽셀 간격으로 인해 첫 번째 ColumnLayout의 implicitWidth가 커져서 두 번째 항목에 대한 공간이 줄어듭니다. 예를 들어

ApplicationWindow {
    id: root
    width: 300
    height: 300
    visible: true

    RowLayout {
        anchors.fill: parent
        ColumnLayout {
            Rectangle {
                color: "tomato";
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
            RowLayout {
                Rectangle {
                    color: "navajowhite"
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                }
                Rectangle {
                    color: "darkseagreen"
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                }
            }
        }
        ColumnLayout {
            Rectangle {
                color: "lightpink"
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
            Rectangle {
                color: "slategray"
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
            Rectangle {
                color: "lightskyblue"
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
        }
    }
}

이 스니펫은 다음과 같은 레이아웃을 생성합니다:

"A QML layout with default spacing"

이 두 열의 크기를 동일하게 하려면 다음 중 하나를 사용할 수 있습니다.

  1. RowLayout의 간격을 0 로 설정하거나
  2. 선호하는 너비를 두 열 모두에서 동일한 값으로 설정합니다. ColumnLayouts.

기본 크기 지정

각 항목의 유효 기본 크기는 여러 후보 속성 중 하나에서 가져올 수 있습니다. 효과적인 기본 크기를 결정하기 위해 항목은 다음 순서로 이러한 후보 속성을 쿼리하고 유효한 너비 또는 높이가 있는 첫 번째 후보를 사용합니다.

후보 속성설명
Layout.preferredWidth 또는 Layout.preferredHeight이러한 속성은 기본 암시적 크기가 최적의 배열을 제공하지 않는 경우 애플리케이션에서 수정해야 합니다.
implicitWidth 또는 implicitHeight.이러한 속성은 의미 있는 이상적인 크기를 제공하기 위해 각 항목에서 제공해야 합니다. 예를 들어 Text 유형의 모든 콘텐츠를 표시하는 데 필요한 크기입니다. 0 의 암시적 너비 또는 높이는 유효하지 않은 것으로 해석됩니다.

항목은 Layout.preferredHeight 을 지정하지 않고 Layout.preferredWidth 을 지정할 수 있습니다. 이러한 경우 효과적인 기본 높이가 implicitHeight 에서 결정됩니다.

참고: 선호 너비나 암시 너비를 지정하지 않으면 레이아웃은 유효 선호 너비의 최종 값으로 width 을 쿼리합니다. 그러나 예기치 않은 동작이 발생할 수 있으므로 유효 기본 너비의 소스로 width 에 의존해서는 안 됩니다. 예를 들어 width 또는 height 속성을 변경해도 레이아웃 재정렬이 트리거되지 않거나 전체 재구성을 수행해야 할 때 레이아웃이 QML 파일에 지정된 너비와 높이가 아닌 실제 너비와 높이를 사용할 수 있습니다.

크기 제약 조건

항목은 레이아웃에 따라 크기를 조정할 수 있으므로 레이아웃은 Layout.fillWidth 또는 Layout.fillHeight 가 true로 설정된 모든 항목의 minimum, preferred, maximum 크기를 알아야 합니다.

레이아웃이 특정 크기에 바인딩되지 않은 경우 preferred 너비와 높이는 항목의 실제 너비와 높이입니다. 레이아웃이 특정 크기로 설정된 경우 레이아웃은 최소 및 최대 크기를 고려하면서 항목의 기본 크기 비율에 따라 추가 공간을 분배합니다. 기본 및 암시적 크기는 모든 항목이 fillWidth 및 fillHeight를 설정할 때 비율 및 가중치로 작용합니다.

예를 들어 다음은 가로로 늘어나는 두 개의 직사각형이 나란히 놓인 레이아웃을 생성합니다. 주황색 직사각형의 크기는 50x150에서 300x150으로, 자두색 직사각형의 크기는 100x100에서 ∞x100으로 조정할 수 있습니다. 각 항목의 최소 및 최대 너비를 초과하지 않는 한, 자두색 직사각형은 주황색 직사각형의 너비의 두 배를 갖습니다.

RowLayout {
    id: layout
    anchors.fill: parent
    spacing: 6
    Rectangle {
        color: 'orange'
        Layout.fillWidth: true
        Layout.minimumWidth: 50
        Layout.preferredWidth: 100
        Layout.maximumWidth: 300
        Layout.minimumHeight: 150
        Text {
            anchors.centerIn: parent
            text: parent.width + 'x' + parent.height
        }
    }
    Rectangle {
        color: 'plum'
        Layout.fillWidth: true
        Layout.minimumWidth: 100
        Layout.preferredWidth: 200
        Layout.preferredHeight: 100
        Text {
            anchors.centerIn: parent
            text: parent.width + 'x' + parent.height
        }
    }
}

"RowLayout at its minimum"

각 항목의 제약 조건을 결합하면 레이아웃 요소에 이러한 암시적 제약 조건이 적용됩니다:

최소preferred최대
암시적 제약 조건(너비)156306∞ (Number.POSITIVE_INFINITY)
암시적 제약(높이)150150150

따라서 레이아웃은 하위 항목의 제약 조건을 위반하지 않고 156보다 좁을 수 없으며 150보다 길거나 짧을 수 없습니다.

창과 레이아웃 연결하기

일반적인 고정 개념을 사용하여 레이아웃이 창 크기 조정에 따르도록 할 수 있습니다.

RowLayout {
    id: layout
    anchors.fill: parent

레이아웃의 크기 제약 조건을 사용하여 레이아웃 제약 조건을 초과하여 창 크기를 조정할 수 없도록 할 수 있습니다. 레이아웃에서 크기 제약 조건을 가져와 Window 요소의 최소 너비, 최소 높이, 최대 너비 및 최대 높이에 이러한 제약 조건을 설정할 수 있습니다. 다음 코드는 레이아웃의 제약 조건을 초과하여 창 크기를 조정할 수 없도록 합니다:

minimumWidth: layout.Layout.minimumWidth
minimumHeight: layout.Layout.minimumHeight
maximumWidth: 1000
maximumHeight: layout.Layout.maximumHeight

참고: 이 경우 layout.Layout.maximumWidth는 무한대이므로 정수인 Window의 maximumWidth 속성에 바인딩할 수 없습니다. 따라서 최대 너비는 고정 값인 1000 으로 설정됩니다.

마지막으로 창의 초기 크기를 레이아웃의 암시적 크기로 설정합니다:

width: layout.implicitWidth
height: layout.implicitHeight

항목 스팬 및 늘이기

하위 항목이 두 개 이상의 셀을 차지하도록 하려면 GridLayout 에 spans 을 사용합니다. 예를 들어 두 행에 걸쳐 6개의 셀이 있는 GridLayout 이 있을 수 있습니다. 맨 위 행에는 항목항목1, 항목2 및 항목3이 포함됩니다. 맨 아래 행에는 columnSpan: 3과 정렬을 지정하는 항목 item4가 포함됩니다: Qt.AlignHCenter를 지정합니다. 이렇게 하면 item4가 아래쪽 행을 구성하는 세 개의 셀 가운데에 배치됩니다. 다음 스니펫이 예시입니다:

ApplicationWindow {
    id: root
    width: 300
    height: 300
    visible: true

    GridLayout {
       rows: 2
       columns: 3
       Rectangle {
           color: 'cyan'
           implicitWidth: 50
           implicitHeight: 50
       }
       Rectangle {
           color: 'magenta'
           implicitWidth: 50
           implicitHeight: 50
       }
       Rectangle {
           color: 'yellow'
           implicitWidth: 50
           implicitHeight: 50
       }
       Rectangle {
           color: 'black'
           implicitWidth: 50
           implicitHeight: 50
           Layout.columnSpan: 3
           Layout.alignment: Qt.AlignHCenter
       }
    }
}

행과 열의 크기는 콘텐츠에 의해 암시적으로 지정됩니다. 예를 들어 버튼은 버튼이 있는 열의 너비 또는 버튼이 있는 행의 높이에 영향을 줄 수 있습니다. 즉, GridLayout 은 균일한 분포를 갖지 않습니다. 따라서 스팬을 사용하여 레이아웃을 늘릴 수 없습니다. 항목이나 레이아웃의 스트레치를 조작하려면 stretchFactor및/또는 크기 힌트를 대신 사용하세요.

참고: 암시적 또는 기본 크기를 설정할 때 각 속성을 레이아웃 자체의 너비 또는 높이 또는 크기 계산에 의존하는 항목에 바인딩하지 마십시오. 이렇게 하면 추적하기 어려운 순환 종속성이 발생할 수 있으므로 주의하세요.

© 2025 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.