레이아웃을 확장 가능하게 만들기

UI에서 컴포넌트의 위치는 절대적이거나 다른 컴포넌트에 대한 상대적인 위치입니다. 시각적 컴포넌트는 화면 좌표계의 특정 위치에 어느 순간에나 존재합니다. 시각적 컴포넌트의 x 및 y 좌표는 시각적 부모의 좌표에 상대적이며, 왼쪽 상단 모서리의 좌표는 (0, 0)입니다.

정적 UI를 디자인하는 경우 수동 위치 지정이 가장 효율적인 형태의 컴포넌트 위치 지정입니다. 동적 UI의 경우 다음 위치 지정 방법을 사용합니다.

바인딩 설정

속성 바인딩을 사용하면 컴포넌트의 속성을 연결할 수 있습니다. 따라서 한 컴포넌트의 변경 사항이 다른 컴포넌트에 영향을 줄 수 있습니다. 바인딩을 설정하면 다른 속성이나 데이터 값이 변경되어도 속성 값이 자동으로 최신 상태로 유지됩니다.

컴포넌트 프로퍼티에 프로퍼티 바인딩을 설정하려면 다음과 같이 하세요:

1. Properties 보기로 이동하여 속성 옆의 (Actions) 메뉴를 선택한 다음 Set Binding 을 선택합니다.

   

2. Binding Editor 에서 사용 가능한 컴포넌트 및 해당 속성 목록에서 컴포넌트와 속성을 선택합니다.

   

바인딩이 설정되면 Actions 메뉴 아이콘이 으로 변경됩니다. 바인딩을 제거하려면 Actions > Reset 을 선택합니다.

Connections 보기의 Bindings 탭을 사용하여 바인딩을 설정하는 방법을 알아보려면 속성 간에 바인딩 추가하기를 참조하세요.

앵커 및 여백 설정

앵커 기반 레이아웃에서 각 컴포넌트에는 상단, 하단, 왼쪽, 오른쪽, 채우기, 가로 중앙, 세로 중앙, 기준선 등 보이지 않는 앵커 라인 세트가 있습니다. 앵커를 사용하여 컴포넌트의 앵커 라인 중 하나 이상을 다른 컴포넌트의 앵커 라인에 연결하여 다른 컴포넌트에 인접하거나 내부에 컴포넌트를 배치할 수 있습니다. 컴포넌트가 변경되면 앵커링된 컴포넌트는 앵커링을 유지하기 위해 자동으로 조정됩니다.

컴포넌트의 앵커와 여백을 설정하려면 다음과 같이 하세요:

1. Properties > Layout > Anchors 로 이동합니다.
2. 컴포넌트에 원하는 앵커에 해당하는 버튼을 선택합니다. 여러 앵커를 결합할 수 있습니다. 선택한 각 버튼에 대해 해당 드롭다운에서 해당 앵커의 대상 컴포넌트를 선택할 수 있습니다.
3. 컴포넌트에 채우기 앵커를 적용하려면 (Fill to Parent)를 선택합니다.
4. 앵커를 저장된 상태로 재설정하려면 (Reset Anchors)를 선택합니다.

성능상의 이유로 컴포넌트를 형제 또는 직계 부모에만 앵커링할 수 있습니다. 기본적으로 앵커 버튼을 사용하면 컴포넌트가 부모에 앵커링됩니다. 컴포넌트의 형제 컴포넌트에 앵커링하려면 형제 컴포넌트를 Target 으로 선택합니다.

임의 앵커링은 지원되지 않습니다. 예를 들어, anchor.left: parent.right 을 선택하지 마세요. anchor.left: parent.left 을 선택합니다. 앵커 버튼을 사용할 때 부모 컴포넌트에 대한 앵커는 항상 같은 면으로 설정됩니다. 그러나 형제 컴포넌트에 대한 앵커는 반대쪽으로 설정됩니다: anchor.left: sibling.right. 이렇게 하면 형제 컴포넌트를 함께 유지할 수 있습니다.

다음 이미지에서 직사각형2의 왼쪽 가장자리는 왼쪽에 있는 형제 직사각형1의 오른쪽 가장자리에 앵커가 설정되어 있고, 위쪽 가장자리는 부모 직사각형의 상단에 앵커가 설정되어 있습니다.

앵커는 코드에서 다음과 같이 설정됩니다:

Rectangle {
    id: rectangle2
    width: 84
    height: 84
    color: "#967de7"
    anchors.left: rectangle1.right
    anchors.top: parent.top
    anchors.leftMargin: 51
    anchors.topMargin: 56
}

컴포넌트 외부의 빈 공간을 정의하려면 Margin 을 설정합니다. 여백은 앵커에 대해 작동합니다. 레이아웃이나 절대 위치 지정을 사용할 때는 여백이 적용되지 않습니다.

컴포넌트 정렬 및 배포

컴포넌트 그룹의 경우 컴포넌트를 선택하여 균등하게 정렬하고 배포합니다. 컴포넌트의 위치가 고정되어 있으므로 고정된 컴포넌트에는 이러한 기능을 적용할 수 없습니다. 확장성을 위해 디자인이 준비되면 정렬 및 분산된 컴포넌트를 고정하세요.

Alignment 필드에서 버튼을 선택하여 컴포넌트 그룹의 위/아래 또는 왼쪽/오른쪽 가장자리를 그룹 중앙에서 가장 멀리 떨어진 가장자리로 정렬합니다. 예를 들어 왼쪽으로 정렬하면 컴포넌트가 가장 왼쪽에 있는 컴포넌트에 정렬됩니다. 컴포넌트의 가로/세로 중심을 정렬하거나 둘 다 정렬할 수도 있습니다.

Align to 필드에서 선택 영역, 루트 컴포넌트 또는 Key object 필드에서 선택한 키 컴포넌트를 기준으로 컴포넌트를 정렬할지 선택합니다. 키 컴포넌트는 선택 영역의 일부여야 합니다.

구성 요소 또는 구성 요소 사이의 간격을 분산합니다. 구성 요소 또는 간격을 절반 픽셀로 끝나지 않고 동일한 픽셀 값으로 배포할 수 없는 경우 알림을 받게 됩니다. Qt Quick 디자이너가 가능한 가장 가까운 값을 사용하여 컴포넌트 또는 간격을 배포하도록 허용하거나 컴포넌트와 간격이 완벽하게 배포되도록 디자인을 조정합니다.

컴포넌트를 배포할 때 Distribute objects 필드에서 버튼을 선택하여 컴포넌트 사이의 거리를 위/아래 또는 왼쪽/오른쪽 가장자리에서 계산할지, 아니면 가로/세로 중심에서 계산할지 결정합니다.

간격을 배포할 때 Distribute spacing 필드의 버튼을 선택하여 대상 영역 내에서 균등하게 배포할지 아니면 시작점에서 계산된 지정된 거리로 배포할지 결정합니다. 대상 영역 내에서 컴포넌트가 균등하게 분포되는 방향을 X축을 따라 가로로 또는 Y축을 따라 세로로 선택합니다.

또는 시작점 버튼 중 하나를 선택하여 대상 영역 또는 항목의 위쪽/왼쪽 또는 아래쪽/오른쪽 가장자리 또는 중앙을 선택하여 픽셀 단위로 간격을 분배합니다. 사용할 가장자리는 항목이 가로로 배포되는지 세로로 배포되는지에 따라 달라집니다:

• 대상 영역 또는 항목의 왼쪽 가장자리를 시작점으로 사용하려면 및 을 선택합니다.
• 상단 가장자리를 사용하려면 및 을 선택합니다.
• 오른쪽 가장자리를 사용하려면 및 을 선택합니다.
• 아래쪽 가장자리를 사용하려면 및 을 선택합니다.

Pixel spacing 필드에서 컴포넌트 사이의 간격을 픽셀 단위로 설정합니다. 픽셀 단위 간격 분배를 비활성화하려면 버튼을 선택합니다.

포지셔너 사용

포지셔너 컴포넌트는 하위 컴포넌트의 위치를 관리하는 컨테이너입니다. 많은 사용 사례에서 사용하기에 가장 좋은 포지셔너는 간단한 열, 행, 흐름 또는 그리드입니다. Components > Default Components > Positioner 에서 제공되는 컴포넌트를 사용하여 이러한 포메이션에서 컴포넌트의 자식을 가장 효율적인 방식으로 배치하세요.

Column , Row , Grid , 또는 Flow 에 여러 컴포넌트를 배치합니다:

1. 2D 보기에서 컴포넌트를 선택합니다.
2. 2D 보기의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 Positioner > Row, Column, Grid 또는 Flow Positioner 을 선택합니다.

열 위치 지정자

Column 는 단일 열을 따라 하위 컴포넌트를 배치합니다. 앵커를 사용하지 않고 일련의 컴포넌트를 세로로 배치하는 편리한 방법으로 사용됩니다.

모든 포지셔너의 경우 Spacing 필드에서 하위 컴포넌트 사이의 간격을 설정합니다.

또한 패딩 섹션에서 콘텐츠와 컴포넌트의 왼쪽, 오른쪽, 위쪽, 아래쪽 가장자리 사이의 수직 및 수평 패딩을 설정합니다.

행 및 흐름 포지셔너

Row 는 하나의 행을 따라 자식 컴포넌트를 배치합니다. 앵커를 사용하지 않고 일련의 컴포넌트를 가로로 배치하는 편리한 방법으로 사용됩니다.

Flow 컴포넌트는 페이지의 단어처럼 자식 컴포넌트를 배치하여 컴포넌트의 행이나 열을 만들 수 있도록 감싸줍니다.

흐름 및 행 포지셔너의 경우 Flow 필드에서 흐름의 방향을 왼쪽에서 오른쪽 또는 위에서 아래로 설정할 수도 있습니다. Flow 컴포넌트의 너비 또는 높이가 초과될 때까지 Layout direction 필드에서 설정한 값에 따라 컴포넌트가 나란히 배치된 다음 다음 행 또는 열로 래핑됩니다.

Layout direction 필드에서 레이아웃 방향을 LeftToRight 또는 RightToLeft 으로 설정합니다. 행의 너비를 명시적으로 설정한 경우 왼쪽 앵커는 행의 왼쪽에, 오른쪽 앵커는 그 오른쪽에 유지됩니다.

그리드 포지셔너

Grid 은 모든 하위 컴포넌트를 담을 수 있을 만큼 큰 셀 그리드를 생성하고 이러한 컴포넌트를 왼쪽에서 오른쪽, 위에서 아래로 셀에 배치합니다. 각 컴포넌트는 셀의 왼쪽 상단 모서리에 위치(0, 0)로 배치됩니다.

Qt Quick 디자이너는 2D 보기에서 하위 컴포넌트의 위치를 기반으로 그리드를 생성합니다. Rows 및 Columns 필드에서 행과 열의 수를 수정할 수 있습니다.

흐름 및 레이아웃 방향 외에도 그리드 구성 요소의 가로 및 세로 정렬을 설정할 수 있습니다. 기본적으로 그리드 구성 요소는 상단에 세로로 정렬됩니다. 가로 정렬은 Layout direction 필드의 값을 따릅니다. 예를 들어 레이아웃 방향을 LeftToRight 으로 설정하면 구성 요소가 왼쪽에 정렬됩니다.

레이아웃을 미러링하려면 레이아웃 방향을 RightToLeft 으로 설정합니다. 구성 요소의 가로 정렬도 미러링하려면 Alignment H 필드에서 AlignRight 을 선택합니다.

레이아웃 사용

Components >에서 제공되는 컴포넌트를 사용하여 Qt Quick Layouts 에서 제공되는 컴포넌트를 사용하여 UI에서 컴포넌트를 정렬합니다.

포지셔너와 달리 레이아웃은 하위 컴포넌트의 위치와 크기를 모두 관리하므로 동적이고 크기 조정이 가능한 UI에 적합합니다. 그러나 Properties 의 지오메트리 - 2D 섹션에서 하위 컴포넌트의 암시적 크기가 만족스럽지 않은 경우 고정 위치 및 크기를 선택하지 마세요.

앵커 또는 레이아웃 자체의 너비 및 높이 속성을 사용하여 레이아웃이 아닌 부모 컴포넌트에 대한 크기를 선택합니다. 단, 레이아웃 내에 자식 컴포넌트를 앵커로 고정하지 마세요.

컴포넌트를 Grid Layout 에 넣으려면

1. 모든 컴포넌트를 선택하고 그 중 하나를 마우스 오른쪽 버튼으로 클릭합니다.
2. 컨텍스트 메뉴에서 Layout > Grid Layout 을 선택합니다.

   

3. Grid Layout 에 할당하면 컴포넌트가 행과 열로 정렬됩니다.

   

그리드 내에서 컴포넌트의 너비와 높이를 조정하려면 다음 단계를 따르세요:

1. 2D 보기에서 Rectangle 컴포넌트를 선택하고 Properties 보기에서 Layout 로 이동합니다.
2. Fill layout 에서 Width 및 Height 확인란을 모두 선택합니다.

   

   참고: Row span 및 Column span 을 조작하여 컴포넌트가 Grid Layout 내에서 더 많은 행과 열 공간을 차지할 수 있도록 합니다.

3. 모든 Rectangle 구성 요소에 대해 이전 단계를 반복합니다.
4. Navigator 보기에서 Grid Layout 을 선택합니다.
5. Properties 보기에서 Geometry-2D 로 이동합니다. Size 에서 Width 및 Height 을 늘립니다.
6. 모든 Rectangle 컴포넌트가 그에 따라 변경됩니다.

   

스택 레이아웃

컴포넌트를 서로 위에 스택하려면 Stack Layout 을 사용할 수 있습니다.

사용하려면 Stack Layout:

1. Stack Layout 컴포넌트를 2D 보기 또는 Navigator 보기로 드래그합니다.
2. Components 보기에서 2D 보기 또는 Navigator 보기로 스택하려는 컴포넌트를 드래그하여 Stack Layout 컴포넌트 상단에 배치합니다.

   참고: 2D 보기에서 Stack Layout 컴포넌트 이름 옆의 버튼을 선택하여 Stack Layout 에 컴포넌트를 추가할 수도 있습니다.

3. Stack Layout 의 컴포넌트 사이를 이동하려면 2D 보기에서 Stack Layout 컴포넌트를 선택합니다. 그런 다음 (Previous) 및 (Next) 버튼을 선택합니다. 그러면 Stack Layout 의 Current index 이 업데이트되고 Current index 컴포넌트가 스택의 맨 위에 표시됩니다.

   참고: 또는 Stack Layout 구성 요소를 선택한 다음 Properties 보기 > Stack Layout 로 이동하여 Current index 을 업데이트합니다. 색인은 "0"(0)부터 시작합니다.

아래 예시를 따라 Stack Layout 의 작동 방식을 이해하세요:

1. Component 보기에서 Navigator 또는 2D 보기로 Stack Layout 를 드래그합니다.
2. Rectangle 컴포넌트 3개를 Navigator 보기의 Stack Layout 컴포넌트로 드래그합니다.

   

3. 사각형 컴포넌트를 선택하고 Properties 보기 > 사각형 > Fill color 으로 이동하여 "#ff0000"으로 변경합니다.
4. 두 번째 사각형의 경우 이전 프로세스를 따라 Fill color 을 "0000ff"로 변경합니다.
5. 세 번째 사각형의 경우 이전 프로세스를 따라 Fill color 을 "00ff00"으로 변경합니다.
6. Components 보기에서 2D 보기로 Slider 컴포넌트를 드래그합니다.
7. Slider 컴포넌트를 선택하고 Properties 보기 > Slider 로 이동합니다. Value 을 "0", From 을 "0", To 을 "2", Step size 을 "1"로 설정합니다.

   

8. Navigator 보기로 이동하여 Stack Layout 컴포넌트를 선택합니다.
9. Properties 보기 > Stack Layout 로 이동합니다. 을 선택하여 컨텍스트 메뉴에 액세스한 다음 Set Binding 을 선택합니다.

   

10. Binding Editor 왼쪽 드롭다운에서 Slider 을 선택하고 오른쪽 드롭다운에서 Value 을 선택합니다. OK 을 선택하여 바인딩을 수락합니다.

    

11. Live Preview 또는 Run Project 을 선택하여 애플리케이션을 실행합니다.
12. 슬라이더를 드래그하여 사각형의 색상을 변경합니다.

    

구성 요소 구성

Frame 및 Group Box 컨트롤을 사용하여 컨트롤 그룹 주위에 프레임을 그릴 수 있습니다.

다음 표에는 UI에서 컴포넌트를 구성하는 데 사용할 수 있는 UI 컨트롤이 나열되어 있습니다. 컨트롤에 액세스하려면 Components > Qt Quick Controls.

아이콘	이름	목적
	Frame	컨트롤 그룹을 둘러싼 시각적 프레임입니다.
	Group Box	컨트롤 그룹을 둘러싼 제목이 지정된 시각적 프레임입니다.
	Page	머리글 및 바닥글을 지원하는 스타일이 지정된 페이지 컨트롤입니다.
	Pane	애플리케이션 스타일 및 테마와 일치하는 배경입니다.