컴포넌트 파일 탐색

Navigator 보기에는 현재 컴포넌트 파일에 있는 컴포넌트와 그 관계가 표시됩니다. 컴포넌트(1)는 트리 구조로 나열되며 상위 컴포넌트(2) 아래에 표시됩니다. 컴포넌트를 미리 보려면 컴포넌트 위로 마우스를 가져갑니다(3).

Navigator 보기에서 컴포넌트를 선택하면 Properties 보기에서 해당 속성을 편집할 수 있습니다. 컴포넌트는 상위 컴포넌트의 속성에 액세스할 수 있습니다. 2D 보기에서 컴포넌트를 선택하려면 컴포넌트를 마우스 오른쪽 버튼으로 클릭하고 Selection 하위 메뉴에서 다른 컴포넌트를 선택합니다.

일반적으로 하위 컴포넌트는 2D 보기의 상위 컴포넌트 내에 위치합니다. 하지만 반드시 상위 컴포넌트 안에 있어야 할 필요는 없습니다. 예를 들어 마우스 영역을 그 아래의 직사각형이나 이미지보다 크게 만들고 싶을 수 있습니다.

컴포넌트를 복사하면 모든 하위 컴포넌트도 복사됩니다. 컴포넌트를 제거하면 하위 컴포넌트도 제거됩니다.

상황에 맞는 메뉴 명령을 선택하여 컴포넌트에 명령을 적용합니다. 명령의 사용 가능 여부는 컴포넌트 유형에 따라 다릅니다. 예를 들어, 컨텍스트 메뉴에서 Change Source URL 을 선택하여 이미지 컴포넌트의 소스를 변경할 수 있습니다.

컴포넌트 아이콘 색상 지정하기

컴포넌트 아이콘에 색상을 지정하여 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 디자이너 보기 중 하나에서 컴포넌트의 속성을 실수로 수정하여 예상치 못한 결과를 초래하기 쉽습니다. 예를 들어 특정 컴포넌트를 선택하거나 변형하려고 할 때 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 모드에서 코드를 볼 때 속성 별칭 선언은 속성 유형 대신 별칭 키워드가 필요하고 속성 선언의 오른쪽에 유효한 별칭 참조가 있어야 한다는 점을 제외하면 일반적인 속성 정의처럼 보입니다:

property alias <name>: <alias reference>

예를 들어 다음 별칭은 항목 컴포넌트 인스턴스 내의 버튼 컴포넌트 인스턴스를 나타냅니다:

property alias button: item.button

유효한 별칭 참조입니다:

• 속성 별칭이 선언된 컴포넌트 내의 컴포넌트 인스턴스 또는 속성만 가리킬 수 있습니다.
• 임의의 자바스크립트 표현식을 포함할 수 없습니다.
• 속성 별칭이 선언된 컴포넌트가 아닌 다른 유형의 컴포넌트를 가리킬 수 없습니다.
• 별칭을 처음 선언할 때 정의해야 합니다.
• 연결된 속성을 가리킬 수 없습니다.
• 세 번째 수준 아래의 중첩된 컴포넌트 인스턴스의 속성을 가리킬 수 없습니다.

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

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

컴포넌트 내 이동

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

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

컴포넌트 계층 구조가 빵 부스러기 경로로 표시되며, 여기서 컴포넌트 이름을 선택하여 각 파일을 열 수 있습니다. 이렇게 하면 컴포넌트 편집이 끝나면 최상위 레벨로 쉽게 돌아갈 수 있습니다.