FlexboxLayout QML Type

FlexboxLayout QML 구문은 퀵 아이템에 대한 플렉스 레이아웃을 제공합니다. 더 보기...

이 유형은 기술 미리보기 단계에 있으며 변경될 수 있습니다.

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

속성

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

연관 속성

• alignSelf : enumeration

상세 설명

FlexboxLayout을 사용하면 CSS 플렉서블 박스 레이아웃과 유사한 방식으로 퀵 아이템을 유연하게 배치할 수 있습니다. 내부적으로 Qt FlexboxLayout은 yoga 엔진을 사용하여 플렉스 아이템의 기하학적 구조를 도출합니다. yoga 라이브러리는 CSS 플렉서블 박스 레이아웃의 하위 집합입니다. 따라서 FlexboxLayout은 yoga 라이브러리에서 지원하는 기능으로 제한될 수 있습니다.

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

FlexboxLayout 내의 항목은 다음과 같은 첨부 속성을 지원합니다:

• FlexboxLayout.alignSelf
• Layout.minimumWidth
• Layout.minimumHeight
• Layout.preferredWidth
• Layout.preferredHeight
• Layout.maximumWidth
• Layout.maximumHeight
• Layout.fillWidth
• Layout.fillHeight
• Layout.margins
• Layout.leftMargin
• Layout.rightMargin
• Layout.topMargin
• Layout.bottomMargin

부착 속성에 대한 자세한 내용은 여기에서 확인하세요.

이 유형을 더 효율적으로 사용하려면 ` 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
    }
}

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

속성 문서

alignContent : enumeration

이 속성은 플렉스 박스 레이아웃의 가로축을 따라 플렉스 라인이 분포되는 방식을 지정합니다.

사용 가능한 값:

기본값은 ` FlexboxLayout.AlignStart`입니다.

alignItems : enumeration

이 속성은 플렉스 박스 레이아웃의 플렉스 라인 내 항목들의 정렬 방식을 지정하며, 항목은 크로스 축 ( direction 속성으로 정의된 메인 축에 수직인 축)을 따라 정렬됩니다. 이 속성은 플렉스 박스 레이아웃 내의 항목들이 첨부 속성 FlexboxLayout.alignSelf 을 통해 재정의할 수 있습니다.

사용 가능한 값:

기본값은 ` FlexboxLayout.AlignStart`입니다.

columnGap : real

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

기본값은 0 입니다.

direction : enumeration

이 속성은 플렉스 박스 레이아웃 내의 항목 레이아웃 방향을 지정하며, 주축(main-axis)을 정의합니다.

사용 가능한 값:

기본값은 FlexboxLayout.Row 입니다.

gap : real

이 속성은 인라인 축과 블록 축 모두에서 ‘ FlexboxLayout ’에 적용해야 하는 공간의 크기를 지정합니다.

기본값은 0 입니다.

justifyContent : enumeration

이 속성은 플렉스 박스 레이아웃의 주축을 따라 항목들이 배치되는 방식을 지정합니다.

사용 가능한 값:

기본값은 ` FlexboxLayout.JustifyStart`입니다.

rowGap : real

이 속성은 블록 축을 따라 ‘ FlexboxLayout ’에 적용해야 하는 공간의 양을 지정합니다. 이 속성을 설정하면 블록 축에 적용되는 ‘ gap ’ 값이 재정의됩니다.

기본값은 0 입니다.

wrap : enumeration

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

사용 가능한 값:

기본값은 ` FlexboxLayout.NoWrap`입니다.

관련 속성 문서

FlexboxLayout.alignSelf : enumeration [attached]

이 첨부된 속성은 플렉스 박스 레이아웃에서 해당 항목을 가로축을 따라 정렬할 수 있게 하며, 상위 요소의 플렉스 박스 레이아웃 속성 alignItems 을 재정의합니다.

기본적으로 자식 항목은 부모의 정렬을 상속받으며, ‘ FlexboxLayout.AlignStart ’, ‘ FlexboxLayout.AlignCenter ’, ‘ FlexboxLayout.AlignEnd ’ 등의 값을 사용하여 부모의 플렉스 박스 레이아웃 속성인 ‘ alignItems ’을 재정의할 수 있습니다.

기본값은 FlexboxLayout.AlignAuto 입니다.