본문 바로가기
SWE/Qt

[Qt] GridLayout 셀 크기 조절하는 방법 (ColumnSpan)

by S나라라2 2020. 7. 9.
반응형

GridLayout 각 셀의 크기를 다르게 조절하는 방법

 

 

Qt 에서 GridLayout을 사용하는데, 각 셀마다의 크기를 다르게 주고 싶다면? 방법이 있다!!!!!!!!

먼저, 각 셀의 크기를 다르게 준다는 말이 무슨 말인지 예시를 보자.

 

(예제1) 각 셀의 width, height가 같다.

1 2
3 4

 

(예제2) 각 셀의 width, height가 제각각이다.

 1 2
3 4

 

 (예제2) 와 같이 gridlayout의 조절방법은 2가지가 있다.

 

 

방법1 addWidget or addLayout 메소드 사용

 

QGridLayout의 addWidget, addLayout 메소드를 사용하는 것이다.

widget 혹은 layout을 추가할 때  파라미터로 rowSpan, columnSpan을 설정해줄 수 있다.

 

addWidget
addLayout

 

addWidget과 addLayout은 첫 번째 인자빼고는 모두 같은 인자를 전달 받는다.

각 파라미터마다 설명을 해보자

 


QGirdLayout::addWidget(
	QWidget* widget,		// QGridLayout에 넣어줄 위젯
   	int fromRow,			// 어디 행에 넣을 것인지
    int fromColumn,			// 어디 열에 넣을 것인지
    int rowSpan,			// widget 셀의 높이 비중
    int columnSpan,			// widget 셀의 너비 비중
    Qt::Alignment alignment =0  // 정렬값 설정, 기본값인 0은 좌측정렬이다.
);
    

rowSpan, columnSpan 에서 '비중'이란 같은 줄에 있는 위젯의 크기 비율이다.

 

columnSpan을 가지고 예를 들어보자. 

같은 행에 widget1, widget2, widget3이 columnSpan을 각각 3, 1, 1을 가지고 있다.

 

(1) columnSpan 3, 1, 1

 

1 2 3

(2) columnSpan 2, 2, 1

1 2 3

(3) columnSpan 2, 2, 2

1 2 3

 

이렇게 gridLayout의 너비를 columnSpan값의 비율에 따라 widget들이 나눠가지는 것이다.

 

 

 

예제 코드 (c++)

QGridLayout* gridLayout = new QGirdLayout(this);

gridLayout->addWidget(QLabel("1"), 0, 0);
gridLayout->addWidget(QLabel("2"), 0, 1, 1, 3);
gridLayout->addWidget(QLabel("3"), 1, 0, 1, 2);
gridLayout->addWidget(QLabel("4"), 1, 2, 1, 2);

setLayout(gridLayout);

 

위의 예제 코드로 구현하면 다음과 같이 가질 수 있다.

1 2
3 4

0행에 있는 QLabel("1")과 QLabel("2")의 너비 비율은 1:3을 가지고,

1행에 있는 QLabel("3")과 QLabel("4")의 너비 비율이 2:2, 즉 1:1을 가지는 것이다.

 

 

예제 출처 : QGridLayout different column width

https://stackoverflow.com/questions/47910192/qgridlayout-different-column-width

python으로 적힌 코드를 c++으로 변경하였다.

 

다른 예제 : QGridLayout width PlotWidget-pyqtgraph

https://stackoverflow.com/questions/47681774/qgridlayout-with-plotwidget-pyqtgraph

해당 예제도 python으로 작성되어 있지만, 보면 이해가 쉬워진다.

 

 

 

방법2 Qt Designer 사용

 

이건 진짜 간단하다. 

늘리고 싶은 위젯이나 레이아웃의 끝을 잡고 다른 셀까지 쭈욱 잡아당기면 된다.

 

예제

 

아래의 그림(Qt Designer에서 QGridLayout)에서 (1,1)에 위치하고 있는 레이아웃의 width를 우측으로 늘리고 싶다면

예제

해당 레이아웃의 우측 끝으로 가면 화살표 모양이 <->과 같이 바뀐다. 그 때 클릭하여 끝까지 쭈욱 잡아 끌면 된다. 

방법

그러면 노란색 레이아웃처럼 길게 늘어진다.

결과

 

 

Qt Designer 어렵다고 싫어했는데 조금 좋은거 같기도?? 예~~

반응형