FlexboxLayout QML Type

FlexboxLayout QML 구조는 빠른 항목에 대한 플렉스 레이아웃을 제공합니다. 더 보기...

Import Statement:	`import QtQuick.Layouts`
Since:	Qt 6.10
Inherits:	Item
Status:	Preliminary

이 유형은 개발 중이며 변경될 수 있습니다.

상속된 멤버를 포함한 모든 멤버 목록

속성

alignContent : enumeration
alignItems : enumeration
columnGap : real
direction : enumeration
gap : real
justifyContent : enumeration
rowGap : real
wrap : enumeration

첨부 속성

alignSelf : enumeration

상세 설명

플렉스박스 레이아웃은 CSS 플렉스 박스 레이아웃과 유사한 방식으로 플렉스 아이템을 유연하게 레이아웃할 수 있게 해줍니다. 내부적으로 Qt FlexboxLayout은 요가 엔진을 사용하여 플렉스 항목의 지오메트리를 도출합니다. 요가 라이브러리는 CSS 플렉시블 박스 레이아웃의 하위 집합입니다. 따라서 FlexboxLayout은 요가 라이브러리에서 지원되는 기능으로 제한될 수 있습니다.

참고: FlexboxLayout은 요가 라이브러리 버전 2.0의 기능을 준수합니다.

FlexboxLayout 내의 항목은 기존 레이아웃에 첨부된 속성을 통해 기본, 최소 및 최대 크기로 구성할 수 있습니다. 예를 들어 FlexboxLayout 내의 항목을 늘려야 하는 경우 레이아웃 첨부 속성 Layout.fillWidth 또는 Layout.fillHeight 을 설정할 수 있습니다.

플렉스박스 레이아웃의 항목은 이러한 첨부 속성을 지원합니다:

첨부 속성에 대한 자세한 내용은 여기를 참조하세요.

이 유형을 보다 효율적으로 사용하려면 Qt Quick Layouts 모듈의 일반적인 메커니즘을 이해하는 것이 좋습니다. 자세한 내용은 Qt Quick Layouts 개요를 참조하세요.

사용 예

다음 스니펫은 직사각형 항목을 보다 유연한 방식으로 정렬하기 위해 QML FlexboxLayout을 사용하는 최소한의 예시를 보여줍니다.

FlexboxLayout {
    id: flexLayout
    anchors.fill: parent
    wrap: FlexboxLayout.Wrap
    direction: FlexboxLayout.Row
    justifyContent: FlexboxLayout.JustifySpaceAround
    Rectangle {
        color: 'teal'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'plum'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'olive'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'beige'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'darkseagreen'
        implicitWidth: 200
        implicitHeight: 200
    }
}

참고: 이 API는 기술 미리보기로 간주되며 향후 Qt 버전에서 변경되거나 제거될 수 있습니다.

ColumnLayout, GridLayout, RowLayout, StackView, 및 Qt Quick Layouts 개요를참조하십시오 .

속성 문서

alignContent : enumeration

이 속성은 플렉스 박스 레이아웃의 교차 축을 따라 플렉스 라인의 분포를 지정합니다.

가능한 값은 다음과 같습니다:

Constant	설명
`FlexboxLayout.AlignStart`	(기본값) 플렉스 선이 플렉스 상자 레이아웃의 시작점에 정렬됩니다.
`FlexboxLayout.AlignCenter`	플렉스 선은 플렉스 상자 레이아웃의 중앙을 따라 정렬됩니다.
`FlexboxLayout.AlignEnd`	플렉스 라인은 플렉스 박스 레이아웃의 끝에 정렬됩니다.
`FlexboxLayout.AlignStretch`	플렉스 라인은 플렉스 박스 레이아웃의 높이에 따라 늘어납니다.
`FlexboxLayout.AlignSpaceBetween`	공백은 선 사이에 고르게 분포되어 있으며 플렉스 박스 레이아웃의 가장자리를 따라 공백이 없습니다.
`FlexboxLayout.AlignSpaceAround`	플렉스 박스 레이아웃의 가장자리에는 공백이 없고 선과 선 사이에 공백이 균등하게 분포되어 있습니다.
`FlexboxLayout.AlignSpaceEvenly`	플렉스 상자 레이아웃의 선과 가장자리 사이에 공백이 균등하게 분포되어 있습니다. Qt 6.10에서는 지원되지 않습니다.

기본값은 FlexboxLayout.AlignStart 입니다.

alignItems : enumeration

이 속성은 플렉스 박스 레이아웃의 플렉스 라인 내 항목의 정렬과 교차 축 ( direction 속성에 정의된 대로 주축에 직교)을 따라 정렬된 항목을 지정합니다. 이 속성은 연결된 속성 FlexboxLayout.alignSelf 을 통해 플렉스 박스 레이아웃 내의 항목으로 재정의할 수 있습니다.

가능한 값은 다음과 같습니다:

Constant	설명
`FlexboxLayout.AlignStart`	(기본값) 항목이 플렉스 박스 레이아웃 가로축의 시작점에 정렬됩니다.
`FlexboxLayout.AlignCenter`	항목이 플렉스 상자 레이아웃 가로축의 중심을 따라 정렬됩니다.
`FlexboxLayout.AlignEnd`	항목은 플렉스 상자 레이아웃 가로축의 끝에 정렬됩니다.

참고: 사용 가능한 값에 언급된 정렬은 alignItems 속성에만 적용됩니다.

기본값은 FlexboxLayout.AlignStart 입니다.

columnGap : real

이 속성은 인라인 축을 따라 FlexboxLayout 에 적용해야 하는 공간의 양을 보유합니다. 이 속성을 설정하면 인라인 축에 영향을 미치는 gap 값이 재정의됩니다.

기본값은 0 입니다.

direction : enumeration

이 속성은 플렉스 박스 레이아웃 내에서 항목 레이아웃 방향을 유지하며 주축을 정의합니다.

가능한 값은 다음과 같습니다:

Constant	설명
`FlexboxLayout.Row`	(기본값) 항목이 왼쪽에서 오른쪽으로 배치됩니다.
`FlexboxLayout.RowReversed`	항목이 오른쪽에서 왼쪽으로 배치됩니다.
`FlexboxLayout.Column`	항목이 위에서 아래로 배치됩니다.
`FlexboxLayout.ColumnReversed`	항목은 아래에서 위로 배치됩니다.

기본값은 FlexboxLayout.Row 입니다.

gap : real

이 속성은 인라인 축과 블록 축을 따라 FlexboxLayout 에 적용해야 하는 공간의 양을 보유합니다.

기본값은 0 입니다.

justifyContent : enumeration

이 속성은 플렉스 박스 레이아웃의 주축을 따라 항목의 분포를 지정합니다.

가능한 값은 다음과 같습니다:

Constant	설명
`FlexboxLayout.JustifyStart`	(기본값) 항목이 플렉스 박스 레이아웃의 시작 부분에 정렬됩니다.
`FlexboxLayout.JustifyCenter`	항목이 플렉스 박스 레이아웃의 중앙을 따라 정렬됩니다.
`FlexboxLayout.JustifyEnd`	항목이 플렉스 박스 레이아웃의 끝에 정렬됩니다.
`FlexboxLayout.JustifySpaceBetween`	항목 사이에 공백이 균등하게 분포되어 있으며 플렉스 상자 레이아웃의 가장자리에는 공백이 없습니다.
`FlexboxLayout.JustifySpaceAround`	항목 사이에 공백이 고르게 분포되어 있으며 플렉스 상자 레이아웃의 가장자리에 절반 크기의 공백이 있습니다.
`FlexboxLayout.JustiftSpaceEvenly`	항목과 플렉스 상자 레이아웃의 가장자리 사이에 공백이 균등하게 분포됩니다.

기본값은 FlexboxLayout.JustifyStart 입니다.

rowGap : real

이 속성은 블록 축을 따라 FlexboxLayout 에 적용해야 하는 공간의 양을 보유합니다. 이 속성을 설정하면 블록 축에 영향을 미치는 gap 값이 재정의됩니다.

기본값은 0 입니다.

wrap : enumeration

이 속성은 플렉스 박스 레이아웃 내의 항목을 래핑할 수 있는지 여부를 지정하며, 자식이 플렉스 박스 레이아웃의 크기를 초과할 때 발생합니다. 항목이 래핑되는 경우 명시된 대로 오버플로 조건에 따라 여러 줄에 배치됩니다. 각 줄은 십자축을 따라 항목의 최대 크기를 차지합니다.

가능한 값은 다음과 같습니다:

상수	설명
`FlexboxLayout.Wrap`	플렉스 박스 레이아웃 내에서 항목이 여러 줄로 래핑됩니다.
`FlexboxLayout.NoWrap`	(기본값) 항목이 플렉스 박스 레이아웃 내에서 한 줄로 래핑되어 배치되지 않습니다.
`FlexboxLayout.WrapReverse`	플렉스 박스 레이아웃 내에서 항목이 역방향으로 여러 줄로 래핑됩니다.

기본값은 FlexboxLayout.NoWrap 입니다.

첨부 속성 문서

FlexboxLayout.alignSelf : enumeration

이 첨부 속성을 사용하면 플렉스 상자 레이아웃에서 이 항목을 교차 축을 따라 정렬할 수 있으며 부모 플렉스 상자 레이아웃 속성 alignItems 을 재정의합니다.

기본적으로 자식 항목은 부모로부터 정렬을 상속받으며 FlexboxLayout.AlignStart, FlexboxLayout.AlignCenter 및 FlexboxLayout.AlignEnd 값으로 부모 플렉스 상자 레이아웃 alignItems 속성을 재정의할 수 있습니다.

기본값은 FlexboxLayout.AlignAuto 입니다.

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