빠른 시작 가이드 Qt Widgets Designer

Qt Widgets Designer 사용법에는 네 가지 기본 단계가 있습니다:

1. 폼과 개체를 선택합니다
2. 폼에 개체를 배치하기
3. 신호를 슬롯에 연결하기
4. 폼 미리 보기

이미지 편집 프로그램에서 흔히 볼 수 있는, 적색(Red), 녹색(Green), 청색(Blue, RGB) 값을 조작하는 데 필요한 컨트롤이 포함된 작은 위젯(위 스크린샷 참조)을 디자인하고 싶다고 가정해 봅시다.

폼 선택하기 먼저 ‘새 폼 ’ 대화 상자에서 ‘위젯’을 선택합니다.

폼에 위젯 배치하기 라벨 3개, 스핀 박스 3개, 수직 슬라이더 3개를 폼 위로 드래그하여 배치합니다. 라벨의 기본 텍스트를 변경하려면 해당 라벨을 더블 클릭하기만 하면 됩니다. 원하는 레이아웃에 따라 위젯들을 배치할 수 있습니다.

프로그램에서 위젯들이 정확히 이와 같은 배열로 표시되도록 하려면, 이 위젯들을 레이아웃에 배치해야 합니다. 이를 3개씩 그룹으로 나누어 진행하겠습니다. “RED” 라벨을 선택합니다. 그런 다음 Ctrl 키를 누른 상태에서 해당 스핀 박스와 슬라이더를 선택합니다. ‘Form’ 메뉴에서 ‘Lay Out in a Grid’를 선택합니다.

나머지 두 개의 레이블과 해당 스핀 박스 및 슬라이더에 대해서도 동일한 단계를 반복합니다.

다음 단계는 세 개의 레이아웃을 하나의 메인 레이아웃으로 결합하는 것입니다. 메인 레이아웃은 최상위 위젯(이 경우 QWidget)의 레이아웃입니다. 최상위 위젯에 레이아웃이 설정되어 있어야 합니다. 그렇지 않으면 창 크기를 조정할 때 창 내의 위젯 크기도 함께 조정되지 않습니다. 레이아웃을 설정하려면, 세 개의 개별 레이아웃 외부인 폼의 아무 곳이나 마우스 오른쪽 버튼을 클릭하고 ‘가로로 배치(Lay Out Horizontally)’를 선택하십시오. 또는 ‘그 리드로 배치(Lay Out in a Grid ) ’를 선택해도 됩니다. 이 경우에도 아래와 같이 동일한 배치가 표시됩니다.

슬라이더를 클릭하여 특정 값으로 드래그하면, 스핀 박스에 슬라이더의 위치가 표시되도록 하고 싶을 것입니다. 이러한 동작을 구현하려면 슬라이더의 valueChanged() 신호를 스핀 박스의 setValue() 슬롯에 연결해야 합니다. 또한 반대 방향의 연결도 설정해야 합니다. 예를 들어, 스핀 박스의 valueChanged() 신호를 슬라이더의 setValue() 슬롯에 연결해야 합니다.

이를 위해서는 F4 키를 누르거나 편집 ( Edit ) 메뉴에서 ‘신호/슬롯 편집(Edit Signals/Slots)’을 선택하여 ‘신호/슬롯 편집’ 모드로 전환해야 합니다.

신호를 슬롯에 연결하기 슬라이더를 클릭하고 커서를 스핀 박스 쪽으로 드래그합니다. 아래에 표시된 ‘연결 구성’ 대화 상자가 나타납니다. 올바른 신호와 슬롯을 선택한 다음 ‘확인’을 클릭합니다.

이 단계를 (순서를 반대로 하여) 반복하여, 스핀 박스를 클릭하고 커서를 슬라이더 쪽으로 드래그하여 스핀 박스의 ' valueChanged()' 신호를 슬라이더의 ' setValue()' 슬롯에 연결합니다.

올바른 신호와 슬롯을 선택하는 데는 아래 스크린샷을 참고할 수 있습니다.

RGB 컨트롤러의 “RED” 구성 요소에 대한 객체 연결을 성공적으로 마쳤으므로, “GREEN” 및 “BLUE” 구성 요소에 대해서도 동일한 작업을 수행하십시오.

RGB 값은 0에서 255 사이의 범위를 가지므로, 스핀 박스와 슬라이더를 해당 범위로 제한해야 합니다.

위젯 속성 설정 첫 번째 스핀 박스를 클릭하세요. 속성 편집기( Property Editor)에서 ' QSpinBox'의 속성이 표시됩니다. ' maximum ' 속성에 "255"를 입력하세요. 그런 다음 첫 번째 수직 슬라이더를 클릭하면 ' QAbstractSlider'의 속성이 표시됩니다. ' maximum ' 속성에도 "255"를 입력하세요. 나머지 스핀 박스와 슬라이더에 대해서도 이 과정을 반복하세요.

이제 Ctrl + R을 누르거나 Form 메뉴에서 Preview를 선택하여 애플리케이션에서 양식이 어떻게 표시될지 미리 확인해 보세요. 슬라이더를 드래그해 보세요. 스핀 박스도 그 값을 그대로 반영할 것입니다(반대의 경우도 마찬가지입니다). 또한, 크기를 조정하여 자식 위젯을 관리하는 레이아웃이 다양한 창 크기에 어떻게 반응하는지 확인할 수 있습니다.