위젯 기반 UI 디자인

방법: 위젯 기반 UI 디자인

Qt Creator 이 기능을 사용하면 모든 .ui 파일이 통합된 Qt Widgets Designer 에서 Design 모드로 자동으로 열립니다.

Qt Widgets Designer가 디자인 모드로 열려 있습니다" src="images/qtcreator-formedit.png" title="Qt Widgets Designer가 디자인 모드로 열려 있습니다"/>

Qt Widgets Designer 로 생성된 위젯과 양식은 Qt 신호 및 슬롯 메커니즘을 사용하여 프로그래밍된 코드와 원활하게 통합되며, 이를 통해 그래픽 요소에 동작을 쉽게 할당할 수 있습니다. Qt Widgets Designer 에서 설정된 모든 속성은 코드 내에서 동적으로 변경할 수 있습니다. 또한, 위젯 승격 및 사용자 정의 플러그인과 같은 기능을 통해 Qt Widgets Designer 에서 사용자 정의 위젯을 사용할 수 있습니다.

Qt Widgets Designer 에 대한 자세한 내용은 Qt Widgets Designer 매뉴얼을 참조하십시오.

일반적으로 통합된 Qt Widgets Designer 는 독립형 Qt Widgets Designer 와 동일한 기능을 제공합니다. 다음 섹션에서는 두 버전의 차이점을 설명합니다.

통합된 Qt Widgets Designer 을 사용하여 Qt Widgets 기반의 소규모 애플리케이션을 만드는 방법을 배우려면 Qt Academy: Qt Creator 시작하기 과정을 수강하십시오.

코드 편집기 통합

폼(Design 모드)과 코드(Edit 모드) 간을 전환하려면 Shift+F4를 누르십시오.

Qt Creator 를 사용하여 슬롯 함수의 스텁 구현을 생성할 수 있습니다. Design 모드에서 위젯을 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴를 연 다음, Go to Slot 를 선택하십시오. 목록에서 신호를 선택하여 기존 슬롯 함수로 이동하거나 새로운 슬롯 함수를 생성할 수 있습니다.

이미지 리소스 관리

독립 실행형 Qt Widgets Designer 에서는 내장된 Resource Editor 을 사용하여 이미지 리소스를 생성합니다. Qt Creator 에서는 .ui 파일이 일반적으로 프로젝트의 일부이며, 프로젝트에는 여러 리소스 파일(.qrc)이 포함될 수 있습니다. 이러한 파일은 Qt Creator 리소스 편집기를 사용하여 생성 및 관리됩니다. Qt Widgets Designer Resource Editor 는 비활성화되며, 이미지 리소스는 Qt Widgets Designer Resource Browser 에 표시됩니다.

코드 편집기에서 리소스 파일을 열려면 컨텍스트 메뉴에서 ‘ Follow Symbol Under Cursor ’를 선택하거나, 문자열 리터럴 위에 커서를 올린 상태에서 F2 키를 누르십시오.

다음에 대한 기본 설정을 지정하십시오. Qt Widgets Designer

Qt Widgets Designer 의 뷰를 화면의 새로운 위치로 드래그 앤 드롭할 수 있습니다.

Qt Widgets Designer 의 기본 설정을 지정하려면 Preferences > Designer 로 이동하십시오.

• Embedded Design 에서 스타일, 글꼴 및 화면 해상도를 결정하는 임베디드 장치 프로필을 지정합니다.
• Forms 에서 그리드 및 양식 미리보기에 대한 설정을 지정합니다.
• Template Paths 에서 템플릿을 저장할 추가 폴더를 지정합니다.

설정을 미리 보려면 ‘ Tools ’ > ‘ Form Editor ’ > ‘ Preview ’을 선택하거나 Alt+Shift+R을 누르십시오.

기기 프로필을 사용하여 양식 미리 보기

기기 프로필은 모바일 기기를 설명하는 구성 파일 모음입니다. 여기에는 양식을 둘러싸고 버튼이 있는 모바일 기기를 묘사하는 테두리 이미지가 포함됩니다.

기기 프로필을 사용하여 양식을 미리 보려면, ‘ Tools ’ > ‘ Form Editor ’ > ‘ Preview In ’을 선택한 다음, 기기 프로필을 선택하십시오.

기기 프로필 추가

기기 프로필을 추가하려면:

1. Preferences > Designer 로 이동합니다.

   

2. Embedded Design 에서 (Add a profile)을 선택하여 ‘ Add Profile ’ 대화 상자를 엽니다.

   

3. Name 에서 장치 이름을 입력합니다. 이 이름은 Preview In 에서 옵션으로 표시됩니다.
4. Family 에서 사용할 글꼴을 선택합니다.
5. Point Size 에서 글꼴 크기를 선택합니다.
6. Style 에서 미리 정의된 스타일 중 하나를 선택합니다.
7. Device DPI 에서 미리 정의된 DPI 값 중 하나를 선택하거나, User defined 를 선택하여 사용자 지정 값을 지정합니다.
8. OK 을 선택하여 장치 프로필을 목록에 추가합니다.

.qdp 파일에서 장치 프로필을 가져오려면 ‘ Open ’을 선택하십시오. 이를 ‘ .qdp ’ 파일로 저장하려면 ‘ Save ’을 선택하십시오.