기본 레이아웃 예제

'기본 레이아웃'에서는 Qt에서 사용할 수 있는 표준 레이아웃 관리자( QBoxLayout, QGridLayout, QFormLayout)의 사용 방법을 보여줍니다.

QBoxLayout 클래스는 위젯을 수평 또는 수직으로 정렬합니다. QHBoxLayout 및 QVBoxLayout 는 QBoxLayout 의 편리한 하위 클래스입니다. QGridLayout 는 사용 가능한 공간을 행과 열로 나누어 셀 내에 위젯을 배치합니다. 반면, QFormLayout 는 왼쪽 열에 레이블을, 오른쪽 열에 입력 필드를 배치하여 자식 요소를 2열 형태로 설정합니다.

자세한 내용은 레이아웃 관리 페이지를 참조하십시오.

예제 실행

다음 경로에서 예제를 실행할 수 있습니다.

• Qt Creator

  Welcome 모드를 열고 Examples 에서 예제를 선택하십시오. 자세한 내용은 Qt Creator: 튜토리얼: 빌드 및 실행을 참조하십시오.

• Qt Extension for Visual Studio Code

  Command Palette 에서 Qt: Open Qt examples 명령을 실행하고 목록에서 예제를 선택하십시오. 자세한 내용은 Qt Extension for Visual Studio Code: 튜토리얼: 빌드 및 실행을 참조하십시오.

Dialog 클래스 정의

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog();

private:
    void createMenu();
    void createHorizontalGroupBox();
    void createGridGroupBox();
    void createFormGroupBox();

    enum { NumGridRows = 3, NumButtons = 4 };

    QMenuBar *menuBar;
    QGroupBox *horizontalGroupBox;
    QGroupBox *gridGroupBox;
    QGroupBox *formGroupBox;
    QTextEdit *smallEditor;
    QTextEdit *bigEditor;
    QLabel *labels[NumGridRows];
    QLineEdit *lineEdits[NumGridRows];
    QPushButton *buttons[NumButtons];
    QDialogButtonBox *buttonBox;

    QMenu *fileMenu;
    QAction *exitAction;
};

Dialog 클래스는 QDialog 를 상속받습니다. 이 클래스는 QHBoxLayout, QVBoxLayout, QGridLayout, QFormLayout 와 같은 기하 관리자를 사용하여 자식 위젯을 표시하는 사용자 정의 위젯입니다.

클래스 생성자를 단순화하기 위해 네 개의 비공개 함수가 있습니다. createMenu(), createHorizontalGroupBox(), createGridGroupBox(), createFormGroupBox() 함수는 레이아웃이 위젯의 외관에 어떤 영향을 미치는지 보여주기 위해 예제에서 사용하는 여러 위젯을 생성합니다.

Dialog 클래스 구현

Dialog::Dialog()
{
    createMenu();
    createHorizontalGroupBox();
    createGridGroupBox();
    createFormGroupBox();

생성자에서 먼저 createMenu() 함수를 사용하여 메뉴 바를 생성하고 데이터를 채우며, createHorizontalGroupBox() 함수를 사용하여 가로 레이아웃으로 배치된 네 개의 버튼을 포함하는 그룹 박스를 생성합니다. 다음으로, ` createGridGroupBox() ` 함수를 사용하여 그리드 레이아웃으로 표시되는 여러 개의 라인 에디트와 작은 텍스트 편집기가 포함된 그룹 박스를 생성합니다. 마지막으로, ` createFormGroupBox() ` 함수를 사용하여 세 개의 레이블과 세 개의 입력 필드(라인 에디트, 콤보 박스, 스핀 박스)가 포함된 그룹 박스를 생성합니다.

    bigEditor = new QTextEdit;
    bigEditor->setPlainText(tr("This widget takes up all the remaining space "
                               "in the top-level layout."));

    buttonBox = new QDialogButtonBox(QDialogButtonBox::Ok
                                     | QDialogButtonBox::Cancel);

    connect(buttonBox, &QDialogButtonBox::accepted, this, &QDialog::accept);
    connect(buttonBox, &QDialogButtonBox::rejected, this, &QDialog::reject);

또한 큰 텍스트 편집기와 대화 상자 버튼 상자도 생성합니다. ` QDialogButtonBox ` 클래스는 현재 위젯 스타일에 적합한 레이아웃으로 버튼을 표시하는 위젯입니다. 선호하는 버튼은 ` QDialogButtonBox::StandardButtons ` 열거형을 사용하여 생성자의 인자로 지정할 수 있습니다.

위젯을 생성할 때 부모 위젯을 명시적으로 지정할 필요가 없다는 점에 유의하십시오. 그 이유는 여기서 생성하는 모든 위젯이 레이아웃에 추가될 것이며, 위젯을 레이아웃에 추가하면 해당 위젯은 레이아웃이 설치된 위젯을 자동으로 부모로 지정받기 때문입니다.

    QVBoxLayout *mainLayout = new QVBoxLayout;

메인 레이아웃은 ` QVBoxLayout ` 객체입니다. ` QVBoxLayout `은 세로 방향의 박스 레이아웃을 위한 편의 클래스입니다.

일반적으로 ` QBoxLayout ` 클래스는 (상위 레이아웃이나 상위 위젯으로부터) 할당받은 공간을 일련의 상자로 나누고, 관리되는 각 위젯이 하나의 상자를 채우도록 합니다. ` QBoxLayout`의 방향이 ` Qt::Horizontal `인 경우 상자들은 행으로 배치됩니다. 방향이 ` Qt::Vertical`인 경우 상자들은 열로 배치됩니다. 이에 해당하는 편의 클래스는 각각 ` QHBoxLayout `과 ` QVBoxLayout`입니다.

    mainLayout->setMenuBar(menuBar);

QLayout::setMenuBar() 함수를 호출하면, 레이아웃은 제공된 메뉴 바를 부모 위젯의 상단에, 위젯의 content margins 바깥쪽에 배치합니다. 모든 자식 위젯은 메뉴 바의 하단 가장자리 아래에 배치됩니다.

    mainLayout->addWidget(horizontalGroupBox);
    mainLayout->addWidget(gridGroupBox);
    mainLayout->addWidget(formGroupBox);
    mainLayout->addWidget(bigEditor);
    mainLayout->addWidget(buttonBox);

QBoxLayout::addWidget() 함수를 사용하여 위젯을 레이아웃의 끝에 추가합니다. 각 위젯은 최소한 최소 크기를, 최대 최대 크기까지 할당받게 됩니다. addWidget() 함수에서 스트레치 계수를 지정할 수 있으며, 초과 공간은 이 스트레치 계수에 따라 분배됩니다. 지정하지 않으면 위젯의 스트레치 계수는 0이 됩니다.

    setLayout(scrollLayout);
    setWindowTitle(tr("Basic Layouts"));
}

QWidget::setLayout() 함수를 사용하여 Dialog 위젯에 메인 레이아웃을 설치하면, 레이아웃의 모든 위젯은 자동으로 Dialog 위젯의 자식 요소로 재설정됩니다.

void Dialog::createMenu()
{
    menuBar = new QMenuBar;

    fileMenu = new QMenu(tr("&File"), this);
    exitAction = fileMenu->addAction(tr("E&xit"));
    menuBar->addMenu(fileMenu);

    connect(exitAction, &QAction::triggered, this, &QDialog::accept);
}

createMenu() 의 비공개 함수 내에서 메뉴 바를 생성하고, Exit 옵션을 포함하는 풀다운 File 메뉴를 추가합니다.

void Dialog::createHorizontalGroupBox()
{
    horizontalGroupBox = new QGroupBox(tr("Horizontal layout"));
    QHBoxLayout *layout = new QHBoxLayout;

    for (int i = 0; i < NumButtons; ++i) {
        buttons[i] = new QPushButton(tr("Button %1").arg(i + 1));
        layout->addWidget(buttons[i]);
    }
    horizontalGroupBox->setLayout(layout);
}

수평 그룹 상자를 생성할 때는 내부 레이아웃으로 QHBoxLayout 을 사용합니다. 그룹 상자에 넣을 버튼을 생성하여 레이아웃에 추가한 후, 해당 레이아웃을 그룹 상자에 적용합니다.

void Dialog::createGridGroupBox()
{
    gridGroupBox = new QGroupBox(tr("Grid layout"));

createGridGroupBox() 함수에서는 위젯을 그리드 형태로 배치하는 QGridLayout 를 사용합니다. 이 함수는 (상위 레이아웃이나 상위 위젯에 의해) 할당된 공간을 행과 열로 나누고, 관리하는 각 위젯을 올바른 셀에 배치합니다.

    for (int i = 0; i < NumGridRows; ++i) {
        labels[i] = new QLabel(tr("Line %1:").arg(i + 1));
        lineEdits[i] = new QLineEdit;
        layout->addWidget(labels[i], i + 1, 0);
        layout->addWidget(lineEdits[i], i + 1, 1);
    }

그리드의 각 행에 대해 레이블과 관련 라인 에디트를 생성하고, 이를 레이아웃에 추가합니다. QGridLayout::addWidget() 함수는 QBoxLayout 의 해당 함수와는 다릅니다. 이 함수는 위젯을 배치할 그리드 셀을 지정하는 행과 열을 필요로 합니다.

    smallEditor = new QTextEdit;
    smallEditor->setPlainText(tr("This widget takes up about two thirds of the "
                                 "grid layout."));
    layout->addWidget(smallEditor, 0, 2, 4, 1);

QGridLayout::addWidget() 함수는 또한 셀이 차지할 행과 열의 수를 지정하는 인수를 추가로 받을 수 있습니다. 이 예제에서는 3행 1열을 차지하는 작은 편집기를 만듭니다.

QBoxLayout::addWidget() 및 QGridLayout::addWidget() 함수 모두 위젯의 정렬 방식을 지정하는 마지막 인수를 추가할 수 있습니다. 기본적으로 위젯은 셀 전체를 채웁니다. 하지만 예를 들어, 정렬 방식을 Qt::AlignRight 로 지정하여 위젯을 오른쪽 가장자리에 정렬할 수도 있습니다.

    layout->setColumnStretch(1, 10);
    layout->setColumnStretch(2, 20);
    gridGroupBox->setLayout(layout);
}

그리드 레이아웃의 각 열에는 확장 계수가 있습니다. 확장 계수는 QGridLayout::setColumnStretch()를 사용하여 설정되며, 열이 필요한 최소 공간을 초과하여 사용 가능한 공간 중 얼마를 차지할지 결정합니다.

이 예제에서는 1번과 2번 열의 스트레치 팩터를 설정합니다. 스트레치 팩터는 이 그리드 내의 다른 열을 기준으로 상대적인 값이며, 스트레치 팩터가 더 높은 열일수록 사용 가능한 공간을 더 많이 차지합니다. 따라서 이 그리드 레이아웃에서 2번 열은 1번 열보다 더 많은 사용 가능한 공간을 차지하게 되며, 0번 열은 스트레치 계수가 0(기본값)이므로 전혀 확장되지 않습니다.

열과 행은 동일하게 작동하며, 행에도 이에 상응하는 스트레치 계수가 있고 QGridLayout::setRowStretch() 함수가 있습니다.

void Dialog::createFormGroupBox()
{
    formGroupBox = new QGroupBox(tr("Form layout"));
    QFormLayout *layout = new QFormLayout;
    layout->addRow(new QLabel(tr("Line 1:")), new QLineEdit);
    layout->addRow(new QLabel(tr("Line 2, long text:")), new QComboBox);
    layout->addRow(new QLabel(tr("Line 3:")), new QSpinBox);
    formGroupBox->setLayout(layout);
}

createFormGroupBox() 함수에서는 QFormLayout 를 사용하여 객체를 ‘이름’과 ‘필드’라는 두 열로 깔끔하게 배열합니다. 이름용 QLabel 객체가 세 개 있으며, 이에 대응하는 필드용 입력 위젯도 세 개 있습니다: QLineEdit, QComboBox, QSpinBox 입니다. QBoxLayout::addWidget() 및 QGridLayout::addWidget()과는 달리, QFormLayout::addRow()를 사용하여 레이아웃에 위젯을 추가합니다.

예제 프로젝트 @ code.qt.io