Qt Quick Layouts 개요

Qt Quick Layouts 를 사용하여 사용자 인터페이스 내의 항목을 배치할 수 있습니다. Qt Quick Layouts 는 항목의 크기를 조정하므로, 크기 조절이 가능한 사용자 인터페이스에 적합합니다.

주요 기능

Qt Quick Layouts 의 주요 기능은 다음과 같습니다:

• Align Layout.alignment 속성을 가진 항목.
• ` Layout.fillWidth ` 및 ` Layout.fillHeight ` 속성을 사용하여 ` resizable items `을 지정합니다.
• Layout.minimumWidth, Layout.preferredWidth 및 Layout.maximumWidth 속성을 사용하여 크기 제약 조건을 설정할 수 있습니다. 높이에 대한 유사한 제약 조건을 지정하려면 "Width"를 "Height"로 대체할 수 있습니다.
• spacing 는 spacing, rowSpacing 또는 columnSpacing 로 지정할 수 있습니다.
• stretch factors 를 사용하면 항목을 가로와 세로 방향으로 모두 늘릴 수 있습니다.

또한, ` GridLayout `는 다음과 같은 기능을 추가합니다:

• Grid coordinates, 이는 Layout.row 및 Layout.column 속성으로 제어됩니다.
• Automatic grid coordinates flow, 및 속성과 함께 사용됩니다. rows columns
• Spans Layout.rowSpan 및 속성을 사용하여 행이나 열 단위로 지정할 수 있습니다. Layout.columnSpan

시작하기

Qt Quick Layouts 사용을 시작하려면, .qml 파일에 다음 import 문을 사용하여 QML 타입을 애플리케이션으로 가져오십시오:

import QtQuick.Layouts

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

간단한 레이아웃

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

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) 등의 속성이 포함됩니다.

간격

이전 코드 조각에서 볼 수 있듯이, RowLayout 의 간격 은 6으로 설정되어 있습니다. 이를 통해 레이아웃 내 모든 항목 사이에 6픽셀의 간격이 확보됩니다:

spacing: 6

간격 값을 지정하지 않으면 레이아웃은 기본값인 5픽셀을 사용합니다. 간격은 자식 요소의 암시적 너비 ( implicitWidth) 와 함께 레이아웃의 암시적 너비 에 반영됩니다. 이는 레이아웃 디자인에 영향을 미칠 수 있으므로, 기본 동작에 의존할 경우 반드시 유의해야 할 사항입니다. 예를 들어, 다음 코드 조각에서 두 ColumnLayout모두 Layout.fillWidth: true로 설정되어 있습니다. 두 요소가 모두 동일한 너비를 가질 것이라고 생각하는 것이 자연스럽습니다. 그러나 내부 RowLayout의 항목들 사이에 5픽셀의 기본 간격이 존재하기 때문에, 첫 번째 ColumnLayout의 암시적 너비(implicitWidth)가 더 커져 두 번째 ColumnLayout에 할당되는 공간이 줄어듭니다. 예를 들어:

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
            }
        }
    }
}

이 코드 조각은 다음과 같은 레이아웃을 생성합니다:

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

1. RowLayout의 간격을 ` 0`로 설정하거나,
2. 두 열 모두에 대해 preferredWidth를 동일한 값으로 설정할 수 있습니다 ColumnLayout.

선호 크기 지정

각 항목에 대해, 유효한 선호 크기는 여러 후보 속성 중 하나에서 비롯될 수 있습니다. 유효한 선호 크기를 결정하기 위해 항목은 다음 순서대로 이러한 후보 속성을 조회하며, 유효한 너비나 높이를 가진 첫 번째 후보를 사용합니다.

항목은 Layout.preferredHeight 을 명시하지 않고도 Layout.preferredWidth 을 지정할 수 있습니다. 이러한 경우, 유효한 선호 높이는 implicitHeight 을 기준으로 결정됩니다.

크기 제약 조건

항목은 레이아웃에 의해 크기가 조정될 수 있으므로, 레이아웃은 Layout.fillWidth 또는 Layout.fillHeight 가 true로 설정된 모든 항목의 minimum, preferred 및 maximum 크기를 파악하고 있어야 합니다.

preferred 의 너비와 높이는 레이아웃 자체가 특정 크기에 고정되어 있지 않은 경우, 항목의 실제 너비와 높이를 의미합니다. 레이아웃이 특정 크기로 설정된 경우, 최소 및 최대 크기를 고려하면서 항목들의 선호 크기의 비율에 따라 추가 공간을 분배합니다. 모든 항목이 fillWidth 및 fillHeight를 설정한 경우, 선호 크기와 암시적 크기는 비율 및 가중치 역할을 합니다.

예를 들어, 다음 코드는 가로로 늘어나는 두 개의 직사각형이 나란히 배치된 레이아웃을 생성합니다. 주황색 Rectangle은 50x150에서 300x150까지, 자두색 Rectangle은 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
        }
    }
}

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

따라서, 자식 항목의 제약 조건을 위반하지 않으려면 레이아웃의 너비는 156보다 좁아서는 안 되며, 높이는 150보다 크거나 작아서는 안 됩니다.

창과 레이아웃 연결하기

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

RowLayout {
    id: layout
    anchors.fill: parent

레이아웃의 크기 제약 조건을 활용하면 창 크기가 레이아웃의 제약 범위를 초과하여 조정되지 않도록 할 수 있습니다. 레이아웃의 크기 제약 조건을 가져와 ` Window ` 요소의 ` minimumWidth`, `minimumHeight`, `maximumWidth`, ` maximumHeight `에 이 제약 조건을 설정할 수 있습니다. 다음 코드는 창 크기가 레이아웃의 제약 조건을 초과하여 조정되지 않도록 보장합니다:

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

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

width: layout.implicitWidth
height: layout.implicitHeight

항목의 확장 및 늘리기

GridLayout 에서 ` spans `을 사용하여 자식 항목이 하나 이상의 셀을 차지하도록 할 수 있습니다. 예를 들어, 두 행에 걸쳐 6개의 셀을 가진 ` GridLayout `이 있을 수 있습니다. 위쪽 행에는 items1, items2, items3 항목이포함되어 있습니다. 아래쪽 행에는 columnSpan: 3 및 alignment: Qt.AlignHCenter를 지정하는 items4 항목이 포함되어 있습니다. 이렇게 하면 items4가 아래쪽 행을 구성하는 세 개의 셀 중앙에 배치됩니다. 다음 코드 조각은 이를 보여주는 예시입니다:

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
       }
    }
}

행과 열의 크기는 그 내용에 따라 암시적으로 결정됩니다. 예를 들어, Button은 자신이 속한 열의 너비나 행의 높이에 영향을 줄 수 있습니다. 이는 ` GridLayout `가 균일한 분포를 갖지 않음을 의미합니다. 이 때문에 `span`을 사용하여 레이아웃을 늘릴 수는 없습니다. 항목이나 레이아웃의 확장 정도를 조정하려면 대신 ` stretchFactor` 및/또는 크기 힌트를 사용하십시오.