QT - Layout

서론

QWidget 클래스의 setGeometry() 멤버 함수를 이용해 GUI 상에서 특정 X,Y 좌표로 위젯을 배치하게 되면 윈도우의 크기가 변경될 때 위젯의 위치가 변경되지 않는다.

하지만 레이아웃을 이용하면 윈도우의 크기가 변경 될 때마다 동적으로 GUI 상에 위젯들의 크기도 동적으로 변하게 된다.

윈도우의 크기가 변경되면 레이아웃은 위젯들을 최적의 위치에 정렬되어 일관된 크기의 모양을 유지할 수 있도록 해준다.

다음 표는 QT에서 주로 사용되는 레이아웃 클래스들이다.

 

클래스	설명
QHBoxLayout	위젯들을 가로 방향으로 배치
QVBoxLayout	위젯들을 세로 방향으로 배치
QGridLayout	위젯을 그리드 또는 바둑판 스타일로 배치
QFormLayout	위젯을 2열로 배치하는 형식

 

QHBoxLayout

QHBoxLayout은 위젯들을 가로 방향으로 배치할 수 있다.

다음 코드와 같이 QPushButton 위젯을 addWidget() 멤버 함수를 이용해 추가할 수 있다.

 

widget.cpp

#include "widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{

    // Horizontal Layout
    QHBoxLayout *hboxLayout = new QHBoxLayout();
    QPushButton *hbtn[6];

    QString hbtnStr[6] = {"One", "Two", "Three", "Four", "Five", "Six"};
    for(int i=0; i<6; i++){
        hbtn[i] = new QPushButton(hbtnStr[i],this);
        hboxLayout->addWidget(hbtn[i]);
    }

    setLayout(hboxtLayout);
}

Widget::~Widget()
{
}

* 헤더파일에 #include <QHBoxLayout> 을 선언해줘야 사용할 수 있다.

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QHBoxLayout>
#include <QPushButton>

class Widget : public QWidget
{
    Q_OBJECT
    
public:
    Widget(QWidget *parent = nullptr);
    ~Widget();
};
#endif // WIDGET_H

 

 

QVBoxLayout

QVBoxLayout은 위젯을 세로 방향으로 배치할 수 있다.

#include "widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    // Vertical Layout
    QVBoxLayout *vboxLayout = new QVBoxLayout();
    QPushButton *vbtn[3];

    QString vbtnStr[3] = {"movie", "Drama", "Animation"};
    for(int i=0; i<3; i++){
        vbtn[i] = new QPushButton(vbtnStr[i],this);
        vboxLayout->addWidget(vbtn[i]);
    }

    setLayout(vboxLayout);
}

Widget::~Widget()
{
}

 

QGridLayout

QGridLayout은 바둑판 모양과 같은 스타일로 위젯을 배치할 수 있다.

QGridLayout은 특정 행을 하나의 위젯만 배치할 수 있도록 병합 하거나 여러 개의 셀로 나눌 수 있다.

#include "widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    // Grid Layout
    QGridLayout *gridLayout = new QGridLayout();
    QPushButton *gbtn[6];
    for(int i = 0 ; i < 5 ; i++){
        gbtn[i] = new QPushButton(hbtnStr[i],this);
    }

    gridLayout->addWidget(gbtn[0], 0, 0);
    gridLayout->addWidget(gbtn[1], 0, 1);
    gridLayout->addWidget(gbtn[2], 1, 0, 1, 2);
    gridLayout->addWidget(gbtn[3], 2, 0);
    gridLayout->addWidget(gbtn[4], 2, 1);

    setLayout(gridLayout);
}

Widget::~Widget()
{
}

 

 

중첩된 레이아웃을 사용

레이아웃 안에 레이아웃을 배치할 수 있다. 다음 코드는 QVBoxLayout안에 3가지 레이아웃을 배치한 코드이다.

 

widget.cpp

#include "widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{

    // Horizontal Layout
    QHBoxLayout *hboxLayout = new QHBoxLayout();
    QPushButton *hbtn[6];

    QString hbtnStr[6] = {"One", "Two", "Three", "Four", "Five", "Six"};
    for(int i=0; i<6; i++){
        hbtn[i] = new QPushButton(hbtnStr[i],this);
        hboxLayout->addWidget(hbtn[i]);
    }

    // Vertical Layout
    QVBoxLayout *vboxLayout = new QVBoxLayout();
    QPushButton *vbtn[3];

    QString vbtnStr[3] = {"movie", "Drama", "Animation"};
    for(int i=0; i<3; i++){
        vbtn[i] = new QPushButton(vbtnStr[i],this);
        vboxLayout->addWidget(vbtn[i]);
    }

    // Grid Layout
    QGridLayout *gridLayout = new QGridLayout();
    QPushButton *gbtn[6];
    for(int i = 0 ; i < 5 ; i++){
        gbtn[i] = new QPushButton(hbtnStr[i],this);
    }

    gridLayout->addWidget(gbtn[0], 0, 0);
    gridLayout->addWidget(gbtn[1], 0, 1);
    gridLayout->addWidget(gbtn[2], 1, 0, 1, 2);
    gridLayout->addWidget(gbtn[3], 2, 0);
    gridLayout->addWidget(gbtn[4], 2, 1);

    
    // Default Layout
    QVBoxLayout *defaultLayout = new QVBoxLayout();
    defaultLayout->addLayout(hboxLayout);
    defaultLayout->addLayout(vboxLayout);
    defaultLayout->addLayout(gridLayout);

    setLayout(defaultLayout);


}

Widget::~Widget()
{
}