사용자 지정 컴포넌트 만들기

프로젝트 마법사 템플릿을 사용하여 사용자 지정 컴포넌트와 컨트롤을 만들거나 컴포넌트 인스턴스를 별도의 파일로 이동하여 인스턴스를 만들 수 있는 새 컴포넌트로 전환할 수 있습니다. 그런 다음 다른 컴포넌트에서 새 컴포넌트의 인스턴스를 사용할 수 있습니다.

사용자 지정 컴포넌트는 Components > My Components 에 저장됩니다. 사용자 지정 컴포넌트의 인스턴스는 Components 에서 2D 또는 Navigator 보기로 드래그하여 만들 수 있습니다.

컴포넌트를 처음부터 만들기

마법사 템플릿을 사용하여 사용자 지정 컴포넌트를 만들려면 다음과 같이 하세요:

1. File > New File > Qt Quick Files > Qt Quick UI File > Choose 을 선택하여 새 .ui.qml 파일을 만듭니다.

   참고: 컴포넌트는 파일 이름이 대문자로 시작하는 경우에만 Components > My Components 에 나열됩니다.

2. Design 을 선택하여 2D 보기에서 파일을 엽니다.
3. 컴포넌트를 Components 에서 Navigator 또는 2D 보기로 드래그합니다.
4. Properties 보기에서 컴포넌트 속성을 편집합니다. 사용 가능한 속성은 컴포넌트 유형에 따라 다릅니다. Connections 보기의 Properties 탭에서 컴포넌트에 대한 속성을 추가할 수 있습니다.
5. Qt Quick 디자이너에서 기본적으로 지원되지 않는 방식으로 컴포넌트 인스턴스의 모양과 동작을 변경하려면 Connections 보기의 Properties 탭에서 사용자 지정 속성을 정의할 수 있습니다.

다음 섹션에는 2D 보기를 사용하여 2D 콘텐츠를 편집하는 방법과 기본 컴포넌트의 인스턴스를 사용하여 UI 컨트롤을 만드는 방법에 대한 자세한 정보가 포함되어 있습니다:

• 2D 보기
• 버튼 만들기
• 확장 가능한 버튼 및 테두리 만들기

명명 규칙

명명 규칙을 설정하여 UI의 컴포넌트를 체계적으로 정리하세요. 컴포넌트의 이름을 정확하게 지정하고 적절한 ID를 부여하세요. 특히 디자인 도구에서 내보내는 컴포넌트의 기본 이름을 확인하고 수정하여 설정한 명명 규칙을 따르는 신뢰할 수 있고 이해하기 쉬운 이름을 만드세요.

예를 들어, 버튼 심볼의 ID는 myButton_symbol이고 다른 레이어에는 접두사로 state가 추가되어 myButton_symbol_default와 같은 ID가 생성될 수 있습니다. 프로젝트 후반부에 추가 마우스 영역을 준비하려면 myButton_symbol_hotspot과 같은 유사한 ID를 사용할 수 있습니다. 버튼을 화면의 인스턴스로 사용하는 경우 이러한 각 인스턴스에 해당 화면과 관련된 고유 ID를 부여합니다. 예를 들어, myButton_myMenu_home, myButton_myMenu_profile, myButton_myMenu_settings 등이 있습니다.

컴포넌트 인스턴스를 사용자 정의 컴포넌트로 전환

재사용 가능한 컴포넌트를 만드는 또 다른 방법은 컴포넌트 인스턴스를 별도의 컴포넌트 파일(.ui.qml)로 이동하여 사용자 정의 컴포넌트로 전환하는 것입니다. Navigator 또는 2D 보기에서 컴포넌트 인스턴스를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 Create Component 을 선택합니다.

새 컴포넌트에 이름을 지정하고 새 컴포넌트에 속성을 설정할지 아니면 원래 컴포넌트에 속성을 설정할지 선택합니다.

OK 을 선택하면 새 컴포넌트 파일이 생성되고 현재 컴포넌트 파일의 코드에 컴포넌트 인스턴스가 추가됩니다. 2D 보기의 UI 모양은 변경되지 않습니다.

컴포넌트의 모든 인스턴스에 대해 변경하려는 속성을 편집하기 위해 새 컴포넌트 파일을 열려면 컴포넌트를 마우스 오른쪽 버튼으로 클릭한 다음 상황에 맞는 메뉴에서 Go into Component 을 선택합니다. 기본 컴포넌트를 여는 다른 방법은 컴포넌트 내에서 이동하기를 참조하세요.

사용자 정의 컴포넌트는 Components > My Components 에 나열되어 있으며, 해당 컴포넌트의 인스턴스를 사용하여 더 많은 컴포넌트를 만들 수 있습니다.

템플릿으로 파일 병합하기

CSS 스타일시트를 사용하는 것과 비슷한 방식으로 두 번째 파일을 사용하여 현재 컴포넌트 파일을 기존의 두 번째 컴포넌트 파일과 병합할 수 있습니다.

현재 파일을 템플릿과 병합하려면 Navigator 또는 2D 보기에서 컴포넌트를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 Merge with Template 을 선택합니다.

Template 필드에서 템플릿으로 사용할 파일을 선택합니다.