레이아웃의 크기 조정 가능하게 만들기

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)으로 설정됩니다. 이를 통해 형제 컴포넌트를 함께 유지할 수 있습니다.

다음 이미지에서 rectangle2의 왼쪽 가장자리는 왼쪽에 있는 형제 컴포넌트인 rectangle1의 오른쪽 가장자리에 고정되어 있으며, 위쪽 가장자리는 부모 컴포넌트의 상단에 고정되어 있습니다.

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

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 Designer’가 가능한 한 가장 가까운 값을 사용하여 구성 요소나 간격을 분배하도록 허용하거나, 구성 요소와 간격이 완벽하게 분배되도록 디자인을 조정하십시오.

구성 요소를 분배할 때는 ‘ Distribute objects ’ 필드의 버튼을 선택하여 구성 요소 간의 거리가 상단/하단 또는 좌측/우측 가장자리에서 계산될지, 아니면 수평/수직 중심에서 계산될지 결정하십시오.

간격을 배치할 때는 ‘ Distribute spacing ’ 필드의 버튼을 선택하여, 대상 영역 내에서 균등하게 배치할지, 아니면 시작점을 기준으로 계산된 지정된 간격으로 배치할지 결정합니다. 대상 영역 내에서 구성 요소가 균등하게 배치될 방향을 선택하십시오: x축을 따라 수평으로, 또는 y축을 따라 수직으로.

또는 시작점 버튼 중 하나(대상 영역 또는 항목의 상단/왼쪽, 하단/오른쪽 가장자리 또는 중심)를 선택하여 픽셀 단위로 간격을 분배할 수 있습니다. 사용할 가장자리는 항목이 수평으로 분배되는지 수직으로 분배되는지에 따라 달라집니다:

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

' Pixel spacing ' 필드에서 구성 요소 간의 간격을 픽셀 단위로 설정합니다. 픽셀 단위의 간격 분배를 비활성화하려면 ' ' 버튼을 선택하십시오.

포지셔너 사용

포지셔너 컴포넌트는 자식 컴포넌트의 위치를 관리하는 컨테이너입니다. 대부분의 사용 사례에서 가장 적합한 포지셔너는 간단한 열(column), 행(row), 흐름(flow) 또는 그리드(grid)입니다. ‘ Components > Default Components > Positioner ’에서 제공되는 컴포넌트를 사용하여 컴포넌트의 자식 요소를 이러한 구성으로 가능한 한 가장 효율적인 방식으로 배치하십시오.

Column , Row , Grid 또는 Flow 에서 여러 컴포넌트의 위치를 지정하려면:

1. 2D 뷰에서 구성 요소를 선택합니다.
2. 2D 뷰의 아무 곳이나 마우스 오른쪽 버튼으로 클릭한 다음, ‘ Positioner ’ > ‘ Row ’, ‘ Column ’, ‘ Grid ’ 또는 ‘ Flow Positioner ’을 선택합니다.

컬럼 포지셔너

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

모든 포지셔너의 경우, ‘ Spacing ’ 필드에서 자식 컴포넌트 간의 간격을 설정합니다.

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

Row 및 Flow 포지셔너

' Row '는 자식 컴포넌트를 단일 행에 배치합니다. 이는 앵커를 사용하지 않고 일련의 컴포넌트를 수평으로 배치하는 편리한 방법으로 사용됩니다.

Flow 컴포넌트는 자식 컴포넌트를 페이지의 단어처럼 배치하여, 컴포넌트가 줄바꿈되도록 하여 행이나 열을 형성합니다.

흐름(flow) 및 행(row) 배치 도구의 경우, ‘ Flow ’ 필드에서 흐름 방향을 ‘왼쪽에서 오른쪽(left-to-right)’ 또는 ‘위에서 아래(top-to-bottom)’로 설정해야 합니다. 구성 요소는 ‘ Layout direction ’ 필드에 설정한 값에 따라 서로 나란히 배치되며, ‘ Flow ’ 구성 요소의 너비나 높이를 초과할 때까지 이어지다가 다음 행이나 열로 넘어갑니다.

‘ 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 ’의 ‘Geometry - 2D’ 섹션에서 자식 컴포넌트의 암시적 크기가 만족스럽지 않은 경우가 아니라면, 고정된 위치와 크기를 선택하지 마십시오.

레이아웃 자체의 앵커 또는 width 및 height 속성을 사용하여, 레이아웃이 아닌 상위 컴포넌트를 기준으로 레이아웃의 크기를 지정하십시오. 단, 레이아웃 내의 자식 컴포넌트에는 앵커를 지정하지 마십시오.

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”(영)부터 시작합니다.

Stack Layout 가 어떻게 작동하는지 이해하려면 아래 예제를 참고하십시오:

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

   

3. 사각형 컴포넌트를 선택하고 Properties 뷰 > Rectangle > Fill color 로 이동한 후, 색상을 "#ff0000"으로 변경합니다.
4. 두 번째 사각형의 경우, 앞서 설명한 과정을 따라 Fill color 를 "0000ff"로 변경합니다.
5. 세 번째 사각형의 경우, 앞서 설명한 과정을 따라 ' Fill color '를 "00ff00"으로 변경합니다.
6. Components 뷰에서 Slider 컴포넌트를 2D 뷰로 드래그합니다.
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	애플리케이션 스타일 및 테마와 일치하는 배경.