컴포넌트 파일 탐색

Navigator 뷰에는 현재 컴포넌트 파일에 포함된 컴포넌트와 그 관계들이 표시됩니다. 컴포넌트(1)는 상위 항목(2) 아래에 트리 구조로 나열됩니다. 컴포넌트를 미리 보려면 마우스를 해당 컴포넌트 위로 가져가세요(3).

Navigator 뷰에서 컴포넌트를 선택하면 Properties 뷰에서 해당 속성을 편집할 수 있습니다. 컴포넌트는 상위 컴포넌트의 속성에 접근할 수 있습니다. 2D 뷰에서 컴포넌트를 선택하려면 컴포넌트를 마우스 오른쪽 버튼으로 클릭한 다음, ‘ Selection ’ 하위 메뉴에서 다른 컴포넌트를 선택하십시오.

일반적으로 ‘ 2D ’ 뷰에서 자식 컴포넌트는 부모 컴포넌트 내에 위치합니다. 하지만 반드시 부모 컴포넌트 안에 들어갈 필요는 없습니다. 예를 들어, 마우스 영역을 그 아래에 있는 사각형이나 이미지보다 더 크게 만들고 싶을 수 있습니다.

컴포넌트를 복사하면 해당 컴포넌트의 모든 자식 컴포넌트도 함께 복사됩니다. 컴포넌트를 제거하면 자식 컴포넌트도 함께 제거됩니다.

컨텍스트 메뉴 명령을 선택하여 컴포넌트에 명령을 적용할 수 있습니다. 사용 가능한 명령은 컴포넌트 유형에 따라 다릅니다. 예를 들어, 컨텍스트 메뉴에서 ‘ Change Source URL ’를 선택하여 Image 컴포넌트의 소스를 변경할 수 있습니다.

컴포넌트 아이콘에 색상 지정

Navigator 에서 서로 다른 유형의 컴포넌트를 시각적으로 구분하기 위해 컴포넌트 아이콘에 색상을 지정할 수 있습니다.

Navigator 에 나열된 컴포넌트 아이콘의 색상 표시를 켜거나 끄려면 ‘ (컴포넌트 아이콘 색상 지정)’을 선택하십시오. 색상 지정 기능은 다음 색상을 사용합니다.

• 2D 컴포넌트: 녹색.
• 3D 컴포넌트: 노란색.
• 재료 및 텍스처: 파란색.
• 기타 유형의 컴포넌트: 회색.

네비게이터에서 컴포넌트 표시 및 숨기기

Navigator 에서 컴포넌트를 표시하거나 숨기려면 다음 방법을 사용하십시오.

참조 노드 표시 및 숨기기

Navigator 에서 참조 노드를 표시하거나 숨길 수 있습니다. 참조 노드를 클릭하여 참조된 노드를 선택합니다.

Navigator 의 컴포넌트에는 하나 이상의 속성에 바인딩된 노드가 있을 수 있으며, 이를 참조 노드라고 합니다. 참조 노드의 표시/숨김 설정을 전환하여 각 컴포넌트의 자식 노드로 표시할 수 있습니다. 참조 노드는 현재 노드 아래에 중첩되어 표시되므로, 바인딩 및 노드 간 종속성을 더 쉽게 추적할 수 있습니다.

참조 노드의 표시 여부를 전환하려면 ‘ (참조 노드 표시)’를 선택하십시오.

다른 컴포넌트 표시 및 숨기기

애플리케이션의 특정 부분에 집중할 때 ‘ 2D ’ 뷰에서 컴포넌트를 표시하거나 숨기려면, ‘ Navigator ’에서 ‘ ’ 및 ‘ ’를 선택하십시오.

애플리케이션 코드에서 컴포넌트의 표시 여부를 변경하려면, ‘ Properties ’ 뷰에서 해당 컴포넌트의 ‘ Visibility ’을 설정하거나 컨텍스트 메뉴에서 ‘ Visibility ’을 선택하십시오.

또한 Properties 에서 Opacity 필드를 0으로 설정하여 애니메이션을 적용할 UI의 컴포넌트를 숨길 수도 있습니다.

다른 모든 속성과 마찬가지로, 가시성 및 불투명도는 상위 컴포넌트에서 상속됩니다. 하위 컴포넌트를 숨기거나 표시하려면 상위 컴포넌트의 속성을 편집하십시오.

Navigator 에서 보이지 않는 컴포넌트를 표시하거나 숨기려면 를 선택하십시오.

노드 분리

Navigator 에서 선택한 2D 노드를 분리하여 필요한 노드만 표시할 수 있습니다. 노드 분리는 Navigator 에 숨기고 싶은 노드가 많을 때, 하나씩 선택하여 숨기는 번거로움을 피할 수 있어 유용합니다.

노드를 분리하려면:

1. Navigator 에서 숨기려는 노드를 선택합니다.
2. 선택한 노드를 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴를 열고, ‘ Isolate Selection ’을 선택하거나 Shift + B를 누릅니다.

Navigator 에서 모든 노드를 표시하려면, 선택한 노드를 마우스 오른쪽 버튼으로 클릭하고 ‘ Show All Nodes ’를 선택하거나 Alt/Option + B를 누르십시오.

컴포넌트 잠금

복잡한 애플리케이션을 설계할 때, ‘ Qt Quick Designer’ 뷰 중 하나에서 실수로 컴포넌트의 속성을 수정하여 의도하지 않은 결과가 발생할 수 있습니다. 예를 들어, ‘ 2D ’ 뷰가 복잡해져 특정 컴포넌트를 선택하거나 변형하려고 할 때 다른 컴포넌트가 방해가 되어, 의도한 것보다 더 많은 컴포넌트가 변형되는 경우가 있습니다.

현재 편집 중이 아닌 컴포넌트와 그 자식 요소를 잠그려면, ‘ Navigator ’에서 ‘ ’를 선택하십시오. 잠긴 컴포넌트는 ‘ Qt Quick ’ 디자이너의 어떤 뷰에서도 조작할 수 없습니다. 다시 편집하려면 컴포넌트의 잠금을 해제하십시오.

2D 에서는 잠긴 컴포넌트를 선택할 수 없으며, Properties 에서는 해당 컴포넌트의 속성에 접근할 수 없습니다.

잠긴 컴포넌트의 속성을 변경하는 상태를 제거하려고 하면 제거 여부를 확인하는 메시지가 표시됩니다.

키프레임 애니메이션에 이징 커브를 추가한 경우, Curves 뷰에서 이를 잠그거나 잠금을 해제할 수 있습니다. 이징 커브가 포함된 컴포넌트를 잠그면, Navigator 과 Curves 간에 잠금 상태가 동기화됩니다.

컴포넌트 정렬

Navigator, Code 보기 또는 Edit 모드에서 컴포넌트 파일 내 컴포넌트의 순서를 확인할 수 있습니다. 파일 내 컴포넌트의 순서는 2D 보기에서 컴포넌트가 그려지는 순서도 결정합니다. 기본적으로 파일 상단에 위치한 컴포넌트는 ‘ Navigator ’ 트리의 하단에 나열되며, ‘ 2D ’ 뷰에서는 겹치는 컴포넌트 뒤에 표시됩니다. 다른 일부 도구와 마찬가지로 파일에 나타나는 순서대로 컴포넌트를 나열하려면 ‘ ’을 선택하십시오.

컴포넌트를 해당 상위 요소 내 트리 구조의 맨 위나 맨 아래로 이동하려면, ‘ Navigator ’에서 해당 컴포넌트를 마우스 오른쪽 버튼으로 클릭한 다음, ‘ Arrange ’ > ‘ Bring to Front ’ 또는 ‘ Send to Back ’을 선택하십시오. 컴포넌트를 위나 아래로 이동하려면 ‘ Bring Forward ’ 또는 ‘ Send Backward ’을 선택하십시오.

선택한 구성 요소의 순서를 반대로 바꾸려면, ‘ Arrange ’ > ‘ Reverse ’을 선택하십시오.

또한 컴포넌트를 트리 내의 다른 위치로 드래그하거나, ‘ ’ 및 ‘ ’ 버튼을 사용하여 트리 내에서 컴포넌트를 이동할 수도 있습니다. ‘ ’ 및 ‘ ’ 버튼을 사용하여 컴포넌트의 상위 요소를 변경할 수 있습니다.

컴포넌트 인스턴스를 ‘ 2D ’ 보기로 드래그하면, 새 컴포넌트가 그 아래에 있는 컴포넌트의 자식으로 추가됩니다. 컴포넌트를 이동할 때, 단순히 위치를 조정하려는 것인지 아니면 새로운 상위 컴포넌트에 연결하려는 것인지 판단할 수 없습니다. 따라서 상위 컴포넌트는 자동으로 변경되지 않습니다.

속성 별칭 추가

속성 별칭은 컴포넌트 외부에서 사용할 수 있는 속성입니다. ‘ Code ’ 뷰나 ‘ Edit ’ 모드에서 코드를 확인하면, 속성 별칭 선언은 일반적인 속성 정의와 비슷해 보이지만, 속성 유형 대신 alias 키워드가 필요하며, 속성 선언의 우측은 유효한 별칭 참조여야 한다는 점이 다릅니다.

property alias <name>: <alias reference>

예를 들어, 다음 별칭은 item 컴포넌트 인스턴스 내의 button 컴포넌트 인스턴스를 참조합니다:

property alias button: item.button

유효한 별칭 참조:

• 속성 별칭이 선언된 컴포넌트 내의 컴포넌트 인스턴스나 속성만을 가리킬 수 있습니다.
• 임의의 JavaScript 표현식을 포함할 수 없습니다.
• 속성 별칭이 선언된 컴포넌트와 다른 유형의 컴포넌트를 가리킬 수 없습니다.
• 별칭을 처음 선언할 때 반드시 정의되어야 합니다.
• 부착된 속성을 가리킬 수 없습니다.
• 3단계 이하로 중첩된 컴포넌트 인스턴스의 속성을 가리킬 수 없습니다.

Navigator 에서 ‘ (Export)’ 버튼을 사용하여 유효한 별칭 참조와 함께 컴포넌트를 속성 별칭으로 내보낼 수 있습니다.

그런 다음 다른 컴포넌트에서 이 속성 별칭을 사용하여 이 컴포넌트에 대한 연결을 생성할 수 있습니다.

컴포넌트 내에서 이동

컴포넌트를 지정하는 파일(ui.qml, .qml)에는 별도의 파일에 지정된 다른 컴포넌트의 인스턴스가 포함될 수 있습니다. 다양한 뷰에서 여러 가지 방법으로 컴포넌트를 지정하는 파일을 열 수 있습니다.

• 2D 또는 Navigator 뷰에서 컴포넌트 인스턴스를 마우스 오른쪽 버튼으로 클릭한 다음, 컨텍스트 메뉴에서 [ Edit Component ]을 선택하거나 F2 키를 누릅니다.
• Properties 에서 ‘ Edit Base Component ’을 선택합니다.

컴포넌트 계층 구조가 브레드크럼 경로로 표시되며, 여기서 컴포넌트 이름을 선택하여 해당 파일을 열 수 있습니다. 이를 통해 컴포넌트 편집을 마친 후 최상위 수준으로 쉽게 돌아갈 수 있습니다.