Grid QML Type

자식 요소를 격자 형태로 배치합니다. 더 보기...

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

속성

• add : Transition
• bottomPadding : real
• columnSpacing : real
• columns : int
• effectiveHorizontalItemAlignment : enumeration
• effectiveLayoutDirection : enumeration
• flow : enumeration
• horizontalItemAlignment : enumeration
• layoutDirection : enumeration
• leftPadding : real
• move : Transition
• padding : real
• populate : Transition
• rightPadding : real
• rowSpacing : real
• rows : int
• spacing : real
• topPadding : real
• verticalItemAlignment : enumeration

신호

• positioningComplete()

방법

• void forceLayout()

상세 설명

Grid는 자식 항목을 격자 형태로 배치하는 유형입니다.

Grid는 모든 자식 항목을 수용할 수 있을 만큼 충분히 큰 셀 그리드를 생성하고, 이러한 항목들을 왼쪽에서 오른쪽으로, 위에서 아래로 순서대로 셀에 배치합니다. 각 항목은 위치 (0, 0)을 가지며 해당 셀의 왼쪽 상단 모서리에 배치됩니다.

Grid는 기본적으로 4개의 열을 가지며, 모든 자식 항목을 수용하는 데 필요한 만큼의 행을 생성합니다. 행과 열의 수는 rows 및 columns 속성을 설정하여 제한할 수 있습니다.

예를 들어, 아래는 다양한 크기의 직사각형 5개를 포함하는 그리드입니다:

import QtQuick

Grid {
    columns: 3
    spacing: 2
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }
    Rectangle { color: "cyan"; width: 50; height: 50 }
    Rectangle { color: "magenta"; width: 10; height: 10 }
}

Grid는 자식 항목들을 자동으로 격자 형태로 배치합니다:

Grid 내의 항목이 visible 가 아니거나, 너비나 높이가 0인 경우, 해당 항목은 레이아웃에 포함되지 않으며 열 내에서 표시되지 않습니다. 또한 Grid는 자식 항목을 자동으로 배치하므로, Grid 내의 자식 항목은 x 또는 y 위치를 설정하거나 anchor 속성을 사용하여 앵커를 지정해서는 안 됩니다.

Grid 및 기타 관련 위치 지정자 유형의 사용에 대한 자세한 내용은 ‘항목 위치 지정자(Item Positioners)’를 참조하십시오.

또한 Flow, Row, Column, Positioner, GridLayout 및 Qt Quick 예제 - 위치 지정자를참조하십시오 .

속성 설명서

add : Transition

이 속성은 이 포지셔너에 추가되는 항목에 대해 실행될 전환 효과를 지정합니다. 포지셔너의 경우, 이는 다음 항목에 적용됩니다:

• 포지셔너가 생성된 후, 포지셔너의 자식으로 생성되거나 부모가 변경된 아이템
• Item::visible 속성이 false에서 true로 변경되어 이제 표시되는 자식 항목

이 전환은 ` ViewTransition ` 속성을 사용하여 추가되는 항목에 대한 자세한 정보를 확인할 수 있습니다. 이러한 전환 사용에 대한 자세한 내용과 예제는 ViewTransition 문서를 참조하십시오.

관련 항목: populate, ViewTransition, Qt Quick 예제 - 포지셔너.

이 속성들은 콘텐츠 주변의 패딩을 지정합니다.

columnSpacing : real

이 속성은 열 사이의 간격을 픽셀 단위로 지정합니다.

이 속성이 설정되지 않은 경우, 간격이 열 간격으로 사용됩니다.

기본적으로 이 속성은 설정되어 있지 않습니다.

rowSpacing도 참조하십시오 .

columns : int

이 속성은 그리드의 열 수를 지정합니다. 기본 열 수는 4개입니다.

그리드에 지정된 열 수를 채울 만큼의 항목이 충분하지 않은 경우, 일부 열의 너비는 0이 됩니다.

그리드 내 항목의 가로 및 세로 정렬을 설정합니다. 기본적으로 항목은 세로로 상단에 정렬됩니다. 가로 정렬은 그리드의 ‘ layoutDirection ’ 속성을 따릅니다. 예를 들어, ‘LeftToRight’에서 ‘ layoutDirection ’가 설정된 경우, 항목은 왼쪽에 정렬됩니다.

horizontalItemAlignment 의 유효한 값은 Grid.AlignLeft, Grid.AlignRight 및 Grid.AlignHCenter 입니다.

verticalItemAlignment 의 유효한 값은 Grid.AlignTop, Grid.AlignBottom 및 Grid.AlignVCenter 입니다.

아래 이미지는 항목을 정렬하는 세 가지 예시를 보여줍니다.

수평 정렬	AlignLeft	AlignHCenter	AlignHCenter
수직 정렬	상단 정렬	AlignTop	AlignVCenter

LayoutMirroring::enabled 부속 속성을 사용하거나 layoutDirection 을 설정하여 레이아웃을 대칭으로 반전할 경우, 항목의 수평 정렬도 함께 반전됩니다. 그러나 horizontalItemAlignment 속성은 변경되지 않습니다. 항목의 실제 수평 정렬을 조회하려면 읽기 전용 속성인 effectiveHorizontalItemAlignment 을 사용하십시오.

Grid::layoutDirection 및 LayoutMirroring도 참조하십시오 .

effectiveLayoutDirection : enumeration [read-only]

이 속성은 그리드의 실제 레이아웃 방향을 지정합니다.

로케일 레이아웃에 첨부 속성 ` LayoutMirroring::enabled `을 사용할 경우, 그리드 포지셔너의 시각적 레이아웃 방향이 반전됩니다. 그러나 ` layoutDirection ` 속성은 변경되지 않습니다.

Grid::layoutDirection 및 LayoutMirroring도 참조하십시오 .

flow : enumeration

이 속성은 레이아웃의 흐름을 결정합니다.

사용 가능한 값은 다음과 같습니다.

• Grid.LeftToRight (기본값) - 항목들이 왼쪽에서 오른쪽으로( layoutDirection) 나란히 배치된 후, 다음 줄로 넘어갑니다.
• Grid.TopToBottom - 항목들이 위에서 아래로 나란히 배치된 후, 다음 열로 넘어갑니다.

layoutDirection : enumeration

이 속성은 레이아웃의 레이아웃 방향을 지정합니다.

사용 가능한 값은 다음과 같습니다.

• Qt.LeftToRight (기본값) - 항목은 위에서 아래로, 왼쪽에서 오른쪽으로 배치됩니다. 흐름 방향은 Grid::flow 속성에 따라 결정됩니다.
• Qt.RightToLeft - 항목은 위에서 아래로, 오른쪽에서 왼쪽으로 배치됩니다. 흐름 방향은 Grid::flow 속성에 따라 달라집니다.

Flow::layoutDirection 및 Row::layoutDirection항목도 참조하십시오 .

move : Transition

이 속성은 포지셔너 내에서 이동한 항목에 대해 전환이 실행되도록 합니다. 포지셔너의 경우, 이는 다음 항목에 적용됩니다:

• 포지셔너 내의 다른 항목이 추가, 제거 또는 재배치됨에 따라 위치가 변경되어 이동하는 자식 항목
• 포지셔너 내 다른 항목의 크기 조정으로 인해 위치가 변경되는 자식 항목

이 전환은 ` ViewTransition ` 속성을 사용하여 이동 중인 항목에 대한 자세한 정보를 확인할 수 있습니다. 단, 이 이동 전환의 경우, ` ViewTransition`의 `.targetIndexes` 및 ` ViewTransition`의 `.targetItems` 목록은 포지셔너 내 다른 항목의 추가로 인해 이 전환이 트리거될 때만 설정되며, 그 외의 경우에는 해당 목록이 비어 있습니다. 이러한 전환의 사용법에 대한 자세한 내용과 예제는 ViewTransition 문서를 참조하십시오.

또한 add, populate, ViewTransition 및 Qt Quick 의 ‘예제 - 포지셔너(Positioners)’ 섹션을참조하십시오 .

populate : Transition

이 속성은 포지셔너가 생성될 당시 해당 포지셔너에 속해 있는 항목에 대해 실행될 전환을 저장합니다. 이 전환은 포지셔너가 처음 생성될 때 실행됩니다.

이 전환은 ` ViewTransition ` 속성을 사용하여 추가되는 항목에 대한 자세한 정보를 확인할 수 있습니다. 이러한 전환 사용에 대한 자세한 내용과 예제는 ViewTransition 문서를 참조하십시오.

add, ViewTransition 및 Qt Quick 예제 - 포지셔너도참조하십시오 .

rowSpacing : real

이 속성은 행 사이의 간격을 픽셀 단위로 지정합니다.

이 속성이 설정되지 않은 경우, 행 간격으로 간격이 사용됩니다.

기본적으로 이 속성은 설정되어 있지 않습니다.

columnSpacing도 참조하십시오 .

rows : int

이 속성은 그리드의 행 수를 나타냅니다.

그리드에 지정된 행 수를 채울 만큼의 항목이 없는 경우, 일부 행의 너비는 0이 됩니다.

spacing : real

간격은 인접한 항목들 사이에 비워지는 픽셀 단위 거리입니다. 적용되는 간격의 크기는 가로와 세로 방향에서 동일합니다. 기본 간격은 0입니다.

아래 예제에서는 회색 배경 위에 빨간색, 파란색, 녹색 사각형이 포함된 그리드를 배치합니다. 그리드 포지셔너가 차지하는 영역은 흰색으로 표시됩니다. 왼쪽의 포지셔너는 간격이 없으며(기본값), 오른쪽의 포지셔너는 6의 간격이 적용되어 있습니다.

rows 및 columns도 참조하십시오 .

Signal 문서

positioningComplete()

이 신호는 위치 설정이 완료되었을 때 발생합니다.

메서드 설명서

void forceLayout()

Grid는 일반적으로 프레임당 한 번씩 자식 요소를 배치합니다. 즉, 스크립트 블록 내부에서는 기본 자식 요소가 변경되었을 수 있지만, Grid가 아직 그에 따라 업데이트되지 않았을 가능성이 있습니다.

이 메서드는 그리드가 자식 요소의 미처리된 변경 사항에 즉시 반응하도록 강제합니다.

참고: 일반적으로 메서드는 컴포넌트가 완료된 후에만 호출해야 합니다.