사용자 정의 컴포넌트 생성

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

사용자 정의 컴포넌트는 ‘ 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 Designer에서 기본적으로 지원되지 않는 방식으로 컴포넌트 인스턴스의 모양과 동작을 변경하려면, ‘ Connections ’ 보기의 ‘ Properties ’ 탭에서 사용자 정의 속성을 정의할 수 있습니다.

다음 섹션에서는 ‘ 2D ’ 보기를 사용하여 2D 콘텐츠를 편집하는 방법에 대한 자세한 정보와 기본 컴포넌트 인스턴스를 사용하여 UI 컨트롤을 만드는 예제를 다룹니다.

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

명명 규칙

UI 내 컴포넌트를 체계적으로 관리하기 위해 명명 규칙을 정하십시오. 컴포넌트에 정확한 이름을 지정하고 적절한 ID를 부여하십시오. 특히, 디자인 도구에서 내보낸 컴포넌트의 기본 이름을 확인하고 수정하여, 정한 명명 규칙을 따르며 신뢰할 수 있고 한눈에 의미를 알 수 있는 이름을 만들어야 합니다.

예를 들어, 버튼 심볼의 ID는 myButton_symbol일 수 있으며, 각 레이어에는 이 ID를 접두사로 사용하고 상태에 따라 접미사를 추가하여 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 ' 필드에서 템플릿으로 사용할 파일을 선택합니다.