QSplitter 클래스로 Widget 크기 조절하기

QSplitter 사용 이유

스플리터를 사용하면 사용자가 하위 위젯 사이의 경계를 끌어서 하위 위젯의 크기를 제어할 수 있습니다.
아래와 같이 Qt Creater에서도 QSplitter 기능을 지원하는데 헤더나 소스 파일의 이름이 길어져 Project 부분을 확대하고 싶을 경우

혹은 해당 부분을 축소하여 코드 입력 부분의 영역 넓히고 싶은 경우 등에 마우스로 해당 경계를 드래그하여 사용합니다.

 

 

위와 같이 QSplitter를 구현할 수 있는 방법은 두 가지가 있습니다.
1. 소스 상에서 QSplitter 객체를 생성하여 기존에 존재하는 위젯을 생성한 QSplitter 객체에 새롭게 붙이는 방법
2. Qt Designer에서 기존에 생성되어 있던 Widget 들은 선택하여 QSplitter 기능을 적용하는 방법

각 방법에 따른 QSplitter 적용 과정을 아래에서 차례로 알려드리겠습니다.

 

* 1번 방법 (소스 내 추가)

소스 상에서 QSplitter를 구현하는 방법입니다.

QSplitter 클래스를 사용하기 위해 헤더를 추가하고 객체를 생성 후,

splitter 객체에 기존에 존재하는 treeWidget 및 textBrowser를 addWidget() 함수를 사용하여 붙이는 과정입니다. 

#include <QSplitter> QSplitter *splitter; ... splitter = new QSplitter(this);                 // QSplitter 객체 생성 splitter->addWidget(ui->treeWidget);   // QSplitter 객체에 Widget 추가 splitter->addWidget(ui->textBrowser);  // QSplitter 객체에 Widget 추가 splitter->setGeometry(10,30,780,560);// 초기 x,y 좌표 및 size 지정 splitter->setChildrenCollapsible(false);  // splitter 이동으로 인해 창이 사라지는 것을 방지 ...

 

추가로 QSplitter에 대한 Qt documentation 내용입니다.
insertWidget() 또는 addWidget()이 호출 될 때 위젯이 이미 QSplitter 내에 있으면 새 위치로 이동합니다. 
나중에 스플리터에서 위젯을 재정렬하는데 사용할 수 있습니다. 

indexOf(), widget() 및 count()를 사용하여 스플리터 내부의 위젯에 액세스 할 수 있습니다.

기본 QSplitter는 자식을 가로로 (나란히) 배치하거나 setOrientation(Qt::Vertical)을 사용하여 자식을 세로로 배치 할 수 있습니다.
기본적으로 모든 위젯은 위젯의 minimumSizeHint() (또는 minimumSize())와 maximumSize() 사이에서 사용자가 원하는만큼 크거나 작을 수 있습니다. QSplitter는 기본적으로 자식의 크기를 동적으로 조정합니다. 

QSplitter가 크기 조정 작업이 끝날 때만 자식 크기를 조정하도록하려면 setOpaqueResize(false)를 호출합니다.

위젯 간 크기의 초기 분포는 초기 크기와 스트레치 계수를 곱하여 결정됩니다. 
setSizes()를 사용하여 모든 위젯의 크기를 설정할 수도 있습니다. sizes() 함수는 사용자가 설정한 크기를 반환합니다. 

또는 saveState() 및 restoreState()를 각각 사용하여 QByteArray에서 위젯 크기를 저장하고 복원 할 수 있습니다.

자식을 hide()하면 그 공간이 다른 자식들에게 분배됩니다. 다시 show()하면 복원됩니다.

 

* 2번 방법 (Qt Designer 사용)

1. Qt Designer에서 QSplitter 기능을 사용할 treeWidget 및 textBrowser 등을 선택 후 드래그하여 만들어 줍니다.

예제에서는 QTreeWidget, QTextBrowser를 사용하였고 QListView, QTreeView, QTextEdit 등 다양한 클래스에 QSplitter 적용 가능합니다.

 

 

2. QSplitter을 적용할 객체들을 모두 선택한 후 아래의 화살표에 위치한 Lay Out Horizontally in Splitter 버튼을 클릭합니다.

해당 버튼은 하위 객체에 대해 좌우로 이동이 가능한 QSplitter를 적용하는 기능을 합니다.

위 아래로 이동이 가능한 QSplitter를 적용하려면 하위 객체 선택 후 한칸 오른쪽에 위치한 Lay Out Vertically in Splitter 버튼을 선택합니다.

 

 

3. QSplitter가 적용되면 좌측 상단에 기존에 존재하던 treeWidget과 textBrowser의 상위 객체로 QSplitter가 생긴 것을 볼 수 있습니다.

또한, QSplitter 적용 시 ui의 크기도 변경되는데 드래그 혹은 QWidget 창에서 원하시는 사이즈로 맞춰주시면 됩니다.

 

 

4. QSplitter 적용이 완료되었습니다. 아래 이미지에서는 안보이겠지만 가운데에 점들이 생긴 것을 볼 수 있습니다.

실행 후 점 부분에 마우스를 올리면 좌우로 이동하여 해당 영역을 확장할 수 있습니다.

 

 

5. 4번에서 만든 ui를 실행시킨 결과입니다. 좌우측으로 이동하여 해당 영역이 확장되거나 축소합니다.

하지만 아래의 3번째 이미지처럼 모든 영역이 사라지는 것을 원하지 않을 경우가 있습니다.

이때, splitter->setChildrenCollapsible(false); 코드를 추가하면 됩니다.

 

 

6. Qt Designer에서 setChildrenCollapsible 관련 설정을 할 경우,

좌측 하단의 QSplitter 설정 창에서 setChildrenCollapsible 부분 Checkbox를 해제하시면 됩니다.