QT 강좌 12 - QGridLayout 2

QT5 / / 2021. 8. 31. 22:09
반응형

QGridLayout QT5 예제입니다. 

 

아래 사이트의 QT 강좌를 공부하며 정리 차원에서 작성하는 포스트입니다. 

https://zetcode.com/gui/qt5 



2021. 08. 31 - 최초작성



터미널에서 빌드 및 실행을 진행합니다. 편집기는 익숙한 것을 사용하세요. 




1. 프로젝트 파일들을 저장할 디렉토리를 생성하고 이동합니다.

 

webnautes@DESKTOP-8TRVTF8:~$ mkdir Grid_Layout

 

webnautes@DESKTOP-8TRVTF8:~$ cd Grid_Layout




2. grid.cpp 파일을 생성하여 다음 코드를 복사하여 붙여넣기합니다. 

 

#include <QApplication>
#include <QWidget>
#include <QGridLayout>
#include <QLabel>
#include <QLineEdit>
#include <QTextEdit>


class MainWindow : public QWidget {

  public:
    MainWindow(QWidget *parent = nullptr);
};

MainWindow::MainWindow(QWidget *parent)
    : QWidget(parent) {

  auto *grid = new QGridLayout(this);
  grid->setVerticalSpacing(15);
  grid->setHorizontalSpacing(10);

  auto *title = new QLabel("Title:", this);
  grid->addWidget(title, 0, 0, 1, 1);
  title->setAlignment(Qt::AlignRight | Qt::AlignVCenter);

  auto *edt1 = new QLineEdit(this);
  grid->addWidget(edt1, 0, 1, 1, 1);

  auto *author = new QLabel("Author:", this);
  grid->addWidget(author, 1, 0, 1, 1);
  author->setAlignment(Qt::AlignRight | Qt::AlignVCenter);

  auto *edt2 = new QLineEdit(this);
  grid->addWidget(edt2, 1, 1, 1, 1);

  auto *review = new QLabel("Review:", this);
  grid->addWidget(review, 2, 0, 1, 1);
  review->setAlignment(Qt::AlignRight | Qt::AlignTop);

  auto *te = new QTextEdit(this);
  grid->addWidget(te, 2, 1, 3, 1);

  setLayout(grid);
}

int main(int argc, char *argv[]) {

  QApplication app(argc, argv);

  MainWindow window;

  window.setWindowTitle("Review");
  window.show();

  return app.exec();
}

 

  auto *grid = new QGridLayout(this);

 

그리드 레이아웃 객체를 생성합니다. 



  grid->setVerticalSpacing(15);

  grid->setHorizontalSpacing(10);

 

위젯 추가시 가로, 세로  간격을 설정합니다. 



  auto *title = new QLabel("Title:", this);

  grid->addWidget(title, 0, 0, 1, 1);

  title->setAlignment(Qt::AlignRight | Qt::AlignVCenter);

 

라벨 객체를 생성하고 addWidget 메소드를 사용하여 라벨 객체를 0행 0열에 배치합니다. 뒤에 파라미터 2개는 셀병합처럼 사용하기 위해 필요한데 지금은 병합하지 않으므로 행, 열 방향 모두 1입니다. 

SetAlignment 메소드를 사용하여 라벨을 수평방향으론 오른쪽, 수직 방향은 중앙으로 합니다. 



  auto *edt1 = new QLineEdit(this);

  grid->addWidget(edt1, 0, 1, 1, 1);

 

에디터 객체를 생성하고 addWidget 메소드를 사용하여 에디터 객체를 0행 1열에 배치합니다. 뒤에 파라미터 2개는 셀병합처럼 사용하기 위해 필요한데 지금은 병합하지 않으므로 행, 열 방향 모두 1입니다. 



  auto *author = new QLabel("Author:", this);

  grid->addWidget(author, 1, 0, 1, 1);

  author->setAlignment(Qt::AlignRight | Qt::AlignVCenter);

 

라벨 객체를 생성하고 addWidget 메소드를 사용하여 라벨 객체를 1행 0열에 배치합니다. 뒤에 파라미터 2개는 셀병합처럼 사용하기 위해 필요한데 지금은 병합하지 않으므로 행, 열 방향 모두 1입니다. 

SetAlignment 메소드를 사용하여 라벨을 수평방향으론 오른쪽, 수직 방향은 중앙으로 합니다. 



  auto *edt2 = new QLineEdit(this);

  grid->addWidget(edt2, 1, 1, 1, 1);

 

에디터 객체를 생성하고 addWidget 메소드를 사용하여 에디터 객체를 1행 1열에 배치합니다. 뒤에 파라미터 2개는 셀병합처럼 사용하기 위해 필요한데 지금은 병합하지 않으므로 행, 열 방향 모두 1입니다. 



  auto *review = new QLabel("Review:", this);

  grid->addWidget(review, 2, 0, 1, 1);

  review->setAlignment(Qt::AlignRight | Qt::AlignTop);

 

라벨 객체를 생성하고 addWidget 메소드를 사용하여 라벨 객체를 2행 0열에 배치합니다. 뒤에 파라미터 2개는 셀병합처럼 사용하기 위해 필요한데 지금은 병합하지 않으므로 행, 열 방향 모두 1입니다. 

SetAlignment 메소드를 사용하여 라벨을 수평방향으론 오른쪽, 수직 방향은 중앙으로 합니다. 



  auto *te = new QTextEdit(this);

  grid->addWidget(te, 2, 1, 3, 1);

 

에디터 객체를 생성하고 addWidget 메소드를 사용하여 에디터 객체를 2행 1열에 배치합니다. 뒤에 파라미터 2개는 셀병합처럼 사용하기 위해 필요한데 지금은 병합하지 않으므로 행, 열 방향 모두 1입니다. 



  setLayout(grid);

 

그리드 레이아웃 객체를  레이아웃으로 설정합니다. 



3. qmake -project 명령을 사용하면 qt 프로젝트 파일을 생성해줍니다.

프로젝트를 구성하는 파일의 정보를 가지고 확장자가 pro인 파일이 자동으로 생성합니다. 

 

webnautes@DESKTOP-8TRVTF8:~/Grid_Layout$ qmake -project




4. 확장자가 pro인  qt 프로젝트 파일이 생성될 때, qt 코드에서 사용중인 qt 모듈 이름이 자동으로 추가되지 않습니다.  

일단 진행해보고 컴파일 에러가 나면 qt 프로젝트 파일을 열어서 사용중인 qt 모듈 이름을 추가해줘야 합니다.

 

다음 한줄을 추가합니다. 

 

QT += widgets




5. qmake 명령으로 Makefile을 생성합니다.

 

webnautes@DESKTOP-8TRVTF8:~/Grid_Layout$ qmake



6. make 명령은  Makefile에 기술된대로 컴파일 및 링크를 실행합니다.

중간 결과물인  확장자 .o인 오브젝트 파일과 프로젝트 디렉토리와 동일한 이름을 갖는 실행파일이 생성됩니다. 

 

webnautes@DESKTOP-8TRVTF8:~/Grid_Layout$ make



이제 실행시켜 보면 푸쉬버튼 두 개가 추가된 윈도우가 보입니다. 

 

webnautes@DESKTOP-8TRVTF8:~/Form_Example$ ./Grid_Layout

 

 

반응형

해본 것을 문서화하여 기록합니다.
부족함이 있지만 도움이 되었으면 합니다.


포스트 작성시에는 문제 없었지만 이후 문제가 생길 수 있습니다.
질문을 남겨주면 가능한 빨리 답변드립니다.


제가 쓴 책도 한번 검토해보세요 ^^

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    Favicon of https://tnal.tistory.com BlogIcon 프리마베라

    처음부터 따라해보았는데, 정말 너무 초보자가 접근하기 쉽게 하나하나 정성스럽게 작성해주신것 같아, 너무 감사드려요. 덕분에 쉽게 따라할수 있었어요.